[Vuejs]-How to render bound icons inside buttons?

by

2👍

✅

You can use the html directive to insert html content

<button v-for="button in buttonsGroup" v-html="button.icon" />

But a better approach might be to just supply the icon name to the component

<button v-for="button in buttonsGroup">
    <i :class="'fas ' + button.icon">
</button>

and

iconButtons: [
    {icon: "fa-smile"},
    {icon: "fa-sad-tear"}
]
👤Stephen Thomas

1👍

Read the documentation section on raw HTML: https://v2.vuejs.org/v2/guide/syntax.html#Raw-HTML

By default, the double braces will render as text, but you can add the v-html flag for it to render.

👤aprouja1

0👍

Also consider that the "group of buttons" component doesn’t has any state to watch so it’s a perfect case for a functional component.

So you can achieve it like this:

<template functional>
  <div>
    <button v-for="(button, index) of props.buttonsGroup"
          :key="index"
          v-html="button.icon" 
          v-on="listeners" <!-- In case you want to listen to button events -->
    />
  </div>
</template>

And in the script:

export default {
  props: {
    buttonsGroup: Array
  }
}
👤Roland

Leave a comment