[SalesForce] Unable to display icon in the lightning component

for accessing standard lightning SLDS resource image i am using below tag in visualforce page and i can able to see the image.

<img src="{!$Asset.SLDS}/assets/icons/utility/chevrondown_60.png" />

for accessing standard lightning SLDS resource image in the Lightning component i am using below tag but i can't able to see the image.

<img src="{!$Asset.SLDS+'/assets/icons/utility/chevrondown_60.png'}" />

if anybody knows the how to access the image in the Lightning component help me (Spring 17).

Best Answer

If you want to use icons from SLDS in Lightning Component, you should use the lightning:icon Base Component:

<lightning:icon iconName="utility:chevrondown" size="small"/>

You can then use attributes like size or variant to display the icon in the size and color you want.

Related Solutions

[SalesForce] How to load an image in lightning without including the namespace

This has been solved with Summer 16 release now .

<aura:component>
<!-- Stand-alone static resources -->
<img src="{!$Resource.generic_profile_svg}"/>
<img src="{!$Resource.yourNamespace__generic_profile_svg}"/>

<!-- Asset from an archive static resource -->
<img src="{!$Resource.SLDSv1 + '/assets/images/avatar1.jpg'}"/>
<img src="{!$Resource.yourNamespace__SLDSv1 + '/assets/images/avatar1.jpg'}"/>

[SalesForce] Why does lightning experience use a different url for svg icons

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.

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

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.

Best Answer

Related Solutions

[SalesForce] How to load an image in lightning without including the namespace

[SalesForce] Why does lightning experience use a different url for svg icons

Related Topic