Angular2 SVG xlink:href

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="https://stackoverflow.com/questions/35082657/{{iconHref}}">

Update

Sanitization might cause issues.

See also

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.

Leave a Comment