...
Use the Logo link rather than the Icon link.
Note: Logos as formulas don’t work inline due to the 20px bottom margin
...
But what about all the OTHER cool Salesforce Icons? https://www.lightningdesignsystem.com/icons/, well they are a bit harder - they are all SVGs themselves and for some strange reason they don’t display from the Visualforce page when it is saved as an SVG - probably because it’s recursive - it has an SVG and HTML inside an SVG).
...
So there is partly a way to use the Visualforce as SVG to use Salesforce Icons with this code.
| Code Block |
|---|
<apex:pagecontentTypepage contentType="image/svg+xml"> <svg xmlns="http://www.w3.org/2000/svg"> <image href="/apexpages/slds/latest/assets/icons/utility/connected_apps_120.png" x="0" y="0" height="50px" width="50px"/> </svg> </apex:page> |
...
You can download all the icons from this Lightning Design System page
httphttps://design-system-v-0-12-2.herokuappwww.lightningdesignsystem.com/resources/downloads/
And that tells you what the file names are, but not all of them work.
...
| Warning |
|---|
Alas, I can’t get the Trailhead icon or the Astro icon to work! |
You could use this github repo site https://githubwww.salesforceicons.com/CodeScience/SLDS-icon-font/tree/master/dist/assets/icons/utility to find what the names would most likely be, but just test it out. Take your base domain, add /apexpages/slds/latest/ then grab the “/assets/icons/utility/announcement_60.png” from the URL from that repo and see if it displays something.
...
Now, unfortunately the Utility Icons are grey and boring as PNGs and the doctype icons are very limited, so you are back to sourcing these icons from outside of Salesforce if you don’t want to download them yourself, convert them to the coloured PNGs and upload them to the Assets File Library and mark them as shareable and then get the very long URL. Nope, all to hard (yes, you can do Document Library and / or Static Resource, but I’m just trying to demonstrate the “Lightning Way”). Shun has done that for you and is hosting them on a Heroku repo,
So you could do something like
| Code Block |
|---|
<apex:pagecontentType="image/svg+xml">
<svg xmlns="http://www.w3.org/2000/svg">
<image href="http://lds-png-icons.herokuapp.com/icons/custom/custom97.png" x="0" y="0" height="50px" width="50px"/>
</svg>
</apex:page> |
or even just
| Code Block |
|---|
IMAGE("http://lds-png-icons.herokuapp.com/icons/custom/custom97.png", "Thermometer", 50, 50) |
But remember with any external site there is no guarantee that it will be there in future. So there is not a fabulous answer to having all those SLDS icons in your Salesforce formulas easily, but you have a few options if you just want the utility or doctype icons. Otherwise there is a heap of icon resources over on the Actions Examples page.
| Note |
|---|
NOTE, I am not mentioning anything about load times of pages or load times of various options. That’s up to you to determine if doing anything with images is worth it for your scenarios. |
Inline Images
Note: Logos or Icons as formulas or SVGs don’t work inline due to the 20px bottom margin. And the SVGs don’t render that small.
...
So just use Emojis for those.
Alternative - SVG Text
Displaying bold coloured text in a formula. This is a little different to the above code and I could make it work for both.
...