Angular 中所有 Mat 图标的列表
Rana Hasnain Khan
2023年1月30日
2021年12月20日
我们将介绍可以在 Angular 中找到所有 Mat 图标的网站,以及在 Angular 项目中使用这些 Mat 图标的方法。
Angular 中的 Material Design 图标 DX
Material design icons DX 是 Google Material Design 图标的一个分支,你可以在其中找到 900 多个 Material 图标。创建此项目是为了解决开发体验问题。
有两种方法可以在你的项目中安装 Material Design 图标。
使用 npm
安装:
npm install material-design-icons-iconfont --save
include
或 @import
预编译的 CSS 文件:
<link href=".../material-design-icons.css" rel="stylesheet">
用法
使用 scss
,你可以在项目中导入字体和变量。
$material-design-icons-font-directory-path: '~material-design-icons-iconfont/dist/fonts/';
@import '~material-design-icons-iconfont/src/material-design-icons';
自定义类
我们可以自定义我们的类并使用 Sass mixins
访问材料变量。
.my-home {
@include material-icon('home');
}
# or
.my-home:before {
content: material-icons-content('home');
}
可以在此处找到图标列表。
由 Google 提供的 Angular Material Icons
Google 的 Material Design 系统图标易于用于任何项目,并且有 900 多个材质图标。<mat-icon>
选择器在 Angular 中显示材质图标。<mat-icon>
是名为 MatIconModule
的 Angular 材质模块的一部分。
我们可以通过将连字文本放在 <mat-icon>
组件中来使用字体连字作为图标。
例子:
<mat-icon>home</mat-icon>
我们必须从 Angular 材料模块中导入 MatIconModule
。
import {MatIconModule} from '@angular/material/icon'
可以在此处找到图标列表。
Author: Rana Hasnain Khan
Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.
LinkedIn