Salesforce Stack Exchange is a question and answer site for Salesforce administrators, implementation experts, developers and anybody in-between. It only takes a minute to sign up.
Sign up to join this community
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
And this is how it displays on another website via Lightning Out:
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.
Using the Network Panel via Browser Console, locate the reference to the icon(s)
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 
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.
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.
Reload/Refresh the browser, the icon should appear
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 !
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
<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>
