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>