如何将自定义 svg 图标和常规角度材质图标添加到相同的 mat-icon 标签答案

【问题标题】：How to add custom svg icon and regular angular material icons to same mat-icon tag如何将自定义 svg 图标和常规角度材质图标添加到相同的 mat-icon 标签
【发布时间】：2020-06-02 23:37:30
【问题描述】：

使用 Angular 8 材质设计，我被困在一个点，我需要同时使用自定义 svg 图标和内置/常规材质图标到同一个 mat-icon 标签。

我正在运行一个循环来显示带有这些图标的菜单，其中一些菜单项。我使用的是常规材料，对于某些菜单项，我必须使用自定义图标 (svg)。

需要类似的东西：

<mat-icon svgIcon="menuIcon">{{menuIcon}}</mat-icon>

【问题讨论】：

标签： angular-material angular8

【解决方案1】：

通常，我会有 2 个属性来表示菜单项的图标：

svgIcon 是 SVG 图标的名称
icon 这是 CSS 字体图标的名称

菜单项将用以下界面表示：

export interface MenuItem {
  /** The menu item's title. */
  title: string;
  /** The menu item's SVG icon. Either this or the `icon` property should be used. */
  svgIcon?: string;
  /** The menu item's icon. Either this or the `svgIcon` property should be used. */
  icon?: string;
  // Other properties
}

然后我会根据是否设置了svgIcon 或icon 属性有条件地显示适当的<mat-icon>：

<mat-icon *ngIf="item?.icon && !item?.svgIcon">{{ item.icon }}</mat-icon>
<mat-icon *ngIf="!item?.icon && item?.svgIcon" [svgIcon]="item.svgIcon"></mat-icon>

或者，您可以在界面中使用isSvgIcon 属性来表示指定的图标是否为 SVG 图标：

<mat-icon *ngIf="item.isSvgIcon" [svgIcon]="item.icon"></mat-icon>
<mat-icon *ngIf="!item.isSvgIcon">{{ item.icon }}</mat-icon>

【讨论】：

感谢您的回复。这是我最后的选择。我正在寻找一些优化的替代方案（如果有的话）。但看起来就是这样。