5

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>
18

I know it's a pretty old thread, but still would like to add:

  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>
  • 2
    Nothing wrong with answering old questions, ideally we'd like all questions on the site to get answers. – Dave Humm Jul 20 '17 at 9:05
  • 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 Jan 19 '18 at 1:05
  • it works, i just add /apexpages/slds/latest/ . If i copy directly from slds website it does not work . – unidha Mar 29 '18 at 8:05
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

  • could you provide an explanation rther than just dump code and mention it works for you? – glls Apr 18 '18 at 14:39
0

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.

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.