Dynamic v-icon in vuetify template

Question

I'm currently trying to render dynamic v-icon components in my vuetify template. I have a list of item for which I want to set a specific icon per item.

So my list is :

  <v-list-item
    v-for="application in installedApplications"
    :key="application.id"
    :to="{ name: application.verboseName + 'Dashboard' }"
    link>
    <v-list-item-icon>
      <v-tooltip right>
        <template v-slot:activator="{ on }">
          <v-icon v-on="on">mdi-{{ application.icon }}</v-icon>
        </template>
        <span>{{ application.verboseName }}</span>
      </v-tooltip>
    </v-list-item-icon>
    <v-list-item-content>
      <v-list-item-title>
        {{ application.verboseName }}
      </v-list-item-title>
    </v-list-item-content>
  </v-list-item>

You can see that I loop my installedApplications to populate my sidebar with icons. My applications have an attribute icon so that doing application.icon returns something like home, archive or whatever icon name we can find here.

Whereas doing <v-icon>mdi-home</v-icon will display properly the desired icon, I'd like to be able to do <v-icon>mdi-{{ application.icon }}</v-icon> (I tried in my template above) but it doesn't work.

Any idea to solve that ? Maybe I missed some detail ?

Billal Begueradj Billal Begueradj · Accepted Answer · 2020-04-08T14:44:55

You can change this line:

<v-icon v-on="on">mdi-{{ application.icon }}</v-icon>

to:

<v-icon v-on="on"> {{ `mdi-${application.icon}` }} </v-icon>

Here is a Codepen demo I just created for this purpose.

Dynamic v-icon in vuetify template

1 Answers