How to import the mdi icons module inside nuxt.config.js in Nuxt

user_4275509 0
Viewed 5705

I have installed the https://materialdesignicons.com/ with

npm install @mdi/font

In nuxt.config.js file, I am not sure how to import the icons module... Please help!

export default {
    build: {
      /*
       ** You can extend webpack config here
       */

      extend(config, ctx) {}
    },
    buildModules: [
      // Simple usage
      '@nuxtjs/vuetify',
  
      // With options
    //  ['@nuxtjs/vuetify', { /* module options */ }]
    ]
}

Here is an example of a Vuetify tab using a MDI icon.

<v-icon large color="blue darken-2">mdi-message-text</v-icon>
nuxt.js vuetify.js
2 Answers

You can do it by adding @mdi/font/css/materialdesignicons.min.css into your nuxt.config.js like this:

export default {
    css : [
       '@mdi/font/css/materialdesignicons.min.css'
    ],
    build: {
      /*
       ** You can extend webpack config here
       */

      extend(config, ctx) {}
    }
    /* Rest of configs */
}

And if you use Vuetify (I see you used it) Then add iconfont: 'mdi' in Vuetify module configuration, like this:

export default {
    css : [
       '@mdi/font/css/materialdesignicons.min.css'
    ],
    buildModules: [
      '@nuxtjs/vuetify',
      ['@nuxtjs/vuetify', { iconfont: 'mdi' }]
    ]
    /* Rest of configs */
}
user_119085020
user_150512420
Related