Integrations

Vuetify supports custom icon sets using Vue icon libraries. This section explains how to integrate the following icon libraries with vuetify-nuxt-module:

• unplugin-icons/nuxt
• Iconify for Vue: if you are using SSR, please check this comment from the Iconify author (cyberalien)
• Iconify Icon web component
• Nuxt Icon
• Vue Phosphor Icons

Please refer to the Vuetify documentation for more information about custom icon sets. All examples on this page use a custom icon set implementation.

Once the custom icon set is implemented, you will need to configure vuetify-nuxt-module to use it:

• add icons.defaultSet = 'custom' in your vuetify.config.ts file or in the vuetifyOptions object in your nuxt.config.ts file
• register the custom icon set in the Vuetify options via a new Nuxt plugin using the vuetify:before-create hook
• register the custom icon component in the Vue application via previous Nuxt plugin using vuetify:ready hook: this step is optional, only required if you want to use the custom icon component in your application

If you wish to use another icon set library, you should adjust the corresponding icon set implementation in the examples below, which currently show unplugin-icons, Iconify Vue, and Nuxt Icon using Material Design Icons from Iconify.

You can also use multiple icon sets; please check multiple-icon-sets and the Vuetify documentation.

unplugin-icons/nuxt

You can check this repository using material design icons, which uses the unplugin-icons/nuxt Nuxt module:

• default icon set in nuxt.config.ts configuration file
• custom icon set in unplugin-icons/index.ts icon set
• custom icon set registration in plugins/custom-icons.ts plugin

You can run this repo in StackBlitz; please check the README file.

WARNING

Please note that not all icons have been included. You will need to review the unplugin-icons/index.ts file and include the icons you wish to use.

Iconify for Vue

You can check this repository using material design icons:

• default icon set in vuetify.config.ts configuration file
• custom icon set in iconify/index.ts icon set
• custom icon set registration in plugins/custom-icons.ts plugin
• custom icon component registration in plugins/custom-icons.ts plugin

You can run this repo in Stackblitz, check the README file.

WARNING

Not all icons have been included, you will need to review the iconify/index.ts file including the icons you want to use.

Iconify for Vue is client side only, the icons will be rendered only on the client (you will see the icons loaded once the component requests them to the Iconify API). If you're using SSR in your Nuxt application, you maybe have hydration mismatch warnings.

Iconify Icon Web Component

You can check this repository using material design icons:

• default icon set in vuetify.config.ts configuration file
• custom Vue web component registration in nuxt.config.ts configuration file, check vue option
• custom icon set in iconify/index.ts icon set
• custom icon set registration in plugins/custom-icons.ts plugin
• custom icon component registration in plugins/custom-icons.ts plugin (import 'iconify-icon')

You can run this repo in Stackblitz, check the README file.

WARNING

Not all icons have been included, you will need to review the iconify/index.ts file including the icons you want to use.

Iconify Icon Web Component is client side only, the icons will be rendered in the ShadowDOM (you will see the icons loaded once the component requests them to the Iconify API).

Nuxt Icon

You can check this repository using material design icons:

• default icon set in nuxt.config.ts configuration file
• custom icon set in nuxt-icon-set/common.ts icon set
• custom icon set registration in plugins/custom-icons.ts plugin
• you can choose between Icon or IconCSS, check previous plugin file

You can run this repo in Stackblitz, check the README file.

Vue Phosphor Icons

You can check this repository:

• default icon set in vuetify.config.ts configuration file
• custom icon set in phosphor/index.ts icon set
• custom icon set registration in plugins/custom-icons.ts plugin
• custom icon component registration in plugins/custom-icons.ts plugin

You can run this repo in Stackblitz, check the README file.

WARNING

Not all icons have been included, you will need to review the phosphor/index.ts file including the icons you want to use.