Font Icons

This module supports the following font icons libraries:

• Material Design Icons
• Material Icons
• Font Awesome 4
• Font Awesome 5

By default, the module will use the mdi font icon library. You can change it by setting the defaultSet option to:

• mdi for Material Design Icons
• md for Material Icons
• fa4 for Font Awesome 4
• fa for Font Awesome 5

To configure a font icon, you only need to specify the default set:

// Nuxt config file
import { defineNuxtConfig } from 'nuxt/config'

export default defineNuxtConfig({
  modules: ['vuetify-nuxt-module'],
  vuetify: {
    vuetifyOptions: {
      icons: {
        defaultSet: 'mdi'
      }
    }
  }
})

The module will use the CDN version of the font icon. If you want to use the local version, you only need to install the corresponding dependency, the module will auto-detect it and will switch to register the font to use the local version.

The CDN used for each font icon library, you can use the cdn option to change it:

• CDN for Material Design Icons (mdi)
• CDN for Material Icons (md)
• CDN for Font Awesome 4 (fa4)
• CDN for Font Awesome 5 (fa)

To change the CDN for a font icon library, you only need to specify the cdn option:

// Nuxt config file
import { defineNuxtConfig } from 'nuxt/config'

export default defineNuxtConfig({
  modules: ['vuetify-nuxt-module'],
  vuetify: {
    vuetifyOptions: {
      icons: {
        defaultSet: 'mdi',
        sets: [{
          name: 'mdi',
          cdn: 'https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css'
        }]
      }
    }
  }
})