Angular2 SVG xlink:href
<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>