Adding icons from a dropdown in a component which are not from DAM asset

[RekhaAd7473]

This came up as a query in one of our requirements. A component is designed which has a drop-down, this drop-down should show icons on selection of any one value (for example facebook icon should be displayed if i select Facebook in the dropdown), but these icons are not stored as DAM assets. Where should I store the icons and how do I access those icons in my Aem project? 

 

[Saravanan_Dharmaraj]

@RekhaAd7473 you can address it in the css , set the value selected in an div and address the div with style. Based on value you can set the div background with right image. As far as storing image, you can add the images to your static resource folder in the code base and deploy along with clientlibs. I assume these images are not gonna be changed very often so having it your codebase sound good. 

[RekhaAd7473]

Tried adding it in div but the icon doesn't come up. On checking logs it says that image resource not found. Could this be a clientlib issue?

[narendrag-aem · Accepted solution]

Hi @RekhaAd7473 

If you have ACS AEM Commons installed in your environment. You could also look at storing the icons using the ACS Commons Generic Lists - https://adobe-consulting-services.github.io/acs-aem-commons/features/generic-lists/index.html

Thanks

Narendra

[kautuk_sahni]

@RekhaAd7473 Did you find the suggestion helpful? Please let us know if you require more information. Otherwise, please mark the answer as correct for posterity. If you've discovered a solution yourself, we would appreciate it if you could share it with the community. Thank you!

[RekhaAd7473]

Hey @kautuk_sahni , apologies for the late reply, I was able to do the task using the generic list approach. We were able to add the icons to a generic list in acs commons and using that generic list able to populate values in the dialog. Thank you @narendrag-aem for the help, was finally able to come to a solution