[SalesForce] the path to Lightning SVG icons in a sandbox

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:

<div class="slds-form-element">
    <label class="slds-form-element__label" for="text-input-id-1">Input Label</label>
    <div class="slds-form-element__control slds-input-has-icon slds-input-has-icon_right">
        <svg class="slds-icon slds-input__icon slds-input__icon_right slds-icon-text-default" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#search"></use>
        </svg>
        <input type="text" id="text-input-id-1" placeholder="Placeholder Text" class="slds-input" />
    </div>
</div>

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.

Best Answer

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

Lightning

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:buttonIcon, 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.

Related Solutions

[SalesForce] Difficulty displaying an Input with Icon using Lightning Design System

In this line of code, this path should refer to your SLDS library which you uploaded in Static resources.

<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#search"></use>

For example:

<use xlink:href="{!URLFOR($Resource.SLDS100, '/assets/icons/custom-sprite/svg/symbols.svg#custom3')}" />

[SalesForce] Can we use SVG icons outside those provided by SLDS

In your component markup put the SVG inside an CDATA container and surround it with DIV giving an aura:id.

<div aura:id="svg_content">
<![CDATA[
    <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>
]]>
</div>

Then in the renderer.js for the component, override the afterRender method:

afterRender: function(component, helper) {
    this.superAfterRender();
    var svg = component.find("svg_content");
    var value = svg.getElement().innerText;
    value = value.replace("<![CDATA[", "").replace("]]>", "");
    svg.getElement().innerHTML = value;        
}

This is a workaround that works for any SVGs outside of those provided by SLDS.