# Icon

# Introduction

There are 2 types of icons in laravue - Element-UI icons and IconFont.cn. They are listed here

If you do not find the suitable icons in the Icons of this project, you can search and download them on iconfont.cn, then generate and use normally. You can also go to other svg icon website, download svg and put it in this folder.

# Download and generate icons from IconFont.cn

First, search your suitable icons and download to the @/icons/svg folder

They will be imported automatically.

# How to use Icon Font

<svg-icon icon-class="password" /> // icon-class is the icon's name

Plese check the SVG Icon Component here.

# Change Icon Font color

By default, svg-icon uses the parent's color fill: currentColor;.

You can change it directly or change the parent's one (which will affect on all children) in @/components/SvgIcon/index.vue

# How to use Element UI icons

The Element UI provides a set of common icons. Please check the example code below for more detail.

<i class="el-icon-edit"></i>
<i class="el-icon-share"></i>
<i class="el-icon-delete"></i>
<el-button type="primary" icon="el-icon-search">Search</el-button>

# Change color Element UI icons

You can change the color of the icon easily with the CSS color property;