I am trying to display an icon in a lightning component using LDS. I setup the svg helper, component, and renderer as per the LDS docs here. I also have a static resource stored in SalesForce. I am trying to reference it like this:
<c:svgIcon svgPath="/resource/sldsRight.png" category="standard" size="small" />
However, the icon does not appear. Is my path wrong, or do I have the wrong file type?
I just experimented and it successfully renders once you publish the community
I think since community builder gets previewed from different domain ,this seems like a bug to me in the builder .I will bring this to attention to SFDC community product team but rest assured once you publish community it appears just fine.
This is not a Lightning issue, but a browser compatibility issue. IE 9-11 does not support external resources for svgs (e.g. the use tag with an xlink:href), so writing this inline is the best option. There are some really nasty hacks available online, such as https://github.com/jonathantneal/svg4everybody, but I would not recommend use of this library. If you do use it, please refactor it to address the XSS issues below, be sure to hook it into a renderer, and you'll have to find some creative solution on your to this running outside the framework's lifecycle. E.g. the framework is going to think that your image is fully rendered as soon as you make the callout, when it won't actually be on the page yet. Also, I don't know if this approach is guaranteed to work in future versions of Lightning because of how it uses xhrs, and really putting the SVG data inline yourself is going to be much easier and faster that initiating an async xhr call to pull the data from static resources and then re-writing the document to put the data in-line in an unsafe way.
For other browsers, please try to avoid the use of innerHTML with string attributes as they become an XSS sink. You don't need innerHTML here, you can build up the element with DOM accessors, such as createElement(), setAttribute(), and appendChild(). That avoids possible ambiguities in html parsing of strings, particularly as you don't have any native JS and html encoding libraries available to you in Lightning.
href is an XSS sink because of javascript pseudo-schemes (xlink:href="javascript:payload" will cause the payload to execute), so please verify that what goes into href starts with 'https://' if it is an absolute URL or "/" if it is a relative URL. This is true for a href as well as other attributes such as frame src="". For a more complete list of unsafe attributes (there are many), look here: https://html5sec.org/
Best Answer
for icons I would recommend using standard salesforce provided components instead:
https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/aura_compref_lightning_icon.htm
linked to the icons in that doc -
https://lightningdesignsystem.com/icons/