Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

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>
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 */
                This actually made me score worse on lighthouse.. :/ i am trying a way to be better, cause vuetify is just BAD!
– Daniel Vilela
                Feb 21, 2021 at 23:54
                How would this be done using the 'md' package instead, e.g the custom repo which vuetify docs talk about: github.com/jossef/material-design-icons-iconfont Been trying different solutions but can't seem to get it right
– Thorvald
                Jun 2, 2021 at 15:47
The solution provided by SMAKSS worked, but i had to configure defaultAssets: false in vuetify module configuration to avoid download from CDNs.
https://github.com/nuxt-community/vuetify-module#defaultassets
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.