是否有 Angular 中所有垫子图标的官方或详尽列表？

Question

我已经开始使用 Angular Material 中的

<mat-icon>

，我想知道是否有所有包含的图标名称的官方列表。几个月前，我发现一个页面列出了其中一些，但不是全部，而且这个网站已经找不到了。

是否有这些图标的官方或详尽列表？

Answer 1

由于网站上列出的图标有点过时，这里是图标的分叉列表，由 Jossef Harush Kadouri

维护和更新

• 材质设计图标 DX (MDIDX)

旧的 Material.io 链接现在重定向到 Google Fonts 上的 Icons 页面。

谷歌还有另一种图标字体支持可变字体，您可以通过单击材料符号选项在同一页面上找到它。

无论如何，Angular Material 团队希望开发者能够自行包含 Google Material Design 图标字体（Google 字体/自托管/任何你喜欢的字体）。

Answer 2

所有材质图标的完整列表包含在 Mat-Icon List : 900+ Angular Material Icons by Arunkumar Gudelli - 2020 年 7 月 15 日

Answer 3

大约有 900 多个 Angular Material 图标，分为 10 多个类别。您可以在此处找到完整的 900 多个图标列表。

您需要在模块中加载材质图标字体 CSS：

import {MatIconModule} from '@angular/material/icon'

在您的模块中，但在导入时：

imports: [ (...), MatIconModule]

最后，HTML 中的一些示例：

<mat-icon aria-hidden="false" aria-label="my clock">access_time</mat-icon>

<i>home</i> 
 <!--In Angular we can use mat-icon as well-->
 <mat-icon>home</mat-icon>

Answer 4

是的，有一个列表：

• 所有这些都在这里 => https://fonts.google.com/icons

默认情况下，mat-icon 需要材质图标字体。

但是您仍然可以使用 MatIconRegistry 定义自己的。

对于寻找将其用于自定义 svg 图标的示例的人们：

COUNTRY_CODES = [
  "US",
  "GB",
  "MA",
]

COUNTRY_CODES.forEach((code) => {
  this.matIconRegistry.addSvgIcon(
    `country_${code.toLowerCase()}`,
    this.domSanitizer.bypassSecurityTrustResourceUrl(
      `${this.flagsSource}/svg/${code.toLowerCase()}.svg`,
    ),
  )
})

有一段时间，声明的列表中缺少一些图标，例如注销图标（或登录，无法准确记住它是哪一个），我发现您可以将它们与原始代码点一起使用。

这是图标别名及其代码点的完整完整列表 => https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIcons-Regular.codepoints

有关更多详细信息，您可以查看：https://github.com/angular/components/blob/main/src/material/icon/icon.md