Use calculated SVG Icon in Quasar

Question

In my Quasar app I'm trying to dynamically change an SVG icon. I'm using a computed property to return the correct name of the icon.

<template>
  <q-icon
    :name="iconName"
  />
</template>

<script setup>
import { computed } from 'vue'
import { mdiCheckBold, mdiCloseThick } from '@quasar/extras/mdi-v7'

const iconName = computed(() => {
  if (/* some logic */) return 'mdiCheckBold'
  return 'mdiCloseThick'
})
</script>

This doesn't work. In the docs they say, that when using SVG icons, the icon name has to be bound to name. When I directly bind one of the icons to the name, then it works – e.g. :name="mdiCheckBold" shows the correct icon.

How can I make this work with computed?

Answer 1

While reviewing my question, I found out how to do it. For anyone having the same question, simply return the imported component instead of a String.

<script setup>
import { computed } from 'vue'
import { mdiCheckBold, mdiCloseThick } from '@quasar/extras/mdi-v7'

const iconName = computed(() => {
  if (/* some logic */) return mdiCheckBold // Don't return as string
  return mdiCloseThick
})
</script>