How to add icon before menu entries

[crystalfp]

I want to put an Icon before each entry in a context menu using v-contextmenu. For items the solution is simple using the "@yeliulee/vue-mdi-svg/v3" and "@mdi/js" packages.

    <v-contextmenu-item @click.prevent="openMdataDialog">
        <MdiSvg class="menu-icon" :path="mdiTextBoxOutline"/>Show mdata
    </v-contextmenu-item>

But v-contextmenu-submenu has no similar way to put an icon in front of the title.

Thanks for helping! mario

[crystalfp]

If could be of interest to someone, I have found a dirty and not general workaround. In the menu I put the icon just before the submenu title:

    <MdiSvg class="submenu-icon" :path="mdiTextBoxOutline"/>
    <v-contextmenu-submenu title="Export">

Then added the following styles to move the icon in front of the submenu title:

.v-contextmenu-submenu {
    margin-top: -16px;
    margin-left: 24px;
    padding-left: 0;
}
.submenu-icon {
  transform: translate(11px, 10px) scale(0.6);
  margin: -4px -4px 0 -8px;
  height: 4px;
}

.v-contextmenu-submenu__title {
    padding-left: 0; // To avoid hover highlight in front of the icon
}

Hope it helps mario