I have an Angular 1.5 application that communicate with Salesforce using REST API.
Salesforce require us to use SVG icons with the following syntax:
<svg aria-hidden="true" class="slds-icon slds-icon--large slds-icon-standard-user">
<use xlink:href="{!URLFOR($Asset.SLDS, 'assets/icons/standard-sprite/svg/symbols.svg#user')}"></use>
</svg>
In salesforce does work well.
I'm trying to use locally in order to develop but does not work. I tried the following code:
<svg aria-hidden="true" class="slds-icon slds-icon--large slds-icon-standard-user">
<use xlink:href="/path/to/the/icon.svg"></use>
</svg>
According to this documentation we need to add within the HTML element the following code:
<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
But no luck! :(
Any idea to use SVG with those tags and refer to a local file?
file://
scheme? If so, if you are testing on Chrome, it may not work due to security features of the browser. Try Firefox instead.