Angular 角度材质图标的问题

角度5+

角度CLI 1.7.4

遵循此处的设置：

如何实现材质图标：

我可以得到一些图标显示，但有不一致。例如，这：

<button mat-icon-button>
    <mat-icon aria-label="Edit dashboard">bug report</mat-icon>
</button>

收益率（所有图标应像这样居中）：

我所说的居中是指，我认为它们应该居中于

按钮

标记内，如

构建

图标：

---

有些图标根本不显示：

 <button mat-icon-button>
        <mat-icon aria-label="Edit dashboard">aspect ratio</mat-icon>
 </button>

更新： 我想这些图标只是坏了。在Angular Material站点本身上，我更改了中间心脏（收藏夹）以显示

编辑模式

图标。此处出现布局问题，某些图标未显示：

---

问题可能是图标的名称：

<button mat-icon-button>
    <mat-icon aria-label="Edit dashboard">report</mat-icon>
</button>

报告

通常图标名称为2个单词，需要下划线字符

---

像bug_report一样，您的所有设置都是正确的，图标没有损坏，唯一的问题是如何写入图标的名称

组成图标名称的单词必须用下划线（

\uu

）分隔

例如：

• 相反，您应该使用

  bug\u report

  。图标链接：

• 相反，您应该使用

  纵横比
  。图标链接：
  

在角材质中，以下代码正常工作：

<button mat-icon-button aria-label="">
    <mat-icon>bug_report</mat-icon>
</button>
<button mat-icon-button aria-label="">
    <mat-icon>aspect_ratio</mat-icon>
</button> 

臭虫报告
纵横比

此处演示：

---

以下链接提供了角材质支持的图标列表

---

我也有同样的问题

<button mat-icon-button>
    <mat-icon aria-label="Edit dashboard">report</mat-icon>
</button>

<button mat-icon-button aria-label="">
    <mat-icon>bug_report</mat-icon>
</button>
<button mat-icon-button aria-label="">
    <mat-icon>aspect_ratio</mat-icon>
</button>