How can I use the element plus custom menu icon? - icons

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.