angular6添加material-svgIcon

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

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

 1 import { MatIconRegistry } from "@angular/material";
 2 import { DomSanitizer } from "@angular/platform-browser";
 3 
 4 // 统一管理svg字体库，避免各个模块分散加载。所以使用公共文件统一处理
 5 // 再到core.module.ts中引入。在core模块下的所有组价都可以使用svg，不用单独加载
 6 export const loadSvgsources = (ir:MatIconRegistry,ds:DomSanitizer) => {
 7     const imgDir = 'assets/img';
 8     const sidebarDir = `${imgDir}/sidebar`;
 9     ir.addSvgIcon('day',ds.bypassSecurityTrustResourceUrl(`${sidebarDir}/day.svg`));
10     ir.addSvgIcon('month',ds.bypassSecurityTrustResourceUrl(`${sidebarDir}/month.svg`));
11     ir.addSvgIcon('project',ds.bypassSecurityTrustResourceUrl(`${sidebarDir}/project.svg`));
12     ir.addSvgIcon('projects',ds.bypassSecurityTrustResourceUrl(`${sidebarDir}/projects.svg`));
13     ir.addSvgIcon('week',ds.bypassSecurityTrustResourceUrl(`${sidebarDir}/week.svg`));
14     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];
15     const dayDir = `${imgDir}/days`;
16     days.forEach(d=>ir.addSvgIcon(`day${d}`,ds.bypassSecurityTrustResourceUrl(`${dayDir}/day${d}.svg`)));
17 
18     // 增加一个svg图标集合
19     const avatarDir = `${imgDir}/avatar`;
20     ir.addSvgIconSetInNamespace('avatars',ds.bypassSecurityTrustResourceUrl(`${avatarDir}/avatars.svg`));
21 }

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模板中使用

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

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