What is the path to Lightning SVG icons in a sandbox?

1.5K Asked by JamesSCOTT in Web-development , Asked on Jul 29, 2021

So far I have found and tried three paths, but none of them is resulting in an icon being displayed.

I am using this code, provided by Salesforce:


    Input Label
              <input type="text" id="text-input-id-1" placeholder="Placeholder Text" class="slds-input" fdprocessedid="jpg9ib">

But it doesn't display any icon. With googling I found other paths:
{!URLFOR($Resource.SLDS213, 'assets/icons/standard-sprite/svg/symbols.svg#search'}
/resource/slds214/assets/icons/standard-sprite/svg/symbols.svg#search
I am doing this in a Spring '20 sandbox.

Answered by Karan Trivedi

There are two locations, one for LightningSVG, and one for Visualforce.

Lightning SVG

Here is the path to Lightning SVG icons in a sandbox:

Replace the /assets/ of any URL in the Lightning Design System with /_slds/. Example:

          /_slds/icons/utility-sprite/svg/symbols.svg#search

Note: It is strongly recommended that you simply use lightning: icon, lightning: button icon, etc when using SLDS in a supported environment.

Visualforce

Add /apexpages/slds/latest to the beginning of the URL. Example:

          /apexpages/slds/latest/assets/icons/utility-sprite/svg/symbols.svg#search

I would recommend using Lightning Out instead of plain Visualforce in order to provide a migration path forward to Lightning, but you can use that resource as a stopgap to allow your Visualforce pages to operate whilst migrating your code to Lightning.

What is the path to Lightning SVG icons in a sandbox?

Your Answer