1. 引入圖標(biāo)資源

在項(xiàng)目index.html文件里添加icon的圖標(biāo)庫文件的引用。

 <link  rel="external nofollow" rel="stylesheet">

2. 導(dǎo)入MatIconModule

如果需要在別的組件同樣使用，則需要exports里面引出.

3. icons 資源

可以訪問material design獲取全部icon名稱及圖標(biāo)樣式信息。

4. 自定義svg圖標(biāo)資源

在網(wǎng)上下載svg資源，并將文件保存到項(xiàng)目assets目錄里。

注冊圖標(biāo)資源
注冊圖標(biāo)資源需要用到：

MatIconRegistry 以及 DomSanitizer 類。 MatIconRegistry(圖標(biāo)資源是基于字體而不是圖片的)

使用MatIconRegistry的下面方法addSvgIcon,addSvgIconInNamespace, addSvgIconLiteral 或者addSvgIconLiteralInNamespace 注冊.

DomSanitizer 可以把值凈化為在不同 DOM 上下文中的安全內(nèi)容，來幫你防范跨站腳本攻擊（XSS）類的安全問題。

abstract class DomSanitizer implements Sanitizer { abstract sanitize(context: SecurityContext, value: SafeValue | string | null): string | null abstract bypassSecurityTrustHtml(value: string): SafeHtml abstract bypassSecurityTrustStyle(value: string): SafeStyle abstract bypassSecurityTrustScript(value: string): SafeScript abstract bypassSecurityTrustUrl(value: string): SafeUrl abstract bypassSecurityTrustResourceUrl(value: string): SafeResourceUrl}

abstract sanitize(context: SecurityContext, value: SafeValue | string | null): string | null
SecurityContext：枚舉

enum SecurityContext { NONE: 0 HTML: 1 STYLE: 2 SCRIPT: 3 URL: 4 RESOURCE_URL: 5}

SafeValue ：一個標(biāo)記性接口，用于表示一個值可以安全的用在特定的上下文中。

SafeValue 子接口：

如果這個值在這個上下文中是可信的，則該方法會解開所包含的安全值，并且直接使用它；否則，這個值就會根據(jù)給定的安全上下文凈化成安全的，比如替換那些具有不安全協(xié)議（例如 javascript:）的 URL。 該實(shí)現(xiàn)負(fù)責(zé)確保在給定的上下文中可以絕對安全的使用該值。

其余函數(shù)警告： 使用不可信的用戶數(shù)據(jù)調(diào)用此方法將會讓你的應(yīng)用暴露在 XSS 安全風(fēng)險之下！

當(dāng)使用 bypassSecurityTrust... 時，請盡量確保盡早調(diào)用該方法，并且讓他盡可能接近值的來源，以便能更容易地驗(yàn)證使用它時有沒有引入安全風(fēng)險。

這2個類需要DI進(jìn)組件。

import {MatIconRegistry} from '@angular/material';import {DomSanitizer} from '@angular/platform-browser';constructor( iconRegistry:MatIconRegistry ,domSanitizer:DomSanitizer ){ iconRegistry.addSvgIcon('bell',domSanitizer.bypassSecurityTrustResourceUrl('assets/bell.svg'));}