I am trying to include an icon in my svg graphic and I need to pass the icon path in as a variable as the icon will change depending on which graphic I am displaying. I have tried the code below:
<ng-template #nodeTemplate let-node>
<svg:g *ngIf="node.iconUrl" class="node"
ngx-tooltip
[tooltipPlacement]="'top'"
[tooltipType]="'tooltip'"
[tooltipTitle]="node.position"
>
<svg:rect [attr.width]="node.width + 30" [attr.height]="node.height + 10" [attr.fill]="node.options.color" stroke="#000000"/>
<svg:image xlink:href="{{node.iconUrl}}"
[attr.x]="10" [attr.y]="(node.height / 2) - 5" height="20" width="20"/>
<svg:text alignment-baseline="central" [attr.x]="35" [attr.y]="(node.height / 2) + 5">{{node.label}} - {{node.iconUrl}}</svg:text>
</svg:g>
</ng-template>
However, this gives me a console error (I'm just including the first few lines):
Uncaught Error: Template parse errors: Can't bind to ':xlink:href' since it isn't a known property of ':svg:image'. ("ttr.height]="node.height + 10" [attr.fill]="node.options.color" stroke="#000000"/> ]xlink:href="{{node.iconUrl}}" [attr.x]="10" [attr.y]="(node.height / 2) - 5" height="20" wid"): ng:///AppModule/GraphComponent.html@27:17
I have also tried taking out the braces in the image tag (xlink:href="node.iconUrl") but the variable name just comes through into the html rather than the value. I display the variable value as part of the svg text and that works fine so the value is getting set correctly.
Is there something that I can change to have the variable value be passed in correctly?
