CODEWITHSUNDEEP
vue.jsvuetify.js
lbris
lbris

Reputation: 1249

Dynamic v-icon in vuetify template

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 ?

Upvotes: 1

Views: 5790

Answers (1)

Billal BEGUERADJ
Billal BEGUERADJ

Reputation: 22804

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.

Upvotes: 3

Related Questions