title: Render icons from an SVG file on HTML page
body: <p>I have an <code>icons.svg</code> file that seems to contain assets that I need to use in my Angular app.</p>
  <p>The file looks something like this (note, the <code>...</code> means omitted data due to security reasons):</p>
  <pre><code>&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot;&gt;&lt;defs&gt;
  &lt;path d=&quot;...&quot; id=&quot;o&quot;/&gt;&lt;/defs&gt;
  &lt;symbol id=&quot;icon-add-member-contain-heavy&quot; viewBox=&quot;0 0 64 64&quot;&gt;
  &lt;path d=&quot;B0 ... 4A3q&quot;/&gt;
  &lt;/symbol&gt;
  &lt;symbol id=&quot;icon-add-member-contain-light&quot; viewBox=&quot;0 0 64 64&quot;&gt;
  &lt;path d=&quot;A5 ... 2i5m&quot;
  
  ...
  ...
  .../&gt;&lt;/symbol&gt;&lt;/svg&gt;
  
  </code></pre>
  <p>I am trying to reference the file in my component HTML (as shown in the code below), but I don't know how to render an icon. I am guessing I need to use the <code>id</code>'s that are shown in the above svg code, like <code>id=&quot;icon-add-member-contain-heavy&quot;</code>?</p>
  <pre><code>    &lt;div&gt;
        &lt;img src=&quot;../../src/assets/icons.svg&quot;&gt;
      &lt;/div&gt;
  </code></pre>