AngularJS 和材质图标答案

【问题标题】：AngularJS and material iconsAngularJS 和材质图标
【发布时间】：2017-12-12 16:05:52
【问题描述】：

材质图标在我的 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>

不工作？

【问题讨论】：

【解决方案1】：

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

模板.html

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

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

【讨论】：