Vue3+ElementPlus项目中遇到的图标按钮icon无法显示的问题

前言

这两天在做一个学校的项目，遇到了这个问题，顺便记录下。

问题

我的需求是想在地点后面加一个edit的按钮，管理员点击之后可以修改猫猫最近出现的地点。我的代码如下：

<el-row>
    <span>地点：{{ cat.location }}</span>
     <el-button
        class="editBtn"
        size="small"
        type="primary"
        :icon="Edit"
        circle
      />
</el-row>

我信心满满的运行，却出现了如下效果：

确认了很多遍是按照官方配置来的，但是不知道为什么无法显示成功， 搜索了很多资料之后，有了一个解决方案。

解决方案

自己封装一个图标按钮组件

<el-row>
     <span>地点：{{ cat.location }}</span>
     <el-button type="primary" plain circle size="small" style="color: #000; font-size: 22px;">
       <el-icon>
         <Edit />
       </el-icon>
     </el-button>
</el-row>

发现文字和按钮还是不垂直居中，去掉el-row成功垂直居中，效果如下：

即可解决问题