title: Angular 4 - Adding a class & path to svg inside a component?
body: <p>How do I add a class and the path dynamically to a SVG in <strong>Angular 4</strong> when it's inside a component?</p>
  
  <p>In my component, when I paste the following code into the component template the icon works;</p>
  
  <pre><code>&lt;svg class="another-class iconId"&gt;
  
  &lt;use xlink:href="/icon-path/def.svg#iconId"&gt;&lt;/use&gt;
  
  &lt;/svg&gt;
  </code></pre>
  
  <p>But when I try to bind a class like this:</p>
  
  <pre><code>&lt;svg class="another-class {{iconId}}"&gt;
  
  &lt;use xlink:href="/icon-path/def.svg#{{iconId}}"&gt;&lt;/use&gt;
  
  &lt;/svg&gt;
  </code></pre>
  
  <p>I get errors: </p>
  
  <pre><code>Error: Template parse errors:
  Can't bind to ':xlink:href' since it isn't a known property of ':svg:use'
  </code></pre>
  
  <p>After searching around, I found suggestions to change the code to this:</p>
  
  <pre><code>&lt;svg class="another-class {{iconId}}"&gt;
  
  &lt;svg:use [attr.xlink:href]="/icon-path/def.svg#{{iconId}}"&gt;&lt;/svg:use&gt;
  
  &lt;/svg&gt;
  </code></pre>
  
  <p>With that I get the following error:</p>
  
  <pre><code>Uncaught (in promise): Error: Template parse errors:
  Parser Error: Got interpolation ({{}}) where expression was expected at column 30 in [/icon-path/def.svg#{{iconId}}]
  </code></pre>
  
  <p>What am I doing wrong here?</p>
  
  <p><strong>EDIT:</strong> Tried the following as Noodle suggested:</p>
  
  <pre><code>&lt;svg class="another-class {{iconId}}"&gt;
  
  &lt;use [attr.xlink:href]="'/icon-path/def.svg#' + iconId"&gt;&lt;/use&gt;
  
  &lt;/svg&gt;
  </code></pre>
  
  <p>Still getting the following error: </p>
  
  <pre><code>ERROR TypeError: Cannot assign to read only property 'className' of object '[object SVGSVGElement]'
  </code></pre>
  
  <p>In that code when I removed <code>{{iconId}}</code> from <code>&lt;svg class="another-class {{iconId}}"&gt;</code> there are no errors, but the svg icon doesn't show either.</p>