迹忆客 专注技术分享

我们将介绍可以在 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'