title: Angular2 SVG xlink:href
body: <p>I have component for rendering SVG icon:</p>
  
  <pre class="lang-ts prettyprint-override"><code>import {Component, Directive} from 'angular2/core';
  import {COMMON_DIRECTIVES} from 'angular2/common';
  
  @Component({
    selector: '[icon]',
    directives: [COMMON_DIRECTIVES],
    template: `&lt;svg role="img" class="o-icon o-icon--large"&gt;
                  &lt;use [xlink:href]="iconHref"&gt;&lt;/use&gt;
                &lt;/svg&gt;{{ innerText }}`
  })
  export class Icon {
    iconHref: string = 'icons/icons.svg#menu-dashboard';
    innerText: string = 'Dashboard';
  }
  </code></pre>
  
  <p>This triggers error:</p>
  
  <pre class="lang-ts prettyprint-override"><code>EXCEPTION: Template parse errors:
    Can't bind to 'xlink:href' since it isn't a known native property ("&lt;svg role="img" class="o-icon o-icon--large"&gt;
  &lt;use [ERROR -&gt;][xlink:href]=iconHref&gt;&lt;/use&gt;
    &lt;/svg&gt;{{ innerText }}"): SvgIcon@1:21
  </code></pre>
  
  <p>How do I set dynamic <code>xlink:href</code>? </p>