element-plus中el-button的icon图标不显示

element-plus官网

<el-button type="primary" :icon="Edit" circle></el-button>的新写法不能用，在icon的示例里面方法可以使用。 

<el-button type="primary">
    <el-icon style="vertical-align: middle;">
      <search />
    </el-icon>
    <span style="vertical-align: middle;"> Search </span>
  </el-button>

有两种解决方案：
1. 使用最新版本的element-plus，
写法：

 <el-button type="primary">
    <el-icon style="vertical-align: middle;">
      <search />
    </el-icon>
    <span style="vertical-align: middle;"> Search </span>
  </el-button>

2. 使用旧版本 element-plus@1.1.0-beta.24以及之前的版本（不能太旧，否则与vue3.0有冲突）
 写法：

<el-button type="warning" icon="el-icon-edit" circle></el-button>

参考：https://github.com/element-plus/element-plus/issues/2898

2020-3-25更

最近element-plus更新我又发现了新写法：

main.ts

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css'
import 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/style.css'
import locale from 'element-plus/lib/locale/lang/zh-cn'
import 'dayjs/locale/zh-cn'
import * as echarts from 'echarts'
import * as ElIconModules from '@element-plus/icons-vue'


const app = createApp(App);


// 将自动设置 Day.js 的国际化设置为 'zh-cn'
app.use(ElementPlus, { locale })
app.use(ElementPlus)
app.use(router)
app.use(store)
app.use(VXETable)
app.config.globalProperties.$echarts = echarts

// 注册全局组件
Object.keys(ElIconModules).forEach(key => {
    app.component(key, ElIconModules[key as keyof typeof ElIconModules])
  })


app.mount('#app')

<circle-close-filled style="width:2em; height:2em; margin-right: 8px;color:#F56C6C" />