Angular Material 攻略 04 Icon

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

而後咱們點擊這個圖標會出現下載SVG，PNG或者ICON FONT三種方式

咱們在以前已經引入過圖標庫了，因此咱們直接看第三種 ICON FONT 若是不須要兼容IE9如下那就(IE毒瘤)

<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>

複製代碼

看下效果

固然 這種顏色是能夠經過CSS進行覆蓋的，可是若是沒有對設計和Material Design有較高對理解，不建議這麼作，顏色之間對相互搭配，不是那麼好作對。

使用其餘對圖標

Material Icons中對圖標雖然不少，可是架不住需求啊，怎麼辦呢，倆辦法 第一 本身公司有一套，本身畫的，直接用SVG。 拿angular本身的圖標舉個栗子 先去下載https://angular.cn/presskit，下載單色的logo，(彩色怎麼改色，真是) 而後放到src/asset/imges裏

默認靜態資源和網站是在一個服務器上，emm跨域本身搞定。這裏不細說 先去app.component.ts 中注入須要的服務

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>
複製代碼