SVG Icons

This module supports the following SVG icon libraries:

• @mdi/js
• @fortawesome/fontawesome-svg-core

You can also use the following packages SVG icons libraries:

• Nuxt Icon
• unplugin-icons

Material Design Icons

Add the @mdi/js dependency to your project and configure the default set:

nuxt.config.ts

import { defineNuxtConfig } from 'nuxt/config'

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

You can also add icon aliases:

nuxt.config.ts

import { defineNuxtConfig } from 'nuxt/config'

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

Font Awesome

Add the @fortawesome/fontawesome-svg-core, @fortawesome/vue-fontawesome, and @fortawesome/free-solid-svg-icons dependencies to your project and configure the default set:

nuxt.config.ts

import { defineNuxtConfig } from 'nuxt/config'

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

You can also add more libraries and install them in your project; the module will register them automatically (this is the default behavior with the above configuration):

nuxt.config.ts

import { defineNuxtConfig } from 'nuxt/config'

export default defineNuxtConfig({
  modules: ['vuetify-nuxt-module'],
  vuetify: {
    vuetifyOptions: {
      icons: {
        defaultSet: 'fa-svg',
        svg: {
          fa: {
            libraries: [
              [/* default export? */false, /* export name */ 'fas', /* library */ '@fortawesome/free-solid-svg-icons']
            ]
          }
        }
      }
    }
  }
})

Font Awesome PRO

To register Font Awesome Icons PRO you need to add @fortawesome/pro-solid-svg-icons dependency to your project, configure the default set and add the library to the list of libraries:

nuxt.config.ts

import { defineNuxtConfig } from 'nuxt/config'

export default defineNuxtConfig({
  modules: ['vuetify-nuxt-module'],
  vuetify: {
    vuetifyOptions: {
      icons: {
        defaultSet: 'fa-svg',
        svg: {
          fa: {
            libraries: [
              [/* default export? */false, /* export name */ 'fad', /* library */ '@fortawesome/pro-duotone-svg-icons']
            ]
          }
        }
      }
    }
  }
})

then you can use the icons in your components:

<v-icon>fa-duotone fa-server</v-icon>

If you want to animate the icon, add the animation to the v-icon class:

<v-icon class="fa-bounce">fa-duotone fa-server</v-icon>