el-button in VUE element-ui uses iconfont icon

Steps:
1. Enter the iconfont official website portal and use any method to log in.

2. Follow the steps below:

3. After the icon library is built, search for the icons you need directly and follow the steps below:





4. After decompressing the file, create a new file under the project assets, and put the decompressed file into

5. Introduce in main.js:

import './assets/icon/iconfont.css'

  
  
   
   

  
  
   
   

6. Use the class name to introduce the icon in the label:

<el-button style="margin-left: 4px" class="filter-item iconfont icon-zhuangtai" type="primary" size="mini" @click="exportExcel">设置状态</el-button>
//注意：类名iconfont必须加

  
  
   
   

  
  
   
   

7. Page effect:

You can see that the font style is too large
8. Modify the style:

Look at the modified effect:

you can see the same effect as others;
note: here icon-font treats the icon as a text format, that is, modify the font size and style, and the icon will change accordingly