11

Script 1: Does not Work

<apex:page >
    <apex:stylesheet value="{!URLFOR($Resource.slds221, 'assets/styles/salesforce-lightning-design-system.min.css')}"/>
    <svg aria-hidden="true" class="slds-icon slds-icon--x-small slds-icon-text-default slds-is-sortable__icon">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{!URLFOR($Resource.slds221, 'assets/icons/utility-sprite/svg/symbols.svg#email')}"></use>
    </svg>
</apex:page>

I can't see any icon on my page. However when I remove stylesheet reference it renders fine. What am I missing

Script 2: This Works (Removed slds-static reference)

<apex:page >
    <svg aria-hidden="true" class="slds-icon slds-icon--x-small slds-icon-text-default slds-is-sortable__icon">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{!URLFOR($Resource.slds221, 'assets/icons/utility-sprite/svg/symbols.svg#email')}"></use>
    </svg>
</apex:page>
Improve this question

3 Answers 3

Reset to default
25

  1. You don't need to add lightning css as static resource. Just include this tag on top of your VF page: <apex:slds />.

  2. Pass the icon reference directly as shown below:

     /apexpages/slds/latest/assets/icons/standard-sprite/svg/symbols.svg#opportunity

Example:

<use xmlns:xlink="http://www.w3.org/1999/xlink" 
    xlink:href="/apexpages/slds/latest/assets/icons/standard-sprite/svg/symbols.svg#opportunity">
</use>
Improve this answer
4
  • I cant still make it work, is any special tag needed? I already have <apex:slds /> and <html xmlns="w3.org/2000/svg" xmlns:xlink="w3.org/1999/xlink"> and page tag looks <apex:page showHeader="false" standardStylesheets="false" sidebar="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0"> body tag: <body class="slds-scope"> any ideas what i am missing
    – manza
    Commented Jan 19, 2018 at 1:05
  • 2
    it works, i just add /apexpages/slds/latest/ . If i copy directly from slds website it does not work .
    – unidha
    Commented Mar 29, 2018 at 8:05
  • 2
    Although using the absolute path to the assets works now, if ever the location of the SLDS assets moves, these paths will 404. That's why the recommended method is to use !URLFOR($Asset.SLDS, '…asset path…')
    – Lounge9
    Commented Jul 10, 2020 at 21:46
  • The 'xmlns:xlink="w3.org/1999/xlink" ' part in 'use' tag fixed the error.
    – Andrii Muzychuk
    Commented Aug 15, 2021 at 13:35
5

The current correct method to reference images and icons is to use the !URLFOR($Asset.SLDS, '…asset path…') method as shown in this Trailhead. 

<span class="slds-icon_container slds-icon-standard-opportunity" title="Description of icon when needed">
    <svg class="slds-icon slds-page-header__icon" aria-hidden="true">
        <use 
            xmlns:xlink="http://www.w3.org/1999/xlink"
            xlink:href="{!URLFOR($Asset.SLDS, 'assets/icons/standard-sprite/svg/symbols.svg#opportunity')}"
        />
    </svg>
</span>

The asset path to enter as the second argument can be determined several ways.

  • If the asset you want is included in the Lightning Design System Component Blueprint HTML you're using, just take the xlink:href value and remove the leading slash /.

  • Another away is downloading the Lightning Design System ZIP from the Design System site. The folder structure within the ZIP appears to be the same as the paths to the hosted assets. At least that's how I figure it out :)

  • Finally, for icons, the linked Trailhead, also provides a method.

Improve this answer
0
0

I know its an old question but this code works for me:

<span class="slds-icon_container slds-icon-standard-announcement"> 
    <svg aria-hidden="true" class="slds-icon"
         xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <use xlink:href="/apexpages/slds/latest/assets/icons/standard-sprite/svg/symbols.svg#announcement"></use>
    </svg>   
    <span class="slds-assistive-text">Announcement</span>
</span>

You don't necessarily need 'svg' in your static resource instead you can use a category sprite and choose appropriate icon as mentioned in above answer. However you need to add:

xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink"

to your html tags(svg) as mentioned in https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/vf_dev_best_practices_slds_icons.htm

Improve this answer
0

You must log in to answer this question.

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