Dynamic mdi svg icon in vuetify

1
votes

I'm trying to render dynamic v-icon in a v-select.
I need to replace the icon name by its imported value

            <v-select v-model="data.type" dense :items="typeItems" :label="$tc('Type')">
              <template v-slot:item="data">
                <v-list-item>
                  <v-list-item-icon>
                    <v-icon>{{data.item.icon}}</v-icon>
                  </v-list-item-icon>
                  <v-list-item-content>
                    <v-list-item-title v-html="data.item.text"></v-list-item-title>
                  </v-list-item-content>
                </v-list-item>
              </template>
            </v-select>

data.item.icon is a string, for example "mdiArrowLeft".

mdiArrowLeft is imported : import {mdiArrowLeft} from "@mdi/js" and returned in setup(). I'm using composition-api.

I can't replace the string {{data.item.icon}} by its imported value
The template rendered is mdiArrowLeft instead of the icon.

2
vue.jsvuetify.jsvue-composition-api

2 Answers

1
votes

src/plugins/vuetify.js

Specify the mdiSvg iconfont:

import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

export default new Vuetify({
  icons: {
    iconfont: 'mdiSvg',
  },
})

Vue Component

...
<v-icon>{{getIcon(data.item.icon)}}</v-icon>
...

<script>
  export default {
    methods: {
      async getIcon (iconName) {
        return { [iconName]: icon } = await import('@mdi/js')
      }
    }
  }
</script>
0
votes

Following a suggestion of @Alex Hoffman I found a solution : 

<v-icon small>{{ typeIcon(data.item.value)}}</v-icon>
...
    function typeIcon(type) {
      if (type === 1) return mdiArrowLeft;
      if (type === 2) return mdiCurrencyEur;
      if (type === 3) return mdiArrowRight;
      if (type === 4) return mdiEmailOutline;
      if (type === 5) return mdiCloudUploadOutline;
      if (type === 6) return mdiDeleteForever;
      if (type === 7) return mdiPhone;
      if (type === 8) return null;
      if (type === 9) return mdiDownload;
    }