Using dynamic mdi svg icons with Vuetify

Question

Using dynamic mdi svg icons with Vuetify

I'm struggling to display a dynamic v-icon within a v-select component.
I want to replace the icon name with 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>

The value of data.item.icon is a string like "mdiArrowLeft".

To clarify, mdiArrowLeft has been imported as: import {mdiArrowLeft} from "@mdi/js" and then returned in setup(). I am utilizing the composition API.

Despite my efforts, substituting {{data.item.icon}} with its imported value hasn't worked out
The outcome on the screen remains mdiArrowLeft instead of the actual icon.

vue.js vuetify.js vue-composition-api

Answer 1

Answer №1

src/plugins/vuetify.js

Set 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>{{retrieveIcon(data.item.icon)}}</v-icon>
...

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

Answer 2

src/plugins/vuetify.js

Set 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>{{retrieveIcon(data.item.icon)}}</v-icon>
...

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

Answer 3

Answer №2

Upon receiving advice from @Alex Hoffman, I was able to devise a solution:

<v-icon small>{{ chooseIcon(data.item.value)}}</v-icon>
...
    function chooseIcon(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;
    }

Answer 4

Upon receiving advice from @Alex Hoffman, I was able to devise a solution:

<v-icon small>{{ chooseIcon(data.item.value)}}</v-icon>
...
    function chooseIcon(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;
    }

Using dynamic mdi svg icons with Vuetify

Answer №1

src/plugins/vuetify.js

VUE Component

Answer №2

Similar questions

Using Vue.js to submit a form in Laravel and redirecting with a flash message

Axios does not appear to be transmitting cookies

Transmitting document through HTML form using Laravel integration with Mailgun API

When working with Vuex, remember to only alter the store state within mutations. Avoid mutating the Vuex

Navigating coordinates with mapbox

Issue encountered while attempting to deactivate button until numerical data is entered in the OTP field using Vuejs

What is the best way to transfer variables between two Vue files?

Obtain the shared value between two data entries within a Vue array

"When the value is false, use the Vue binding to apply a specific

Component fails to trigger @click handler

When attempting to define a route as a lambda function in vue-cli, the default lazy load code does not function

The system was unable to locate node.js with socket.io

What is the process for integrating a component into this Vue component?

Decoding user input parameters within a vue module

What is the best way to verify changing input fields in vue.js?

What is the best way to modify the size of an SVG element within Vuetify?

Storing various data entries within a MySQL database through the use of Vuex

Redis: Unable to establish a connection as net.connect is not recognized as a

Utilizing the Power of GrapesJs in Vue3

Tips for aligning a button to the bottom of a card in Vuetify, regardless of the text length