我在哪里可以获得材质图标“灯泡”或其他缺少的 Angular 材质图标？

Question

情况

我正在寻找 Material 灯泡图标。 在此页面上，它被声明为来自 Google，但我在官方 Material 图标资源https://material.io/resources/icons/?style=baseline上找不到它。

我们的设计师也有这个灯泡，并使用了 Google Material 模板。

我想达到什么目标？

我需要将它用于<mat-icon>组件的快捷方式，我目前没有。 像这样：

<mat-icon>bulb</mat-icon>

一个实际的例子是： https : //stackblitz.com/edit/angular-oksuuj

其中，图标file_download确实存在于 Angular MatIconModule 中，但不存在于官方material.io页面中。

Answer 1

我找到了解决方案。 谷歌在 Github 上的官方图标库不再维护，但有一个包含最新图标和更新页面的分支。

material-icons.scss

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(../font/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
  local('MaterialIcons-Regular'),
  url(../font/MaterialIcons-Regular.woff2) format('woff2'),
  url(../font/MaterialIcons-Regular.woff) format('woff'),
  url(../font/MaterialIcons-Regular.ttf) format('truetype');
}

我只是用这个 repo 中的字体文件在本地替换了我的字体文件（材质图标 repo 的分支）：

• 回购https://github.com/jossef/material-design-icons-iconfont
• 演示页面： https : //jossef.github.io/material-design-icons-iconfont/
• 字体文件： https : //github.com/jossef/material-design-icons-iconfont/tree/master/dist/fonts

然后它使用lightbulb作为快捷方式。

<mat-icon>lightbulb</mat-icon>

Answer 2

我有一个有趣的问题，也许这对一些人有帮助。

如果您正在寻找那段代码来导入谷歌字体，您可以将代码复制粘贴到您的 IDE 中。 如果这样做，请注意将双引号从书籍中使用的双引号更改为用于编程的双引号。 你不会得到任何错误，但它只是行不通。

所以总是复制这个：

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

不是这个：

<link href=”https://fonts.googleapis.com/icon?family=Material+Icons” rel=”stylesheet”>