title: How to inject SVG icon sprites in Angular component HTML DOM?
body: <p>I am building an Angular application (Angular 4/5/6) and would like to use SVG sprites in my component template. </p>
  
  <p><strong>Question:</strong>
  Assuming I already have my SVG icon sprite generated (<code>icons.svg</code>), how can I get Angular to inject/import my SVG icon sprite into my component's template? </p>
  
  <p>Is there a way to inject/import my SVG icon sprite into my component without having to use any 3rd party modules/directives and do it natively with Angular itself? </p>
  
  <p><strong>Background/Issue:</strong></p>
  
  <p>As discussed in <a href="https://css-tricks.com/svg-sprites-use-better-icon-fonts/" rel="noreferrer">this article</a>, <code>icons.svg</code> file would contain all the SVG icons defined as <code>&lt;symbol&gt;</code>. Then I can render selected icons in my HTML using <code>&lt;use&gt;</code> assuming the <code>icons.svg</code> is injected in the DOM. </p>
  
  <p>I generated SVG sprites using <a href="https://icomoon.io" rel="noreferrer">IcoMoon app</a>, and saved the <code>icons.svg</code> into my Angular application. Below is my sample Angular component (<em>app.component.ts</em>) in which I am trying to inject/import the <code>icons.svg</code> file and trying to render the SVG icons in my HTML. However, Angular is not rending my SVG icons. I seems I am incorrectly injecting the SVG icon sprite file.  </p>
  
  <p><strong>Updates:</strong> </p>
  
  <ol>
  <li>I am already aware of a similar question, <a href="https://stackoverflow.com/questions/41340133/svg-icon-system-with-angular-cli">SVG icon system with angular-cli</a>, where the suggested answer was to use the Node module <em><a href="https://www.npmjs.com/package/svg-sprite" rel="noreferrer">svg-sprite</a></em> to generate a SVG sprites using the CSS mode. However, this is NOT what I am asking. I am NOT trying to generate the SVG sprites. I am trying get Angular components to be aware of my SVG sprite, <code>icons.svg</code>, and get it to render them in the HTML whenever I make use of them.</li>
  <li>A solution was suggested,<a href="https://stackoverflow.com/a/50460361/4988010">https://stackoverflow.com/a/50460361/4988010</a>, to generate a CSS font from the SVG sprite. I feel this is NOT a feasible solution and instead is a "workaround" to not being able to use the SVG sprite. </li>
  </ol>
  
  <p><em>app.component.ts</em>: Live example on StackBlitz: <a href="https://stackblitz.com/edit/angular-bbr2kh?file=src/app/app.component.ts" rel="noreferrer">https://stackblitz.com/edit/angular-bbr2kh?file=src/app/app.component.ts</a> </p>
  
  <pre><code>import { Component } from '@angular/core';
  // import `./icons.svg`; // This import method doesn't work
  
  
  @Component({
    selector: 'my-app',
    template: `
  
     &lt;!-- This import method doesn't work --&gt;
     &lt;!-- &lt;script src="./icons.svg"&gt;&lt;/script&gt;  --&gt;
  
    &lt;p&gt;
    Hello this is a sample Angular 6 component.
    &lt;/p&gt;
  
    &lt;p&gt;Testing to see if SVG icon sprite import works. See below if icons appear. &lt;/p&gt;
    &lt;p&gt;Icon (home): &lt;svg class="icon icon-home"&gt;&lt;use xlink:href="#icon-home"&gt;&lt;/use&gt;&lt;/svg&gt; &lt;/p&gt;
    &lt;p&gt;Icon (rocket): &lt;svg class="icon icon-rocket"&gt;&lt;use xlink:href="#icon-rocket"&gt;&lt;/use&gt;&lt;/svg&gt; &lt;/p&gt;
    &lt;p&gt;Icon (wifi): &lt;svg class="icon icon-connection"&gt;&lt;use xlink:href="#icon-connection"&gt;&lt;/use&gt;&lt;/svg&gt;
  
    &lt;!-- This import method doesn't work --&gt;
    &lt;!-- &lt;p&gt;Icon (home): &lt;svg class="icon icon-home"&gt;&lt;use xlink:href="./icons.svg#icon-home"&gt;&lt;/use&gt;&lt;/svg&gt; &lt;/p&gt;--&gt;
  
     &lt;/p&gt;
    `,
    styles: [`
  
    .icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    stroke-width: 0;
    stroke: currentColor;
    fill: currentColor;
    }
  
    `]
  })
  export class AppComponent {
  }
  </code></pre>