Vuetify v-for change v-icon color

Question

I have a footer that contains buttons that i iterate to change the icon at each button, i do the same thing for the color but now have a problem, Html:

<v-btn
          v-for="icon in icons"
          :key="icon.id"
          class="mx-4 "
          icon
        >
          <v-icon :color="icon.color" size="24px">
            {{ icon.icon }}
          </v-icon>
        </v-btn>

Script:

data: () => ({
  icons: [
    {
      id: 1,
      icon: 'mdi-facebook',
      color: '#4267B2'
    },
    {
      id: 2,
      icon: 'mdi-twitter',
      color: '#26c6da'
    },
    {
      id: 3,
      icon: 'mdi-linkedin',
      color: '#2867B2'
    },
    {
      id: 4,
      icon: 'mdi-instagram',
      color: '#e4405f'
    },
  ],
}),

How can i make the instagram color gradient? Do i have to twist all the code?

Answer 1

You can't use the Vuetify color prop for gradients.

You need to download the SVG from https://materialdesignicons.com/ .

Next, you need to modify the SVG to have the desired gradient.

Lastly, inline the SVG in your component and when icon === 'mdi-instagram' , you display the inline SVG.

Answer 2

You could use CSS to style the icon's background, using the .mdi-instagram selector:

<template>
  <v-icon>mdi-instagram</v-icon>
</template>

<style>
/* https://stackoverflow.com/a/44940095/6277151 */
.mdi-instagram {
  background: radial-gradient(
    circle at 30% 107%,
    #fdf497 0%,
    #fdf497 5%,
    #fd5949 45%,
    #d6249f 60%,
    #285aeb 90%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
</style>

Result:

demo