如何添加材质图标

Question

我正在尝试在我的应用程序中使用 Outlined 材质图标。我似乎无法正确导入它们。我只能使用正常填充的图标。我希望能够使用像这个例子这样的轮廓图标。

在示例中，我可以使用done_outline图标。他们是如何导入所有图标的？

在我的应用程序中，我安装了 npm install material-design-icons

我已经导入MatIconModule了我的app.module.ts但我仍然无法使用任何大纲图标。

Answer 1

你有两个解决方案。

1）第一个解决方案。

1. 链接索引文件中的字体元素

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

或大纲版本：

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

2. 您可以在模板中使用它

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

2) 带材料包的解决方案

1. 你必须安装材料包

npm install @angular/material

2. 引用到 app.module

<i class="material-icons">face</i>

3. 现在使用它

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

演示：

https://stackblitz.com/edit/angular-psj1hy