How can I use the element plus custom menu icon?

Question

I am working on nuxt 3 with element plus UI. I want to use the custom menu icon on element plus menu item <el-menu-item>

I have tried to import tried to import svg icon from asset folder but it didn't work

Currently

<el-menu-item index="/"><el-icon><Setting /></el-icon>Setting</el-menu-item>

What I want

<el-menu-item index="/"><el-icon><MySettingIcon /></el-icon>Setting</el-menu-item>

Answer 1

Try sth like this:

<el-menu-item class="test" index="1">
      <template #title>
        <el-icon
          :size="iconSize"
          color="#77B4F2"
          ><MySettingIcon/>
        </el-icon>
      </template>
</el-menu-item>

by importing your component:

components: {
    MySettingIcon
}

Or you can use svg icon directly:

<el-menu-item class="test" index="1">
      <template #title>
        <el-icon
          :size="iconSize"
          color="#77B4F2"
          >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="16"
            height="16"
            fill="currentColor"
            class="bi bi-lightning-fill"
            viewBox="0 0 16 16"
          >
            <path
              d="M5.52.359A.5.5 0 0 1 6 0h4a.5.5 0 0 1 
              .474.658L8.694 6H12.5a.5.5 0 0 1 .395.807l-7 
               9a.5.5 0 0 1-.873-.454L6.823 9.5H3.5a.5.5 0 0 
               1-.48-.641l2.5-8.5z"
            /></svg>
        </el-icon>
      </template>
</el-menu-item>

EDIT

Here is sample MySettingIcon.vue component:

<template>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="16"
        height="16"
        fill="currentColor"
        class="bi bi-emoji-frown"
        viewBox="0 0 16 16"
      >
        <path
          d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"
        />
        <path
          d="M4.285 12.433a.5.5 0 0 0 .683-.183A3.498 3.498 0 0 1 8 10.5c1.295 0 2.426.703 3.032 1.75a.5.5 0 0 0 .866-.5A4.498 4.498 0 0 0 8 9.5a4.5 4.5 0 0 0-3.898 2.25.5.5 0 0 0 .183.683zM7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5zm4 0c0 .828-.448 1.5-1 1.5s-1-.672-1-1.5S9.448 5 10 5s1 .672 1 1.5z"
        />
      </svg>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "my-setting-icon",
  data() {
    return {}
  },
});
</script>

<style scoped>
.bi-emoji-frown:hover {
  background-color: lightcoral;
  border-radius: 8px;
}
</style>

You can put this into src/icons folder.