Nuxt 3 / Vuetify 3 - How to import Material Icons?

Question

I am trying to setup Material Design Icons, and I have the following config:

nuxt.config.ts

import { defineNuxtConfig } from 'nuxt';
export default defineNuxtConfig({
    modules: ['@nuxtjs/tailwindcss'],
    css: ['vuetify/lib/styles/main.sass', '@mdi/font/css/materialdesignicons.min.css'],
    build: {
        transpile: ['vuetify'],
    },
    vite: {
        define: {
            'process.env.DEBUG': false,
        },
    },
})`
```

But in terminal I am keep getting the same message whatever I try

[Vue Router warn]: No match found for location with path "/materialdesignicons.min.css.map"

I installed @mdi/font package and followed the vuetify3 official docs but no success.

Also, I have installed Nuxt 3 and Vuetify 3, and dev dependencies sass-loader and sass.

Icons are shown, no problems with display in <v-icon> tag but in terminal I keep getting the same error message.

I have been Googling a lot but I can't seem to find the answer.

Any ideas? Thanks

If you want to use Tailwind CSS and need full UI library use Tailwind UI or Daisy UI they are based on Tailwind CSS. And for Icons `nuxt-icon` library. https://stackoverflow.com/questions/72052807/how-to-use-any-icons-with-nuxt3/73810640#73810640 — Mises, Nov 01 '22 at 12:29
Give a try to that one: https://stackoverflow.com/a/72055404/8816585 — kissu, Nov 01 '22 at 13:40

score 2 · Answer 1 · answered Dec 20 '22 at 16:24

You need to tell vuetify to use the material icons as icon pack in your plugins/vuetify.ts. To do so you have to install the mdi font, as you already did, and then set it in the vuetify icons Object in your defineNuxtPlugin.

When done, it should look like this:

import { createVuetify } from 'vuetify'
import {aliases, mdi} from "vuetify/lib/iconsets/mdi";
// make sure to also import the coresponding css
import '@mdi/font/css/materialdesignicons.css' // Ensure you are using css-loader
 // Ensure your project is capable of handling css files
export default defineNuxtPlugin(nuxtApp => {
    const vuetify = createVuetify({ // Replaces new Vuetify(...)
        theme: {
            defaultTheme: 'dark'
        },
        icons: {
            defaultSet: 'mdi',
            aliases,
            sets: {
                mdi
            }
        },
    })

    nuxtApp.vueApp.use(vuetify)
})

You can then simply use it like this:

<v-icon icon="mdi-minus" />

For a more detailed explanation, visit This Article

score 1 · Answer 2 · answered Jan 30 '23 at 09:19

I just import materialdesignicons to plugins/vuetify.ts. It works for me.

first install "@mdi/font" and then use this config:

 // plugins/vuetify.ts
 import { createVuetify } from "vuetify";
 import "@mdi/font/css/materialdesignicons.css";
 export default defineNuxtPlugin((nuxtApp) => {
 const vuetify = createVuetify({
         ssr: true,
         theme: {
             defaultTheme: "light",
         },
     });
     nuxtApp.vueApp.use(vuetify);
 });

Nuxt 3 / Vuetify 3 - How to import Material Icons?

2 Answers2