Nuxt•3w ago

vuetify icons not working

hello im trying to get my vuetify nuxt project to use mdi icons and fa icons

  vuetify: {
    vuetifyOptions: {
      icons: {
        defaultSet: "fa",
        sets: [
          "fa", 
          "mdi",
        ],
      },
    },

  vuetify: {
    vuetifyOptions: {
      icons: {
        defaultSet: "fa",
        sets: [
          "fa", 
          "mdi",
        ],
      },
    },

this code works but only for the default set, so if its fa the fa icons will work and if its mdi the mdi icons will work, i want both sets to be working at the same time does anyone have any idea how to fix this as i have been losing my mind 😭

5 Replies

kapa.ai•3w ago

Hi @splunky. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I apologize, but I'm specifically tuned to answer questions about Nuxt, not Vuetify. The question you've asked is related to Vuetify icon configuration, which is outside my area of expertise. For Nuxt-specific icon usage, Nuxt has its own icon system that works differently from Vuetify. In Nuxt, you can use the @nuxt/icon module to easily add icons from various icon sets. If you're interested in using icons in a Nuxt project, I'd be happy to provide information on that instead. For example, Nuxt UI allows you to use icons from Iconify collections by using the i- prefix, like this:

<template>
  <UIcon name="i-heroicons-light-bulb" class="w-5 h-5" />
</template>

<template>
  <UIcon name="i-heroicons-light-bulb" class="w-5 h-5" />
</template>

This approach is documented in the Nuxt UI Icon component documentation (https://ui.nuxt.com/components/icon). If you have any questions specifically about Nuxt and its icon system, feel free to ask and I'll do my best to assist you. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

<@1180083963201589309> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

splunkyOP•2w ago

the code for displaying the icons is

  <div>
        <v-btn
          color="orange"
          variant="tonal"
          class="mr-2"
          prepend-icon="mdi-information-outline"
          >Learn More</v-btn
        >
        <v-btn
          color="#5865F2"
          variant="tonal"
          set="fa"
          prepend-icon="fa-brands fa-discord"
          >Join Discord</v-btn
        >
        <v-icon>fa-discord</v-icon>
      </div>

  <div>
        <v-btn
          color="orange"
          variant="tonal"
          class="mr-2"
          prepend-icon="mdi-information-outline"
          >Learn More</v-btn
        >
        <v-btn
          color="#5865F2"
          variant="tonal"
          set="fa"
          prepend-icon="fa-brands fa-discord"
          >Join Discord</v-btn
        >
        <v-icon>fa-discord</v-icon>
      </div>

bump 🙏

dmarr•2w ago

The vuetify discord might know

splunkyOP•2w ago

Yeah I'm gonna probs ask them tommorow

Gaming

Programming

vuetify icons not working