angular - Angular2 SVG xlink:href -

i have component rendering svg icon:

import {component, directive} 'angular2/core'; import {common_directives} 'angular2/common';  @component({   selector: '[icon]',   directives: [common_directives],   template: `<svg role="img" class="o-icon o-icon--large">                 <use [xlink:href]="iconhref"></use>               </svg>{{ innertext }}` }) export class icon {   iconhref: string = 'icons/icons.svg#menu-dashboard';   innertext: string = 'dashboard'; } 

this triggers error:

exception: template parse errors:   can't bind 'xlink:href' since isn't known native property ("<svg role="img" class="o-icon o-icon--large"> <use [error ->][xlink:href]=iconhref></use>   </svg>{{ innertext }}"): svgicon@1:21 

how set dynamic xlink:href?

svg elements doen't have properties, therefore attribute binding required of time (see properties , attributes in html).

for attribute binding need

<use [attr.xlink:href]="iconhref"> 

or

<use attr.xlink:href="{{iconhref}}"> 

update

sanitization might cause issues.

see also

• https://github.com/angular/angular/issues/9510)
• https://angular.io/docs/ts/latest/api/platform-browser/index/domsanitizationservice-class.html

update domsanitizationservice going renamed domsanitizer in rc.6

update should fixed

but there open issue support namespaced attributes https://github.com/angular/angular/pull/6363/files

as work-around add additional

xlink:href="" 

angular can update attribute has issues adding.

if xlink:href property syntax should work after pr added well.