Angular2 SVG xlink:href

Question

I have component for rendering SVG icon:

import {Component, Directive} from 'angular2/core'; import {COMMON_DIRECTIVES} from '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 to 'xlink:href' since it isn't a known native property ("<svg role="img" class="o-icon o-icon--large"> <use [ERROR ->][xlink:href]=iconHref></use>   </svg>{{ innerText }}"): SvgIcon@1:21 

How do I set dynamic xlink:href?

Answer 1

SVG elements doen't have properties, therefore attribute binding is required most of the time (see also Properties and Attributes in HTML).

For attribute binding you 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 is going to be renamed to DomSanitizer in RC.6

Update this should be fixed

but there is an open issue to support this for namespaced attributes https://github.com/angular/angular/pull/6363/files

As work-around add an additional

xlink:href="" 

Angular can update the attribute but has issues with adding.

If xlink:href is actually a property then your syntax should work after the PR was added as well.