实现思路
element-plus 中的图标都是单个的组件，需要配合 el-icon 组件一起使用。但这两类组件都没有自带的圆形背景，因此引入 el-tag 组件作为 el-icon 组件的容器。el-tag 自带 round 属性，可以将四个角变为圆角，但仅仅这样还不够，还有一些细节需要完善：
- el-tag 有默认的左右侧内边距 9px
- el-icon 有默认的右侧外边距 5px
- 插入图标后， tag 组件不是圆形,
按顺序解决以上的问题
- 将 el-tag 的左右侧内边距设为 4px（这一步将标签组件整体的宽高统一了，查看元素就能知道宽与高的差是 10px）；有需要的话，可以设置 5px 的右侧外边距（代替
el-icon的外边距） - 将 el-icon的右侧内边距设为 0
如果想要简单点，也可以使用 el-button 实现。若是作为其他组件如菜单的一部分，则最好覆盖 el-button 自带的 :hover 样式，改成菜单项整体 :hover 时才触发样式变更。
代码示例
<el-menu>
<el-menu-item>
<el-tag round>
<el-icon><View /></el-icon>
</el-tag>
View Detail
</el-menu-item>
<el-menu-item>
<el-tag type="success" round effect="dark">
<el-icon><Edit /></el-icon>
</el-tag>
Edit
</el-menu-item>
<el-menu-item>
<el-tag type="danger" round effect="dark">
<el-icon><Delete /></el-icon>
</el-tag>
delete
</el-menu-item>
</el-menu>
效果展示
