Unicode label is not displayed as a Fontawesome icon

Question

I am creating a chart using angular-nvd3 I got a problem when I try to display an icon where it's a label.

$scope.data = [
            {
                "key": "Series2",
                "values": [
                    {
                        "label" : '&#xf015;',
                        "value" : 0.56
                    } ,
                    {
                        "label" : "&#xf015;" ,
                        "value" : 0.20
                    } ,
                    {
                        "label" : "&#xf015;" ,
                        "value" : 0.10
                    } 
                ]
            }
        ]

But when it displayed on the chart it got an unicode label:

<text dy=".32em" x="-5" y="0" style="text-anchor: end;">&amp;#xf015;</text>

&#xf015; this is what it's actually show on HTML but it should display 

Anyone have experience with this ? Or any ideas for me ? Thank you Here is plnkr URL: http://plnkr.co/edit/PygsTn?p=preview

I just answered this same question (if I understand it correctly): you're using an HTML entity, which won't work in an SVG. Use Unicode instead, have a look at answer here: http://stackoverflow.com/questions/38956615/untrusted-html-in-d3-js-v4-and-angularjs/38958019#38958019 — Gerardo Furtado, Aug 17 '16 at 06:46

score 2 · Accepted Answer · edited May 23 '17 at 10:28

2

replace this:  by \uf015

use \u instead of \\

It's from @Gerardo Furtado answer: untrusted HTML in d3.js v4 and AngularJS

edited May 23 '17 at 10:28

Community

1
1

answered Aug 17 '16 at 07:29

Le Dac Sy

381
3
16

Unicode label is not displayed as a Fontawesome icon

1 Answers1