Search code examples
cssvuetify.jsvuetifyjs3

Why does the vuetify prepend slot modify icon colours?

I am making a simple navigation drawer with Vuetify 3. Whenever I use the prepend slot for icons it seems as if the colour is slightly modified or that the transparency of the icons is changed:

   <v-list
      :lines="false"
      nav
    >
      <v-list-item
        v-for="item in menu"
        :key="item.title"
        :value="item"
        color="primary"
      >
        <template #prepend>
          <v-icon :icon="item.icon" :color="item.color" />
        </template>

        <v-icon :icon="item.icon" :color="item.color" />

        <v-list-item-title class=" py-1 navigation-headers" v-text="item.title" />
      </v-list-item>
    </v-list>

When simply using the icon without using the prepend-slot the colours are correct/as I prefer them (see attached image).

I checked the applied classes on both Icons and they are similair.

How can I use the prepend slot and let the icons have their original colour/transparency?

transparency of icons

Solution

  • The opacity of the default icon is set by the following CSS rule:

    .v-list-item__prepend > .v-badge .v-icon,
.v-list-item__prepend > .v-icon,
.v-list-item__append > .v-badge .v-icon,
.v-list-item__append > .v-icon {
  opacity: var(--v-medium-emphasis-opacity);
}
    1. Ensure your v-icon is a direct child of an element with the class .v-list-item__prepend
    2. Ensure your v-icon has the class .v-icon