Angular 如何在ngFor列表中混合使用核心和自定义角度材质图标？

假设我有一个核心列表，如下所示：

自定义图标需要不同的标记结构，如下所示：

<md-icon svgIcon="{{item.icon}}"></md-icon>

---

如何在重复列表中使用两者的混合？

您需要某种标志来说明它是核心还是自定义的。然后可以使用ngIf来呈现DOM

<md-nav-list>
    <a md-list-item *ngFor="let item of items">
        <md-icon *ngIf="item.flag">{{item.icon}}</md-icon>
        <md-icon *ngIf="!item.flag" svgIcon="{{item.icon}}"></md-icon>
    </a>
</md-nav-list>

新的

项目。图标
正在

“主页”

或

'
这基本上就是我最后要做的，尽管我正在检查自定义图标名称。不过，我认为这是暂时的解决办法。重复标记很难看。其他选项：在中使用[innerHTML]并将两个不同的DOM项作为字符串，或者将所有材质图标添加为自定义字体，然后使用svgIcon输入呈现它们。我明白了。整个innerHTML字符串是否会存储在数据库中？您可以使用与我的答案的第一部分相同的逻辑在组件typescript中构建它们，或者将整个字符串存储在数据库中，以首选的为准
ngOnInit（）{for（让i=0；i

<md-icon svgIcon="{{item.icon}}"></md-icon>

<md-nav-list>
    <a md-list-item *ngFor="let item of items">
        <md-icon *ngIf="item.flag">{{item.icon}}</md-icon>
        <md-icon *ngIf="!item.flag" svgIcon="{{item.icon}}"></md-icon>
    </a>
</md-nav-list>

<md-nav-list>
    <a md-list-item *ngFor="let item of items" [innerHtml]="item.icon"></a>
</md-nav-list>