css - 如何合并不在 Google Material for Angular 中的图标？

Question

要为 Angular 使用 Material 图标，<mat-icon>请与图标的名称一起使用：

<mat-icon>check</mat-icon>

图标可以在这里找到：https ://material.io/tools/icons/?style=baseline

现在的问题是这个图标集缺少很多图标。例如，那里找不到 Instagram 图标。

在这些情况下，一种方法是退回到图标字体并在您的 HTML 页面中包含更多图标字体，并<i>为此目的使用旧元素。

但这就是代码异味，因为您的代码库现在有两种方法用于一个目的。

你怎么解决这个问题？您如何合并 Google Material for Angular 中不存在的图标？如何扩展 Google Material 图标？

标签： cssangular-materialiconsicon-fonts

Answer 1

如果您检查 Angular Material 提供的 API，您可以使用MatIconRegistry（参考：https ://material.angular.io/components/icon/api#MatIconRegistry ）添加您自己的图标以使用相同的符号（使用mat-icon）。