angular项目使用svg---(1)

Angular之中使用svg

1. 在项目之中存储svg资源

2. 使用angular组件

官方文档地址: https://v14.material.angular.cn/components/icon/overview

1.项目入口的app.module.ts之中导入模块,用于注册svg

// svg 注册
import { MatIconRegistry } from '@angular/material/icon';
import { DomSanitizer } from '@angular/platform-browser';

2. 在导出AppModule的时候进行注册

export class AppModule {
  constructor(matIconRegistry: MatIconRegistry, domSanitizer: DomSanitizer) {
    matIconRegistry.addSvgIcon(
      'home', // 注册的svg的别名
      domSanitizer.bypassSecurityTrustResourceUrl('assets/icons/home.svg') // 注册的svg的路径
    );
   
  }
}

3. 注册完成之后的使用

使用mat-icon组件,可以通过svgIcon属性注入svg注册名