AngularJS- und Material-Icons

Question

Material Icons funktionieren in meiner AngularJS-App einwandfrei.

In meinem template.html:

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

Das funktioniert gut, wird das Symbol korrekt angezeigt.

Aber dieser Code nicht:

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

wo Seiten in der Steuerung definiert:

$scope.pages = [ 
{icon: ""}, 
{icon: ""}, 
{icon: ""} 
]; 

ich den richtigen Wert sehen {{x.icon}}.

Warum

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

nicht?

Answer 1

Verwendung ng-bind-html und unsichere Filter:

templat.html

JS

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