AngularJS 和 material 图标

Question

Material 图标在我的 AngularJS 应用程序中工作正常。

在我的 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: "&#xE0B6;"},
{icon: "&#xE8F9;"},
{icon: "&#xE5CA;"}
];

我可以看到 {{x.icon}} 的正确值。

为什么

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

不工作？

Answer 1

使用 ng-bind-html 和不安全过滤器：

templat.html

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

JS

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

AngularJS and material icons