[SalesForce] Custom icons from static resource on not working

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?

Best Answer

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 :)

Related Topic