Detailed explanation of Angular Material Icon usage

1. Introduce icon resources

Add a reference to the icon library file of icon in the project file.

 <link href="/icon?family=Material+Icons" rel="external nofollow" rel="stylesheet">

2. Import MatIconModule

If you need to use it in other components, you need to export it.

3. icons resources

You can access material design to get all icon names and icon style information.

4. Customize svg icon resources

Download the svg resource online and save the file to the project assets directory.

Register icon resources
Registering icon resources requires:

1. MatIconRegistry and DomSanitizer classes.
2. MatIconRegistry (Icon resources are based on fonts rather than pictures)
   

Use the following methods of MatIconRegistry to addSvgIcon, addSvgIconInNamespace, addSvgIconLiteral or addSvgIconLiteralInNamespace to register.

DomSanitizer can purify the value into security content in different DOM contexts to help you prevent security issues in cross-site scripting attacks (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: Enumeration

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

SafeValue: A tokenized interface that indicates that a value can be used safely in a specific context.

SafeValue subinterface:

• SafeHtml
• SafeResourceUrl
• SafeScript
• SafeStyle
• SafeUrl

If this value is trustworthy in this context, the method untangles the included security value and uses it directly; otherwise, the value will be purified into secure based on the given security context, such as replacing URLs with unsafe protocols (e.g. javascript:). This implementation is responsible for ensuring that the value can be used absolutely safely in a given context.

Warning for the rest of the functions: Calling this method with untrusted user data will expose your application to XSS security risks!

When using bypassSecurityTrust..., try to make sure that the method is called as early as possible and that it is as close as possible to the source of the value so that it can be easier to verify whether there are security risks introduced when using it.

These two classes require DI into the component.

import {MatIconRegistry} from '@angular/material';
import {DomSanitizer} from '@angular/platform-browser';

constructor( iconRegistry:MatIconRegistry ,domSanitizer:DomSanitizer ){
 ('bell',('assets/'));
}

svg import requires http support, because DomSanitizer involves url parsing, so httpClientModule needs to be imported.

import { HttpClientModule} from '@angular/common/http'

@NgModule({
  imports: [
   HttpClientModule,
  ]
})
export class AppModule { }

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.