第一步

首选你已经安装好的element plus，组件已经可以正常使用了，没有安装的看我之前的安装教程

第二步

按照官网的方法下载 图标库

# 选择一个你喜欢的包管理器

# NPM
$ npm install @element-plus/icons-vue
# Yarn
$ yarn add @element-plus/icons-vue
# pnpm
$ pnpm install @element-plus/icons-vue

第三步

注册组件

// main.ts

// 如果您正在使用CDN引入，请删除下面一行。
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

第四步

使用 component 组件 绑定 is 动态绑定图标
直接使用

<el-menu-item index="2">
  <el-icon>
    <component :is="menuIconList.icon"></component>
  </el-icon>
<span>Navigator Two</span>
</el-menu-item>
......
<script setup>
import { ref , reactive} from 'vue'
const menuIconList = reactive(
  {
    name: '图标1',
    icon: "location"
  }
)
</script>

这样的图标名字就是，图标组件的名字