Angular 中所有 Mat 图标的列表
我们将介绍可以在 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'
可以在此处找到图标列表。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布,任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站。本站所有源码与软件均为原作者提供,仅供学习和研究使用。如您对本站的相关版权有任何异议,或者认为侵犯了您的合法权益,请及时通知我们处理。