Custom icons from static resource on <lightning:icon> not working

Question

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?

Answer 1

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

Answer 2

I managed to add multiple icons (in the same svg) in a zipped static resource. This is what I did

Svg file configuration

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <symbol viewBox="0 0 260 260" fill-rule="evenodd" id="example1">
            <path d="m129.5,9.5c-66.3,0 -120,53.7 -120,120s53.7,120 120,120s120,-53.7 120,-120s-53.7,-120 -120,-120zm50,130.5l-40.5,0l0,50l-20,0l0,-50l-50,0l0,-20l50,0l0,-50l20,0l0,50l60.5,0l-20,20z"/>
        </symbol>
        <symbol viewBox="0 0 260 260" fill-rule="evenodd" id="example2">
            <g>
                <path d="m185.25,109.75a84.71,84.71 0 0 1 24.75,3.69l0,-93.44a10,10 0 0 0 -9.93,-10l-10.07,0l-10,10l-10,0l0,-10l-10,0l-10,10l-10,0l0,-10l-10,0l-10,10l-10,0l0,-10l-10,0l-10,10l-10,0l0,-10l-10,0l-10,10l-10,0l0,-10l-10.07,0a10,10 0 0 0 -9.93,10l0,220a10,10 0 0 0 9.93,10l10.07,0l10,-10l10,0l0,10l10,0l10,-10l10,0l0,10l10,0l6,-6a84.93,84.93 0 0 1 69.23,-134.23l0.02,-0.02zm-125.25,-49.75l110,0l-20,20l-90,0l0,-20zm0,80l0,-20l80,0l-20,20l-60,0z" class="cls-1"/>
                <path d="m185,130a65,65 0 1 0 65,65a65,65 0 0 0 -65,-65zm33.33,73.12l-25.2,0l0,31.88l-16.25,0l0,-31.88l-31.88,0l0,-16.25l31.88,0l0,-31.87l16.25,0l0,31.87l31.87,0l-6.67,16.25z" class="cls-1"/>
            </g>
        </symbol>
    </defs>
</svg>

Aura Component

<lightning:icon src="{!$Resource.Static1 + '/icons/icons.svg#example1'}"
                size="x-small" class="grey-icon flip" />
<lightning:icon src="{!$Resource.Static1 + '/icons/icons.svg#example2'}"
                size="x-small" class="grey-icon flip" />

Wich results in this example.

For the ones with the size issue, I think it must be an incorrect configuration of the viewBox of the icon

Answer 3

And for everyone, who want to enlarge the lightning icon, you can add this to your css: --lwc-squareIconMediumContentAlt: 24px; if the required size is standard 24 px