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

Question

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

Answer 1

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