Vuetify-module: Custom Component icons does't work

[KostovV]

Module version
@nuxtjs/vuetify - 1.8.3
nuxt 2.9.2

Describe the bug
Importing of custom created component icons is impossible.
https://vuetifyjs.com/en/customization/icons#component-icons

To Reproduce
https://codesandbox.io/s/nuxtjs-vuetify-z42mm

Steps to reproduce the behavior:

1. On index.vue, there are few icons.
   
   Custom created icon Is not shown. No errors, no warnings.

Expected behavior
I am expecting to have access to custom icon with $vuetify.icons.values.ionic but this component was not created in $vuetify.icons object.

Also, it is not possible to change vuetify font from vuetify.options.js like this:

icons: {
  iconfont: 'fa4',
  values: {
    customIcon: customIconComponent
  }
}

Maybe they are related...

[oanstein]

I don't think you can import a component directly in nuxt.config. Instead use a plugin: https://vuetifyjs.com/en/customization/icons#custom-font-awesome-pro-icons

// WRONG
import colors from "vuetify/es5/util/colors";
import IonicIcon from "~/components/IonicIcon";

export default {
  /*
   ** Rendering mode
   ** Doc: https://nuxtjs.org/api/configuration-mode
   */
  mode: "universal",

// OTHER CODE --------

  /*
   ** Nuxt.js modules
   ** Doc: https://nuxtjs.org/guide/modules
   */
  modules: [
    "@nuxtjs/vuetify",
    // TODO: Remove it if you want to eject from codeSandbox
    "./codesandbox"
  ],

  // Doc: https://github.com/nuxt-community/vuetify-module
  vuetify: {
    customVariables: ["~/assets/variables.scss"],
    theme: {
      dark: true,
      themes: {
        dark: {
          primary: colors.red,
          test: colors.blue
        }
      }
    },
    icons: {
      values: {
        ionic: {
          component: IonicIcon // fails with "Cannot find module '@/components/IonicIcon'"; use plugin instead
        }
      }
    }
  }
};

[kevinmarrec]

Hi @KostovV , your configuration is okay, it's the way you're displaying the icon that isn't right :

<v-icon v-text="$vuetify.icons.values.ionic"></v-icon>

Seems it should be

<v-icon>$vuetify.icons.ionic</v-icon>

to work with custom icon components :)

Fix : https://codesandbox.io/s/nuxtjs-vuetify-custom-icons-f9qwz