How to inject SVG icon sprites in Angular component HTML DOM?

前端 未结 4 2205
失恋的感觉
失恋的感觉 2021-02-15 22:38

I am building an Angular application (Angular 4/5/6) and would like to use SVG sprites in my component template.

Question: Assuming I already have my S

4条回答
  •  囚心锁ツ
    2021-02-15 22:49

    I solved this issue using angular material icon.

    Angular material injects the SVG by id and without shadow-dom.

    first install angular material:

    "@angular/material": "^7.3.7", // change version according to your angular version 
    

    Import to your module:

    MatIconModule
    

    Then declare your SVG sprite in the app.component or service..

        constructor(
            private matIconRegistry: MatIconRegistry,
            private domSanitizer: DomSanitizer) { 
    matIconRegistry.addSvgIconSet(this.domSanitizer.bypassSecurityTrustResourceUrl(`assets/sprite.svg`));
            }
    

    And last, In Html use angular material icon:

     // or use as directive 

    Read more here

提交回复
热议问题