angular - 如何添加材质图标
问题描述
我正在尝试在我的应用程序中使用大纲材质图标。我似乎无法正确导入它们。我只能使用正常填充的图标。我希望能够使用像这个例子这样的轮廓图标。
在示例中,我可以使用done_outline
图标。他们是如何导入所有图标的?
在我的应用程序中,我安装了npm install material-design-icons
我已经导入MatIconModule
了我的app.module.ts
但我仍然不能使用任何大纲图标。
解决方案
你有两个解决方案。
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">
- 您可以在模板中使用它
<i class="material-icons">face</i>
2) 材料包解决方案
- 你必须安装材料包
npm install @angular/material
- 引用到 app.module
import {MatIconModule} from '@angular/material/icon';
- 现在使用它
<mat-icon>face</mat-icon>
演示:
推荐阅读
- node.js - 如果目标类被扩展,TypeScript 合并声明组合不起作用
- google-cloud-platform - 什么是 BigQuery DML 配额限制
- python - TypeError: __init__() 接受 1 个位置参数,但给出了 2 个(Python multiprocessing with Pytesseract)
- javascript - 查找输入字段的单元格 ID?
- android - Flipper 网络插件不显示网络请求
- svg - 三个 js 线框球体 svg
- r - 刻面和 scale_color_manual
- linux - 在带有 OpenGL 的 Buildroot 系统上找不到 libgl.so
- python - 如何在manim中为扇区的角度和旋转同时变化设置动画
- php - 排序数组的缺失键 - rsort - PHP