AngularJSとマテリアルアイコン

Question

AngularJSアプリでMaterialアイコンが正常に機能しています。私template.htmlで

：これは正常に動作します

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

、アイコンが正しく表示されます。

しかし、このコードはない：

ページがコントローラに定義されて

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

：

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

Iは{{x.icon}}の正しい値を見ることができます。

なぜ

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

は動作しませんか？

Answer 1

使用ng-bind-htmlと危険なフィルタ：

templat.html

JS

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