Material ICON

在 index.html 加入 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

import { MatIconModule } from '@angular/material';
@NgModule({
  imports:[ MatIconModule ],

<mat-icon>info</mat-icon> 等同 <i class="material-icons">info</i>
 

在Angular Material的樣式中將以 primary, accent和warn 三種顏色名稱為主, 過多顏色可能會造成版面色系複雜(可參考 Material Design System Color指南), 使用方式如下

<mat-icon color="accent">info</mat-icon>

擴充目的是讓我們可以使用相同 tag 方式引入第三方資源或自訂資源.
1. 將檔案至於 src/asset/imgs 目錄下, 如 my.svg

2. 注入

import { MatIconRegistry } from '@angular/material';
import { DomSanitizer } from '@angular/platform-browser';

export class AppComponent implements OnInit {
  constructor(private matIconRegistry: MatIconRegistry, private domSanitizer: DomSanitizer) {
    this.matIconRegistry.addSvgIconInNamespace(
    'my-svg', 'myIcon',
    this.domSanitizer.bypassSecurityTrustResourceUrl('assets/imgs/my.svg'));//為了避免XSS的問題，必須透過Angular提供的DomSanitizer service來信任這個路徑
  }
...
參數說明
MatIconRegistery.addSvgIconInNamespace三個參數：
    namespace：icon的namespace，方便用來分類不同的icons，也能夠避免名稱衝突
    iconName：給予這個icon一個名稱
    url：一個安全的圖片來源

3.使用 <mat-icon svgIcon="my-svg:myIcon"></mat-icon>
 

如 FontAwesome

<link href="https://use.fontawesome.com/releases/v5.0.6/js/all.js" rel="stylesheet">

註冊

this.matIconRegistry.registerFontClassAlias('fontawesome', 'fa');

使用

<mat-icon fontSet="fontawesome" fontIcon="fa-bars"></mat-icon>, 同樣可搭配其它 class="xxxx" 屬性使用
原本使用方式 <i class="fa fa-bars"></i> 似乎較簡潔, 至於是否需要採用同一tag方式就看各自喜好了