Icon
網頁系統中的Icon雖然說很簡單，但是其中的學問還是有很多的，我們常用的Icon庫有FontAwesome、Iconfont等，我們選擇了Angular Material這個元件庫，就介紹Material Icons吧。
對Icon感興趣的同學可以看一下這裡
Material Design 的 Icon
Material Design 的 Icon大致分成兩種，一種是系統Icon，另一種是產品Icon。
系統Icon
系統的Icon一般以不用文字描述就可以告訴使用者操作等意義為準則，比如儲存
產品Icon
產品Icon顧名思義就是某些產品對應的Icon，比如騰訊的企鵝圖示，新浪的大眼睛，這部分一般由專業的設計師團隊來做。就不多講了（怕露餡）
一套好的Icon對於前端來說至關重要，好的Icon甚至可以讓使用者在沒有文字描述的情況下正確的去操作，而不好的Icon往往會給使用者錯誤的引導。 好在Google爸爸也給出了一套對應的圖示系統Material Icons,大概由1000個Icon，足夠我們日常使用了。
Material Icons
作為Google爸爸推出的官方Icon庫，用起來也是很便捷的。就拿剛剛的save圖示來說吧。 我們先去 Material Icons，然後在搜尋框中 輸入 sava
<i class="material-icons">save</i>
複製程式碼直接在HTML中插入這句話就可以了
<div>點
<i class="material-icons">save</i>
儲存
</div>
複製程式碼
Angular Material的MatIcon
雖然說<i class="material-icons">save</i>的方法已經很容易的，但是追求元件開發的Angular Material怎麼會允許這個Tag方式的呢，所以又造出了一個MatIcon
MatIcon
首先 老樣子 我們需要在使用的地方引入它
import { MatIconModule } from '@angular/material';
@NgModule({
...
imports: [
...,
MatIconModule],
...
})
export class AppModule {}
複製程式碼然後HTML了
<div>點
<!--<i class="material-icons">save</i>-->
<mat-icon>save</mat-icon>
儲存
</div>
複製程式碼看下效果
關於Angular Material的顏色
先放官方連結 建議配色的選擇為兩種主要顏色(primary color)跟次要顏色(secondary color)，用來區分主要的功能顏色及強調可以選擇的畫面，另外在表單相關的元件上還加上了錯誤訊息(error message)的顏色，而在Angular Material的樣式中將這三種顏色名稱分別叫做primary、accent和warn。 在HTML中加上
<div>
預設顏色
<mat-icon>message</mat-icon>
</div>
<div>
primary色
<mat-icon color="primary">message</mat-icon>
</div>
<div>
accent色
<mat-icon color="accent">message</mat-icon>
</div>
<div>
warn色
<mat-icon color="warn">message</mat-icon>
</div>
複製程式碼看下效果
使用其他對圖示
Material Icons中對圖示雖然很多，但是架不住需求啊，怎麼辦呢，倆辦法 第一 自己公司有一套，自己畫的，直接用SVG。 拿angular自己的圖示舉個栗子 先去下載https://angular.cn/presskit，下載單色的logo，(彩色怎麼改色，真是) 然後放到src/asset/imges裡
import { MatIconRegistry } from '@angular/material';
import { DomSanitizer } from '@angular/platform-browser';
複製程式碼MatIconRegisterys是用來擴充SVG icon的，DomSanitizer是用來標記信任路徑的，因為angular預設開啟XSS過濾，不去標記信任會GG。 然後再去對應的module中注入HttpClientModule，因為我們要下載這個SVG。
import { HttpClientModule } from '@angular/common/http';
@NgModule({
...
imports: [
...,
HttpClientModule
],
...
})
export class AppModule {}
複製程式碼然後我們加入這個SVG圖示
this.matIconRegistry.addSvgIconInNamespace('custom-svg','angular',this.domSanitizer.bypassSecurityTrustResourceUrl('assets/imges/angular.svg'));
複製程式碼
- namespace：icon的namespace，方便用來分類不同的icons，也能夠避免名稱衝突
- iconName：給這個icon起名
- url（奏是那個value）：一個安全的圖片來源 然後我們去試一下我們自定義的Icon,用法是
<mat-icon svgIcon="namespace:iconName"></mat-icon>
複製程式碼來個例項
<div>
<mat-icon svgIcon="custom-svg:angular"></mat-icon>
<mat-icon svgIcon="custom-svg:angular" color="primary"></mat-icon>
<mat-icon svgIcon="custom-svg:angular" color="accent"></mat-icon>
<mat-icon svgIcon="custom-svg:angular" color="warn"></mat-icon>
</div>
複製程式碼
在MatIcon中使用其他Icon Font
除了用自己的圖示庫，還有辣麼多好用的圖示庫，咋用呢？ 拿FontAwesome舉個栗子，畢竟用的人多 第五版還沒摸透，拿第四版，用的人最多的版本
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
複製程式碼然後像剛才那樣引入
this.matIconRegistry.registerFontClassAlias('fontawesome', 'fa');
複製程式碼
- alias：原來icon font class的別名，例如FontAwesome都會在class裡面加上fa之後才加上fa-*，這裡要設定的就是fa的別名。
- className：原來icon font的主要class，以FontAwesome來說也就是fa
用法
<mat-icon fontSet="alias" fontIcon="className"></mat-icon>
複製程式碼示例
<mat-icon fontSet="fontawesome" fontIcon="fa-thumbs-up"></mat-icon>
<mat-icon fontSet="fontawesome" fontIcon="fa-thumbs-up" color="primary"></mat-icon>
<mat-icon fontSet="fontawesome" fontIcon="fa-thumbs-up" color="accent"></mat-icon>
<mat-icon fontSet="fontawesome" fontIcon="fa-thumbs-up" color="warn"></mat-icon>
複製程式碼
<mat-icon fontSet="fontawesome" fontIcon="fa-spin">
<mat-icon fontSet="fontawesome" fontIcon="fa-thumbs-up"></mat-icon>
</mat-icon>
複製程式碼