angular6添加material-svgIcon

1. app/assets/util/util.svg.ts

  统一管理svg字体库，避免各个模块分散加载。所以使用公共文件统一处理
  再到core.module.ts中引入。在core模块下的所有组价都可以使用svg，不用单独加载

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

 // 统一管理svg字体库，避免各个模块分散加载。所以使用公共文件统一处理
 // 再到core.module.ts中引入。在core模块下的所有组价都可以使用svg，不用单独加载
 export const loadSvgsources = (ir:MatIconRegistry,ds:DomSanitizer) => {
     const imgDir = 'assets/img';
     const sidebarDir = `${imgDir}/sidebar`;
     ir.addSvgIcon('day',ds.bypassSecurityTrustResourceUrl(`${sidebarDir}/day.svg`));
     ir.addSvgIcon('month',ds.bypassSecurityTrustResourceUrl(`${sidebarDir}/month.svg`));
     ir.addSvgIcon('project',ds.bypassSecurityTrustResourceUrl(`${sidebarDir}/project.svg`));
     ir.addSvgIcon('projects',ds.bypassSecurityTrustResourceUrl(`${sidebarDir}/projects.svg`));
     ir.addSvgIcon('week',ds.bypassSecurityTrustResourceUrl(`${sidebarDir}/week.svg`));
     const days = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31];
     const dayDir = `${imgDir}/days`;
     days.forEach(d=>ir.addSvgIcon(`day${d}`,ds.bypassSecurityTrustResourceUrl(`${dayDir}/day${d}.svg`)));

     // 增加一个svg图标集合
     const avatarDir = `${imgDir}/avatar`;
     ir.addSvgIconSetInNamespace('avatars',ds.bypassSecurityTrustResourceUrl(`${avatarDir}/avatars.svg`));
 }

2. 再到核心模块core.module.ts中引入并使用loadSvgsources(ir,ds)方法加载所有的svg;

。

import { NgModule, Optional, SkipSelf } from '@angular/core';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
import { SidebarComponent } from './sidebar/sidebar.component';
import { SharedModule } from '../shared/shared.module';
import { MatIconRegistry } from '@angular/material';
import { DomSanitizer } from '@angular/platform-browser';
import { loadSvgsources } from '../util/util.svg';

@NgModule({
  imports: [
    SharedModule
  ],
  exports:[
    SharedModule,
    HeaderComponent,
    FooterComponent,
    SidebarComponent
  ],
  declarations: [HeaderComponent, FooterComponent, SidebarComponent]
})
export class CoreModule {
  constructor(
    @Optional() @SkipSelf() parent:CoreModule,
    ir:MatIconRegistry,
    ds:DomSanitizer
  ){
    if(parent){
      throw new Error('模块以及存在，不能再次加载');
    }
    loadSvgsources(ir,ds);
  }
}

3. 在html模板中使用

　A：当avatar.svg一个文件，里面是一个集合的时候用法。

[util.svg.ts中定义的名称] + ‘:’ + [svg的ID号]

<mat-icon svgIcon="avatars:svg-1"></mat-icon>

B：非集合单独文件标签用法。

<mat-icon svgIcon="week"></mat-icon>

<mat-icon svgIcon="month"></mat-icon>