Vue.js - Rendering Font Awesome using unicode syntax inside component not working

Question

I have the following Font Awesome icon defined in my component template using its Unicode syntax. However, it doesn't seem to render inside the view. The output I get is \uf040.

<template>
  ...
    <span class="text-muted icon-before" data-icon="\uf040" >
      Edit
    </span>
  ...
</template>

CSS:

.icon-before[data-icon]:before {
  color: inherit;
  content: attr(data-icon);
  font-family: 'FontAwesome';
  font-style: normal;
}

Note: I'm using the component inside an asp.net MVC razor view.

Any ideas how I can fix this?

Answer 1

You need to unescape the string '\uf040'. You can do that with a filter, like so:

new Vue({
  el: '#app',
  filters: {
    unescape: v => unescape(v)
  }
})

.icon-before[data-icon]:before {
  color: inherit;
  content: attr(data-icon);
  font-family: 'FontAwesome';
  font-style: normal;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.10/vue.min.js"></script>

<div id="app">
  <span class="text-muted icon-before" :data-icon="'\uf040' | unescape" >
    Edit
  </span>
</div>