Vuetify 3: Using Svg for v icon

Question

I want to use my custom svg as v icon but I didn't find any solution in the Vuetify v3 documentation.

In vuetify v2 I can do something like this in vuetify.js:

export default new Vuetify({
  icons:{
    values: {
      test: {
        component: Test,
      },

I can use it like this:

<v-icon size="40">$vuetify.icons.test</v-icon>

How do I do the same thing in Vuetify v3? Thanks for your help :)

Answer 1

The code below shows an example of adding a custom icon to Vuetify along with the mdi icon set and using both icons in a component via aliases.

vuetify.js

import { createVuetify } from 'vuetify'

import { aliases, mdi } from 'vuetify/iconsets/mdi-svg'

import folder from '@/customIcons/folderIcon.vue'
const aliasesCustom = {
  ...aliases,
  folder,
}

export const vuetify = createVuetify({
  icons: {
      defaultSet: 'mdi',
      aliases: {
        ...aliasesCustom
      },
      sets: {
        mdi,
      },
    },
})

folderIcon.vue (your custom icon)

<template>
 <svg>...</svg>
</template>

Any Securities Regulatory Commission

<template>
  <v-icon>$folder</v-icon>
  <v-icon>$mdiGithub</v-icon>
</template>

Original source: Thread in Vuetify Discord channel