3

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.

6
  • you using vf pages or component?
    – User6670
    Feb 11, 2020 at 10:14
  • Inside a Lightning Web Component Feb 11, 2020 at 10:25
  • why not simply use lightning input of type seacrh or lightning icon if you want to make custom.
    – User6670
    Feb 11, 2020 at 10:30
  • I thought I was using the standard search input text. Forgive me, I am a newbie in LWC development. To which component are you referring? Feb 11, 2020 at 10:44
  • 1

2 Answers 2

6

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.

0

When trying to obtain the proper URL for lightning icons from a Visualforce page, the correct syntax is as follows:

{!URLFOR($Asset.SLDS, '/icons/utility-sprite/svg/symbols.svg#search')}

Please see the Visualforce Developer Guide for more information: https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_variables_global_asset.htm

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.