CODEWITHSUNDEEP
angularjsgoogle-material-icons
Wolf359
Wolf359

Reputation: 2725

AngularJS and material icons

Material Icons are working fine in my AngularJS app.

In my template.html :

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

This works fine, the icon is displayed correctly.

But this code does not :

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

where pages is defined in the controller :

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

I can see the right value of {{x.icon}}.

Why does 

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

not work ?

Upvotes: 3

Views: 353

Answers (1)

HARI
HARI

Reputation: 406

use ng-bind-html and unsafe filter:

templat.html

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

JS

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

Upvotes: 2

Related Questions