6

Trying to show custom icons from my static resource zip file using lightning:icon within a community, but it's not rendering the icons. It works for img tag, but I need to use fill to change the colour of the icons from css.

Sample Code:

<lightning:icon src="{!$Resource.StaticResource+'/y.svg'}"/> <!--not working--> <img src="{!$Resource.StaticResource+'/y.png'}"/> <!--works, but can't modify colour using fill css attribute-->

Not sure if using $Resource is the right approach but according to sf docs, I should be able to use it to reference path for a static resource asset https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/expr_resource_value_provider.htm

Also saw the documentation around showing custom icons in lightning:icon which shows that you need to specify the path to your icon, but I don't know what path to use for my static resource. https://developer.salesforce.com/docs/component-library/bundle/lightning:icon/documentation

<lightning:icon src="path/to/customSvgSprite.svg#my-icon"/>

found some old posts around using custom icons in lightning component, but they are already outdated:

How can I use custom svg icons in a lightning component?

Can we use SVG icons outside those provided by SLDS?

  • your path should be something like resource/STATICRESOURCEFILENAME/PATHTOSVG – Eric Jul 31 '18 at 3:17
  • @Eric, didn't work. again worked for <img> tag but not for <lightning:icon>, I thought there might be a different way of accessing static resources in communities which is related to this post: salesforce.stackexchange.com/questions/115772/… but it still didn't work for lightning:icon <lightning:icon src="/sfsites/c/resource/StaticResource/y.png"/> <img src="/sfsites/c/resource/StaticResource/y.png"/> – Sean Soriano Jul 31 '18 at 3:40
  • is the static resource public? – Eric Jul 31 '18 at 3:41
  • @Eric yes, it is public. – Sean Soriano Jul 31 '18 at 3:42
5

I had the same issue and ask in Trailblazer Community here.

I got the answer from Greg Rewis: "You need to have an id on the <g> element of the SVG. Then, simply concatenate the name together like this: <lightning:icon src="{! $Resource.sign + '#custIcon'}" alternativeText="My Custom Icon" />."

To do that, you need to open your svg file with a text editor, and you'll see something like this:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="120px" height="120px" viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <path d="M120,108 C120,114.6 114.6,120 108,120 L12,120 C5.4,120 0,114.6 0,108 L0,12 C0,5.4 5.4,0 12,0 L108,0 C114.6,0 120,5.4 120,12 L120,108 L120,108 Z" id="Shape" fill="#2A739E"/>
        <path d="M77.7383308,20 L61.1640113,20 L44.7300055,63.2000173 L56.0543288,63.2000173 L40,99.623291 L72.7458388,54.5871812 L60.907727,54.5871812 L77.7383308,20 Z" id="Path-1" fill="#FFFFFF"/>
    </g>
</svg>

Just add an id to the <g> tag, something like:

<g stroke="none" id="myAwesomeId" stroke-width="1" fill="none" fill-rule="evenodd">

And then add it to the name of your resource:

<lightning:icon src="{! $Resource.sign + '#myAwesomeId'}" alternativeText="My Custom Icon" />

Doc is supposed to be updated but you can add your voice to the thread :)

Also, I wasn't able to set the proper size to my svg as you'll see in the post, I'll be interested if you know how to do it :)

  • Thanks @Fabien, but I didn't get how to put an id on the g element of the svg. $Resource.<zipfilename> + '#custIcon'}", is the #custIcon the name of the svg file from the static resource zip file? – Sean Soriano Jul 31 '18 at 11:15
  • 1
    I've updated my answer :) – Fabien Taillon Jul 31 '18 at 11:36
  • worked, but got stuck with the same issue as yours. annoying – Sean Soriano Jul 31 '18 at 22:43
  • Feel free to add your voice to the Chatter post, maybe we’ll get an answer. – Fabien Taillon Jul 31 '18 at 22:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.