Angular Material 的默认图标列表 2+答案

【问题标题】：Default Icon List of Angular Material 2+Angular Material 的默认图标列表 2+
【发布时间】：2018-08-06 12:20:43
【问题描述】：

我没有使用 Font Awesome 和 Google Fonts

【问题讨论】：

@angular/material 的 mat-icon 不附带任何图标，它被设计为与图标字体一起使用。默认情况下，它配置为使用来自 google fonts api 的 Material Icons 字体。 IE 你需要一个 fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

【解决方案1】：

this 是你要找的吗？

【讨论】：

【解决方案2】：

恐怕 Angular Material Icon 组件实际上并未预加载 Google Material Design 图标。

根据Icon overview的文档：

默认情况下，<mat-icon> 预计 Material icons font。（您仍然需要包含 HTML 以加载字体及其 CSS，如链接中所述）。

_{它位于“带连字的字体图标”标题下。我也在这里强调“期望”这个词}

它甚至在Getting Started guide 下声明您应该将 Material Icons 字体添加到您的index.html：

如果你想将 mat-icon 组件与官方 Material Design 图标一起使用，请在 index.html 中加载图标字体。

因此，您必须在您的应用中加载图标字体（或 SVG 图标集）。你必须自己做。

这里有一些您可以使用的字体图标/ SVG 图标：

【讨论】：

不，你错了。有可以按名称使用的默认图标。在这里阅读我的答案（它有一个 Angular Material 图标列表）：stackoverflow.com/a/64215719/6166911

【解决方案3】：

如果你要使用 Lars answer。以下代码将在您的角度项目中设置图标

<span class="material-icons">home</span>

【讨论】：