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

  • 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.

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)