title: Angular 2 - how do I data bind an SVG attribute to a component property?
body: <p>I'm learning Angular 2. For that, I'm trynig to create basic example.</p>
  
  <p>I have a class with a variable that contains this string: <code>M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z</code></p>
  
  <p>I'm trying to use that string as a parameter for a svg element</p>
  
  <p>Just to check:</p>
  
  <p>This svg works:</p>
  
  <pre><code>&lt;svg fill="white" height="64" width="64"&gt;
      &lt;path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>The variable <code>icon</code> in the template contains the correct string. I'm trying to do like this:</p>
  
  <pre><code>&lt;svg fill="black" height="24" width="24"&gt;
    &lt;path d={ icon } /&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>And Adding <code>"</code> to the parameter <code>d</code>. But I cannot make it work</p>