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.