溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
1. 引入圖標資源
在項目index.html文件里添加icon的圖標庫文件的引用。
<link rel="external nofollow" rel="stylesheet">
2. 導入MatIconModule
如果需要在別的組件同樣使用，則需要exports里面引出.
3. icons 資源
可以訪問material design獲取全部icon名稱及圖標樣式信息。
4. 自定義svg圖標資源
在網上下載svg資源，并將文件保存到項目assets目錄里。
注冊圖標資源
注冊圖標資源需要用到：
使用MatIconRegistry的下面方法addSvgIcon,addSvgIconInNamespace, addSvgIconLiteral 或者addSvgIconLiteralInNamespace 注冊.
DomSanitizer 可以把值凈化為在不同 DOM 上下文中的安全內容，來幫你防范跨站腳本攻擊（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 ：一個標記性接口，用于表示一個值可以安全的用在特定的上下文中。
SafeValue 子接口：
如果這個值在這個上下文中是可信的，則該方法會解開所包含的安全值，并且直接使用它；否則，這個值就會根據給定的安全上下文凈化成安全的，比如替換那些具有不安全協議（例如 javascript:）的 URL。 該實現負責確保在給定的上下文中可以絕對安全的使用該值。
其余函數警告： 使用不可信的用戶數據調用此方法將會讓你的應用暴露在 XSS 安全風險之下！
當使用 bypassSecurityTrust... 時，請盡量確保盡早調用該方法，并且讓他盡可能接近值的來源，以便能更容易地驗證使用它時有沒有引入安全風險。
這2個類需要DI進組件。
import {MatIconRegistry} from '@angular/material';
import {DomSanitizer} from '@angular/platform-browser';
constructor( iconRegistry:MatIconRegistry ,domSanitizer:DomSanitizer ){
iconRegistry.addSvgIcon('bell',domSanitizer.bypassSecurityTrustResourceUrl('assets/bell.svg'));
}
svg導入需要http支持，因為DomSanitizer 涉及url解析，因此需要導入httpClientModule。
import { HttpClientModule} from '@angular/common/http'
@NgModule({
imports: [
HttpClientModule,
]
})
export class AppModule { }
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
