SVG Icons
This module supports the following SVG icon libraries:
You can also use the following packages SVG icons libraries:
Material Design Icons
You only need to add @mdi/js dependency to your project and configure the default set:
// Nuxt config file
import { defineNuxtConfig } from 'nuxt/config'
export default defineNuxtConfig({
modules: ['vuetify-nuxt-module'],
vuetify: {
vuetifyOptions: {
icons: {
defaultSet: 'mdi-svg'
}
}
}
})// Nuxt config file
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 file
import { defineNuxtConfig } from 'nuxt/config'
export default defineNuxtConfig({
modules: ['vuetify-nuxt-module'],
vuetify: {
vuetifyOptions: {
icons: {
defaultSet: 'mdi-svg',
svg: {
mdi: {
aliases: {
account: 'mdiAccount'
}
}
}
}
}
}
})// Nuxt config file
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
You only need to add @fortawesome/fontawesome-svg-core, @fortawesome/vue-fontawesome and @fortawesome/free-solid-svg-icons dependencies to your project and configure the default set:
// Nuxt config file
import { defineNuxtConfig } from 'nuxt/config'
export default defineNuxtConfig({
modules: ['vuetify-nuxt-module'],
vuetify: {
vuetifyOptions: {
icons: {
defaultSet: 'fa-svg'
}
}
}
})// Nuxt config file
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 for you (this is the default configuration using the above configuration):
// Nuxt config file
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']
]
}
}
}
}
}
})// Nuxt config file
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 file
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']
]
}
}
}
}
}
})// Nuxt config file
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><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><v-icon class="fa-bounce">fa-duotone fa-server</v-icon>