Icon not showing in nuxt, instead the name is appearing 'warning'

[renathoaz]

Here is my config in nuxt..config.js

  modules: [
    "@nuxtjs/axios",
    "@nuxtjs/auth",
    "@nuxtjs/apollo",
    "vuetify-dialog/nuxt",
  ],

and calling like this:

    const result =  await this.$dialog.warning({
        title: 'Você tem certeza ?',
        text: "Essa ação não poderá ser revertida",
      })

here is the result:

How can I solve it using nuxt ?

[renathoaz]

for notify icon appears:

          this.$dialog.notify.info(`Empresa ${item.nome_fantasia} removida.`, {
            position: 'top-right',
            timeout: 3000
          })

[yariksav]

Something wrong with your vuetify icons. What icon font do you use? Can you try in y our code

<v-icon>warning</v-icon>

If you use different icon font, just setup it correctly, in this.$vuetify.icons.warning must be correct icon name

[renathoaz]

My veutify config on nuxt: / vuetify module configuration https://github.com/nuxt-community/vuetify-module /

  vuetify: {
    customVariables: ["~/assets/variables.scss"],
    theme: {
      dark: true,
      themes: {
        dark: {
          primary: colors.blue.darken2,
          accent: colors.grey.darken3,
          secondary: colors.amber.darken3,
          info: colors.blue.darken2,
          warning: colors.amber.darken4,
          error: colors.red.darken2,
          success: colors.green.darken1
        },
        light: {
          primary: colors.blue.lighten2,
          accent: colors.grey.lighten3,
          secondary: colors.amber.lighten3,
          info: colors.teal.lighten1,
          warning: colors.amber.base,
          error: colors.deepOrange.accent4,
          success: colors.green.accent3
        }
      }
    }
  },

Veutify is using mdi icons. How can I pass the correct icons set to veutify-dialog ?

After configuring it like this, it worked:

  vuetifyDialog: {
    property: '$dialog',
    error: { icon: 'mdi-alert', color: '#ff5252'},
    warning: {icon: 'mdi-exclamation', color: '#fb8c00'},
    confirm: {icon: 'mdi-check-circle', color: '#2a3b4d'},
    // ...
  },

is it the right way?

[yariksav]

Yes, it right way, but you can just setup globally icons in vuetify as described in https://vuetifyjs.com/en/customization/icons/#reusable-custom-icons

export default new Vuetify({
  icons: {
    iconfont: 'mdi', // default
    values: {
      warning: 'mdi-exclamation'
    }

in nuxt it setup in nuxt.config.js

The reason was in not correct setup iconfont in vuetify. Please read docs

[renathoaz]

@yariksav Sorry for re-opening it but there's a problem with getIcon () function on confirmation.vue

on line 67: return this.icon || (this.$vuetify && this.$vuetify.icons && this.$vuetify.icons[this.type]) || this.type

this.$vuetify.icons[this.type] should bethis.$vuetify.icons.values[this.type]

if not it will work only with md correctly, 'cause thethis.$vuetify.icons[this.type] is undefined and the return will always be this.type if icon is not set.

[yariksav]

Hi, @renathoaz, thank you, I suppose you are right. I will check and fix it soon) (Vuetify always makes breaking changes, before icons was in this.$vuetify.icons property)

[yariksav]

fixed in 2.0.12