Vue.js/Weex: Fontawesome not working on dynamic text

Question

<template>
  <div>
    <text class="fontawesome">&#xf053;</text>
    <text class="fontawesome">{{testfontawesome}}</text>
  </div>
</template>
<style scoped>
  .fontawesome {
    font-family:FontAwesome;
  }
</style>
<script>
    export default {
        data: () => ({
            testfontawesome: "&#xf053;"
        }),
    }
</script>

How can I display fontawesome icon in dynamic value? In the code sample above, only the first line shows the icon correctly, secondly shows the raw value instead of the icon. Why?

Answer 1

You need to bind the value as raw html.

https://v2.vuejs.org/v2/guide/syntax.html#Raw-HTML

<text class="fontawesome" v-html="testfontawesome"></text>

Vue is protecting you from cross-site scripting (XSS) attacks by automatically html encoding values.

As the warnings in the docs point out, avoid using v-html to display user-generated text, as it could be malicious.