Angular 中所有 Mat 圖示的列表

1. Angular 中的 Material Design 圖示 DX
2. 由 Google 提供的 Angular Material Icons

我們將介紹可以在 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'

可以在此處找到圖示列表。