[TOC] ### 按钮显示图标 https://element.eleme.cn/#/zh-CN/component/button 官网这个图标按钮我这样放进去不行，显示不出来，有可能是版本问题 我这里需要这么使用,增加一个icon的绑定： ``` <el-button type="success" :icon="Plus" size="default">添加培训项目</el-button> ``` 还需要给对应的图标按需引入才行： ``` import { Search, Plus, Edit，Check,Download } from '@element-plus/icons-vue' ``` 引入的规则其实就是官网图标最后那个名称的大写而已  #### 这样直接显示也可以 ``` <div style="display: flex"> <el-button size="default" @click="getTableData" type="primary"> <el-icon> <ele-Search /> </el-icon> 查询 </el-button> <el-button size="default" type="success" @click="openChoiseFile"> <el-icon> <ele-FolderAdd /> </el-icon> 导入 </el-button> <el-button size="default" type="success" @click="openTemplateDialogVisible"> <el-icon> <ele-Download /> </el-icon> 模板下载 </el-button> </div> ``` 按照官网那样写不行，有可能是没有做全局引入，所以需要按需引入。 ### 直接显示图标 直接显示图标一般也是要先引入： ``` import { ArrowDownBold } from '@element-plus/icons-vue' ``` 然后使用： ``` <el-icon><ArrowDownBold /></el-icon> ``` #### 修改图标大小 直接在el-icon里边设置一个size属性就可以了 ``` <el-icon size="16"><ArrowDownBold class="tlb-wrap-icon" /></el-icon> ```