[Question] Custom Icons + MDI Icons

[skoenfaelt]

Hey,
I checked this docs section,

https://nuxt.vuetifyjs.com/guide/icons/integrations.html#nuxt-icon
https://github.com/userquin/vuetify-nuxt-icon-integration/tree/main

The integration of own custom icons seems very simple.

In my project i use aliases for MDI like this:

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

For the most cases I have enough icons to bring the just right UX. In some edge cases I need a specific Icon. We made some svg Icons, which i want to use alongside with the MDI icons and if possible also with aliases.

But how to implement this? And can I really use MDI Icons and those custom Icons at the same time?

[kingyue737]

You could integrate with Nuxt Icon to use any icon presets or custom icons. Share my config as an example here:

1. Config Nuxt Icon to bundle all icons existing in your source code and the icons used by Vuetify components. And then add your local custom svg icon collections:

https://github.com/kingyue737/vitify-nuxt/blob/02d86b8b64356dba4dd23586cbb4666bd3478849/nuxt.config.ts#L31-L46

2. Config Vuetify to use NuxtIcon to render <VIcon>:

https://github.com/kingyue737/vitify-nuxt/blob/02d86b8b64356dba4dd23586cbb4666bd3478849/plugins/vuetify.ts#L7-L17

3. Then you can add 200,000+ ready to use icons to your Nuxt application, for example:

<template>
<v-icon icon="mdi:account" />
<!-- or -->
<v-icon icon="mdi-account" />

<!-- use an icon from a preset other than mdi -->
<v-icon icon="ph:user-duotone" />
<!--or-->
<v-icon icon="ph-user-duotone" />

<!-- use a custom icon -->
<v-icon icon="custom:my-icon" />
</template>

[skoenfaelt]

Thanks!