AngularJS and Material Icons

Question

Material icons work fine in my AngularJS app.

In my .html template:

<i class="material-icons">&#xE86A;</i>

This works great, the icon displays correctly.

But this code doesn't:

<div ng-repeat="x in pages">
    current icon : {{x.icon}}
    <br>
    <i class="material-icons">{{x.icon}}</i>
</div>

where pages are defined in the controller:

$scope.pages = [
{icon: "&#xE0B6;"},
{icon: "&#xE8F9;"},
{icon: "&#xE5CA;"}
];

I see the correct value for {{x.icon}}.

Why

<i class="material-icons">{{x.icon}}</i>

does not work?

+3

MehmetGunacti 08 jul. 17 at 12:42

1 answer

HARI · Accepted Answer · 2017-07-08T13:13:52+0000

use an ng-bind-html

unsafe filter too:

templat.html

 <i class="material-icons" ng-bind-html="x.icon | unsafe "></i>

Js

app.filter('unsafe',function($sce){
  return $sce.trustAsHtml
})