Unable to display icon in the lightning component

Question

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).

Fabien Taillon · Accepted Answer · 2017-03-09 14:19:33Z

3

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.

answered Mar 9, 2017 at 14:19

Fabien Taillon

8,7152 gold badges40 silver badges60 bronze badges

yes but this tag only will work on the component file. can you refer this link. in that some body gave solutions but if i add multiple images then i have to use this $A.createComponent() multiple times . it is not efficient solution.
– Gopalakrishna Boddepalli
Commented Mar 10, 2017 at 7:24
I am not sure to understand, in your question you are talking about an <img src > tag, this is also in the component file. Where do you want to use it ?
– Fabien Taillon
Commented Mar 10, 2017 at 10:56
I want to use in helper js. example $('#devId').html('<lightning:icon iconName="utility:chevrondown" size="small"/>'). but its not working.
– Gopalakrishna Boddepalli
Commented Aug 21, 2017 at 11:22

Add a comment |

vignesh · Accepted Answer · 2017-03-09 13:55:48Z

0

Try this Like

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

answered Mar 9, 2017 at 13:55

vignesh

2,65412 silver badges22 bronze badges

2

it will not work. juts $Resource.SLDS is is refer static resource path name SLDS. but in my case i am not using any Static resource for referring the lightning design system. i am referring the Asset.SLDS.
– Gopalakrishna Boddepalli
Commented Mar 10, 2017 at 7:34

Add a comment |

ZigaG · Accepted Answer · 2017-03-10 07:35:21Z

0

I think that you will need to install a helper Lightning Component to render the Lightning Design System icons, try reading this: https://www.lightningdesignsystem.com/resources/lightning-svg-icon-component-helper/ it may help you.

answered Mar 10, 2017 at 7:35

ZigaG

614 bronze badges

Add a comment |

3 Answers 3