It's great that stylesheets are included by default in lightning experiencem but where do we access the icon svg resources. Lightning experience loads the svg in what looks like a different way than we are provided with.

For example a lead icon url looks like this: "https://cs62.salesforce.com/img/icon/t4v35/standard/lead_120.png" how can we get access to the standard svg icons without loading static resources or is it best practice to load them from a static resource?

  • I haven't found any documentation otherwise, so I've personally have been using static resources, but it'd be awesome if there were a better way.
    – sfdcfox
    Nov 10 '16 at 19:18
  • 2
    It seems like the lightning:icon component is the only way to get access to the path, it would be nice if they exposed the method they're using to get the path for the component :) it looks like there's some kind of versioning going on Nov 10 '16 at 20:14

You can call all SLDS icons using this method as defined in the lightning component developer guide. Which means you do not need to call from static resource as long as you are working in lightning.

    <lightning:icon iconName="action:approval" size="large" alternativeText="Indicates approval"/>

To see the list of icons and what short code to use, refer to the main SLDS website. For example, the round icon for lead would be action:lead while the search monochrome icon would be utility:search. Hope this helps.

  • Yes, but that requires using the lightning:icon component. It doesn't help if we need access to the SVG URL without the lightning:icon component. FYI notice my comment above. Feb 8 '17 at 16:25
  • Hi Scott, if you need to access the URL, loading SLDS in Static Resources and calling from there might be the only option. Feb 9 '17 at 18:44
  • 2
    Hi @ScottMorrison I'm curious to know why you prefer to call the SVG directly instead of using lightning:icon. Please share if you can. Feb 12 '17 at 11:51

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.