How to import custom svg icons in vuetify 3? - vue.js

Question

How to import custom svg icons in vuetify3 and nuxt3?
In vuetify 2, we were able to directly import svg icons like this
import customIcon from './myIcon.vue'
Vue.use(Vuetify)
export default new Vuetify({
icons: {
iconfont: 'mdi',
values: {
myIcon: {component: customIcon}
},
},
})
---------------
// Used like this in vue file
<v-icon>$myIcon</v-icon>
From veutfiy 3 documentation, I am confused about importing custom svg icons as it is using sets instead of values.
https://next.vuetifyjs.com/en/features/icon-fonts/
// plugins/vuetify.js
import { createVuetify } from "vuetify";
import * as components from "vuetify/components";
import * as directives from "vuetify/directives";
import { aliases, mdi } from "vuetify/iconsets/mdi";
export default defineNuxtPlugin((nuxtApp) => {
const vuetify = createVuetify({
components,
directives,
icons: {
defaultSet: "mdi",
aliases,
sets: {
mdi,
},
},
});
nuxtApp.vueApp.use(vuetify);
});

Answer 1

Found a way to use both mdi and custom svg icons
Icon file
//tickicon.vue
<template>
<svg>... icon here</svg>
<template>
//customSvgs.ts
import { h } from "vue";
import type { IconSet, IconProps } from "vuetify";
import tickIcon from "./customSVGs/tickicon.vue";
import closeIcon from "./customSVGs/close-icon.vue";
const customSvgNameToComponent: any = {
tickIcon,
closeIcon,
};
const customSVGs: IconSet = {
component: (props: IconProps) => h(customSvgNameToComponent[props.icon]),
};
export { customSVGs /* aliases */ };
And my vuetify plugin file
// plugins/vuetify.ts
import { createVuetify } from "vuetify";
import { mdi } from "vuetify/iconsets/mdi";
import { customSVGs } from "~~/assets/customSVGs";
import * as components from "vuetify/components";
import * as directives from "vuetify/directives";
export default defineNuxtPlugin((nuxtApp) => {
const vuetify = createVuetify({
components,
directives,
icons: {
defaultSet: "mdi",
sets: {
mdi,
custom: customSVGs,
},
},
});
nuxtApp.vueApp.use(vuetify);
});
Using like that in vue file
<v-icon icon="custom:tickIcon"/> //Custom SVG Icon
<v-icon icon="mdi-arrow-up"/> //default mdi icon

Answer 2

Setup is same as my project, Did you include the actual icons at the top of vuetify.js?
import '#mdi/font/css/materialdesignicons.css'
Is the only thing I see missing from what you posted.