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

【问题标题】：Where can I get the Material Icon 'Bulb' or other missing Angular Material icons?我在哪里可以获得材料图标“灯泡”或其他缺少的 Angular 材料图标？
【发布时间】：2020-05-26 23:34:45
【问题描述】：

情况

我在寻找 Material 灯泡图标。在这个page，它被声明为来自谷歌，但我在官方材料图标资源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 页面中。

【问题讨论】：

标签： angular angular-material material-design

【解决方案1】：

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

如果您正在寻找导入谷歌字体的那段代码，您可以将代码复制粘贴到您的 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”>

【讨论】：

【解决方案2】：

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

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>

【讨论】：