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