Angular2 SVG xlink:href

Question

I have component for rendering SVG icon:

import {Component, Directive} from \'angular2/core\';
import {COMMON_DIRECT         


        

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

or

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.