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> 復制代碼

總結

以上是生活随笔為你收集整理的Angular Material 攻略 04 Icon的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。