5

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.

Improve this question
6
  • you using vf pages or component?
    – User6670
    Commented Feb 11, 2020 at 10:14
  • Inside a Lightning Web Component
    – Sander de Jong
    Commented 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
    Commented 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?
    – Sander de Jong
    Commented Feb 11, 2020 at 10:44
  • 1
    developer.salesforce.com/docs/component-library/tools/…
    – User6670
    Commented Feb 11, 2020 at 10:52

2 Answers 2

Reset to default
13

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.

Improve this answer
2

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

Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .