4

For some reason lightning:icon is not displaying the svg in Lightning Out. I tried also lightning:buttonIcon and lightning:button with icon.

Here is my ActivityTimeline (custom component) which uses lightning:icon, this is how it looks like when ran in .app

enter image description here

And this is how it displays on another website via Lightning Out: enter image description here

  • My quick and dirty workaround was to use the .png pictures contained in the SLDS and I just packed them and uploaded as a static resource. – G Takei Mar 27 '18 at 9:46
  • Have you raised a case about this? If you could link it, I'm more than happy to upvote it! – Chris Jan 24 '19 at 13:59
3

The issue is exactly what Tony outlined above. Until this has been officially fixed by Salesforce, I suggest you move the SLDS folder to the location that's being referenced by the browser/server.

  1. Using the Network Panel via Browser Console, locate the reference to the icon(s)Icon/Symbol via Network Panel

  2. Click on the item to view its "Request URL". Something to note, the server location will be the location of your hosting server, not salesforce. And, the resource folder name may differ, e.g. _slds Request URL Snippet NOTE: I've replaced MY server info with placeholder text. NOTE: The _slds folder may be nested within a parent folder, e.g. ParentFolder/_slds/. If this is the case, you'll need to create the Parent Folder in step #3 also.

  3. After you've obtained the location, move the SLDS folder to the location copied in step #2. If the resource name differs, rename the SLDS folder to match.

  4. Reload/Refresh the browser, the icon should appear

  • 1
    Had the same issue I have copied the slds icons resource into a folder called _slds and solved the problem... now my icons are displayed on lightning out app - Seems like it is an issue which need to be addressed by Salesforce but at least there is a workaround. thanks! – sfdx bomb Feb 4 '19 at 20:17
1

I am facing a similar issue. I noticed that the request to get the icons is wrongly pointed to host page server instead of the Salesforce org :

Request URL: http://localhost:8080/_slds/icons/utility-sprite/svg/symbols.svg?cache=8.2.0

While in my org it looks like this:

https://<myOrg>.lightning.force.com/_slds/icons/utility-sprite/svg/symbols.svg?cache=8.2.0

It could be a Lightning Out bug since the request initiator is service.js, a file served by Salesforce.

I will update my answer if I find a solution to the issue !

  • Indeed, I believe we just need to wait for a fix. I had a workaround to just use the .png version of the icons provided in the SLDS and refer to them from static resource. – G Takei Mar 27 '18 at 9:48
0

Similar to tony, another option is to instead of opening the png, is to go directly to the svg link in a new tab(not the one in -sprite folder).

So for instance, my link to the svg of accounts is:

http://localhost/www/lightning/assets/icons/standard/account.svg

instead of

http://localhost/www/lightning/assets/icons/standard/account_60.png

then if you go to inspect (be aware that you will not see anything in the page as the svg background is white) you will have the svg code, you can then copy and paste it into the page

enter image description here

<span class="slds-icon_container slds-icon-standard-account" title="account">
        <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 100 100"><g fill="#FFFFFF"><path d="m79 51.1c0.1-2.1-1.4-2.7-2-2.7h-21.8c-1.9 0-2.2 2-2.2 2.2v23.4h26v-22.9z m-15 16.8c0 1.1-0.9 2-2 2h-2c-1.1 0-2-0.9-2-2v-2c0-1.1 0.9-2 2-2h2c1.1 0 2 0.9 2 2v2z m0-10.2c0 1.1-0.9 2-2 2h-2c-1.1 0-2-0.9-2-2v-2c0-1.1 0.9-2 2-2h2c1.1 0 2 0.9 2 2v2z m10 10.2c0 1.1-0.9 2-2 2h-2c-1.1 0-2-0.9-2-2v-2c0-1.1 0.9-2 2-2h2c1.1 0 2 0.9 2 2v2z m0-10.2c0 1.1-0.9 2-2 2h-2c-1.1 0-2-0.9-2-2v-2c0-1.1 0.9-2 2-2h2c1.1 0 2 0.9 2 2v2z m-15-17.4v-11.6c0.1-2.1-1.4-2.7-2-2.7h-33.8c-1.9 0-2.2 2-2.2 2.2v45.8h26v-29.3s0-2.4 2.2-2.4h7.9s1.9-1.2 1.9-2z m-27 26.6c0 1.1-0.9 2-2 2h-2c-1.1 0-2-0.9-2-2v-2c0-1.1 0.9-2 2-2h2c1.1 0 2 0.9 2 2v2z m0-10.3c0 1.1-0.9 2-2 2h-2c-1.1 0-2-0.9-2-2v-2c0-1.1 0.9-2 2-2h2c1.1 0 2 0.9 2 2v2z m0-10.2c0 1.1-0.9 2-2 2h-2c-1.1 0-2-0.9-2-2v-2c0-1.1 0.9-2 2-2h2c1.1 0 2 0.9 2 2v2z m0-10.2c0 1.1-0.9 2-2 2h-2c-1.1 0-2-0.9-2-2v-2c0-1.1 0.9-2 2-2h2c1.1 0 2 0.9 2 2v2z m11 30.7c0 1.1-0.9 2-2 2h-2c-1.1 0-2-0.9-2-2v-2c0-1.1 0.9-2 2-2h2c1.1 0 2 0.9 2 2v2z m0-10.3c0 1.1-0.9 2-2 2h-2c-1.1 0-2-0.9-2-2v-2c0-1.1 0.9-2 2-2h2c1.1 0 2 0.9 2 2v2z m0-10.2c0 1.1-0.9 2-2 2h-2c-1.1 0-2-0.9-2-2v-2c0-1.1 0.9-2 2-2h2c1.1 0 2 0.9 2 2v2z m0-10.2c0 1.1-0.9 2-2 2h-2c-1.1 0-2-0.9-2-2v-2c0-1.1 0.9-2 2-2h2c1.1 0 2 0.9 2 2v2z m11 0c0 1.1-0.9 2-2 2h-2c-1.1 0-2-0.9-2-2v-2c0-1.1 0.9-2 2-2h2c1.1 0 2 0.9 2 2v2z"/></g></svg>
</span>

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.