Custom lightning-icon won’t render properly

lightning-web-componentsstatic-resourcessvg-icon

I'm trying to add a custom lightning-icon to my experience cloud lwc module, but I can't make it render properly. The custom icon is basically a blue background color with a white dash on the middle.

I followed the steps described here: https://developer.salesforce.com/docs/component-library/bundle/lightning-icon/documentation

I've uploaded an .svg image with a tag containing an id as a static resource, just like the documentation said, but the image will render only the blue color without anything else. Then, I change the .svg file (as I had noticed that the first image I had uploaded was square, instead of circular), and now the icon won't render at all.

If I try to open the file from the static resource on my org settings it will show the image properly.

Best Answer

this could be a problem of referencing your static resources in the component module of lwc.But you observe that the icon is visible when opening in personal org environment, that means your static resource may not be "public" in its cache control settings.

Go to Setup-->static resource---> Open your static resource file---> Click Edit and re-upload it---> Select "Public" in the cache control settings dropdown and Save!

Related Solutions

[SalesForce] Lightning Design System SVG Path Issues

for icons I would recommend using standard salesforce provided components instead:

<lightning:icon iconName="utility:right"/>

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/

[SalesForce] Custom icons from static resource on not working

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

Best Answer

Related Solutions

[SalesForce] Lightning Design System SVG Path Issues

[SalesForce] Custom icons from static resource on not working

Related Topic