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 application s 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?

Answer 1

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.