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 uses the mdi font icon library. You can change this 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, specify the default set:

nuxt.config.ts

import { defineNuxtConfig } from 'nuxt/config'

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

The module uses the CDN version of the font icon by default. If you prefer to use the local version, install the corresponding dependency; the module will automatically detect it and switch to registering the font using the local version.

You can use the cdn option to change the CDN used for each font icon library:

• 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, specify the cdn option:

nuxt.config.ts

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'
        }]
      }
    }
  }
})