Display FontAwesome icon in Vue 3 with JavaScript array

Question

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>

I recommend that you give a try to [that one](https://stackoverflow.com/q/72052807/8816585) rather than trying to stick to their API. Otherwise, it's a matter of passing the proper prop or using a nice dynamic component. Using the `{{ }}` syntax will not interpolate a component, just insert it as text. And evaluating that is not the way to go, rather use the solutions I provided above. — kissu, Nov 07 '22 at 18:04
i use v-html="{{item.icon}}" now works but now show icon only show current component in html — Giorgi Shalamberidze, Nov 07 '22 at 18:05
no icon is correct without javascript array its show as icon but with array doesnot showing — Giorgi Shalamberidze, Nov 07 '22 at 18:05
Please do **NOT** use `v-html` as I just suggested a minute ago. Can't you just keep the actual `fa-solid fa-shop` part and pass that as a prop in your template through the component? — kissu, Nov 07 '22 at 18:07
its working thanks :) i just render with array only "fa-solid fa-shop" and insert in to fontawesome component icon like this — Giorgi Shalamberidze, Nov 07 '22 at 18:10

kissu · Accepted Answer · 2022-11-07T18:12:17.760

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.

Display FontAwesome icon in Vue 3 with JavaScript array

1 Answers1