Nuxt 3 with Vuetify Icons

Question

I am trying to get Vuetify 3 to work with Nuxt 3.

I have a plugin for Vuetify:

// plugins/vuetify.ts
import { defineNuxtPlugin } from '#app'
import { createVuetify } from 'vuetify'
import {
    VApp,
    VAppBar,
    VAppBarNavIcon,
    VAppBarTitle,
    VBtn,
    VIcon
} from 'vuetify/components'

// Import everything
// import * as components from 'vuetify/components'

export default defineNuxtPlugin((nuxtApp) => {
    const vuetify = createVuetify({
        components: {
            VApp,
            VAppBar,
            VAppBarNavIcon,
            VAppBarTitle,
            VBtn,
            VIcon
        },
        theme: {
            defaultTheme: 'myCustomTheme',
            themes: {
                myCustomTheme: {
                    dark: false,
                    variables: {}, // ✅ this property is required to avoid Vuetify crash

                    colors: {
                        // Workaround: Custom colors seem to erase default colors, so we need to include the default colors (of `light` or `dark` theme)
                        background: '#fff',
                        surface: '#fff',
                        primary: '#38b6ff',
                        'primary-darken-1': '#3700B3',
                        secondary: '#03DAC5',
                        'secondary-darken-1': '#03DAC5',
                        error: '#CF6679',
                        info: '#2196F3',
                        success: '#4CAF50',
                        warning: '#FB8C00',
                    },
                }
            }
        }
    })
    nuxtApp.vueApp.use(vuetify)
})

And my nuxt.config.ts looks like:

import { defineNuxtConfig } from 'nuxt3'

// https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
export default defineNuxtConfig({
    css: [
        'vuetify/lib/styles/main.sass',
        '@/assets/scss/main.scss',
    ],
    build: {
        transpile: ['vuetify']
    },
    vite: {
        define: {
            'process.env.DEBUG': 'false',
        }
    },
})

The css portion of the nuxt.config.ts imports the styles from vuetify, however icons are not working as expected. I have tried to use VIcon along with VAppBarNavIcon, both of which don't show the icon.

I have tried to manually download material-design-icons-iconfont from yarn and then add material-design-icons-iconfont/dist/material-design-icons.css to my css, but that did not work. Has anyone found a way to make this work? I want to use the regular mdi icons.

Thanks

Answer 1

Install the Material Design icons

$ yarn add @mdi/js -D
// OR
$ npm install @mdi/js -D

Add this to your plugins/vuetify.ts:

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

export default createVuetify({
  icons: {
    defaultSet: 'mdi',
    aliases,
    sets: {
      mdi
    }
  }
})

And now since we only want to import the icons we are using use it like this:

<template>
  <v-icon :icon="mdiAccount" />
</template>

<script>
  import { mdiAccount } from '@mdi/js'

  export default {
    data: () => ({
      mdiAccount
    })
  }
</script>