如何在Element-plus的el-menu使用动态图标

如何在Element-plus的el-menu使用动态图标

在项目中用到了Element-plus的Menu 菜单组件，官网中给菜单添加图标的代码是这样的：

<el-sub-menu index="1">
  <template #title>
    <el-icon><location />el-icon>
     <spa>Navigator Onespan>
  template>
el-sub-menu>

效果值这样的：

img

但是我在使用时，由于菜单信息是后端返回的，而且每个图标都不一样，所以就不能写死icon标签，后端返回的菜单信息:
[
  {
    name: '菜单一',
    icon: 'Location'
  },
  {}.....
]
试着使用v-html，但是没有效果
<el-sub-menu index="1">
  <template #title>
    <el-icon v-html="menu.icon">el-icon>
     <span>{{menu.name}}span>
  template>
el-sub-menu>

<script>
  data() {
    return {
        memu: {
            name: '菜单一',
            icon: ''
         }
    }
  }
script>
有知道怎么解决的小伙伴吗
<el-icon v-html="menu.icon"></el-icon>

写法改下，试试这样

<el-icon>
  <component :is="menu.icon" />
</el-icon>
<script>
  data() {
    return {
        memu: {
            name: '菜单一',
            icon: 'location'
         }
    }
  }
</script>