Display FontAwesome icon in Vue 3 with JavaScript array

November 7, 2022

I am trying to display FontAwesomeicon

<font-awesome-icon icon="fa-solid fa-shop" />

with JavaScript array to be dynamic but it’s not working it displays as text

<div class="aboutme-card" v-for="(item,index) in servicesArr" :key="index">
  <div class="service-card-icon">{{item.icon}}</div> <!--but its display as text not as icon svg-->
  <div class="service-card-title">{{item.title}}</div>
  <p class="service-card-desc">{{item.description}}</p>
</div>

<script>
export default {
  data() {
    return {
      servicesArr: [
        {
          icon: `<font-awesome-icon icon="fa-solid fa-shop" />`,
          title: "E-commerce",
        }
      ]
    }
  }
}
</script>

>Solution :

Isn’t something like this conceivable in your case?

<template>
  <div class="aboutme-card" v-for="item in servicesArr" :key="item.icon">
    <div class="service-card-icon">
      <font-awesome-icon :icon="item.icon" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      servicesArr: [
        {
          icon: "fa-solid fa-shop",
          title: "E-commerce",
        }
      ]
    }
  }
}
</script>

Even if v-html exists, it’s usually not the way to go.
Especially in such a simple use-case where dynamic props are totally fine.

Overall, I still recommend that solution for overall ease of use + flexibility.