Setting css for icons in list of items

Hi,
i have used ejdropdowns.i needed to bring icons with the list of items of dropdown,which i achieved as follows.
<label class="addClientLabel" style="margin: -6px -14px -1px !important">
<span class="required">*</span> Status</label>
<div class="row margin2-right">
<ej-dropdownlist id='status' #status [dataSource]='statusdata'
[fields]='fields' [placeholder]='statusPlaceHolder' style="margin-left:5px;">
</ej-dropdownlist>
</div>


public statusdata: { [key: string]: Object }[] = [
{ Class: 'fa fa-home', Type: 'New', Id: '1' },
{ Class: 'fa fa-book', Type: 'InProgress ', Id: '2' },
{ Class: 'fa fa-cog', Type: 'closed', Id: '3' },
];
// map the icon column to iconCSS field.
public fields: Object = { text: 'Type', iconCss: 'Class', value: 'Type' };

here i need is to set icon color.please provide some example through which i can set css to the icon present in list of dropdowns.



3 Replies

GG Gopi Govindasamy Syncfusion Team February 14, 2018 07:32 AM UTC

Hi Prangya,   
  
Thanks for using Syncfusion EJ2 components.   
  
We have checked your shared code snippet and requirement for set icon css in list item. We have already added icon sample into angular sample browser using “e-list-icon” class to set icon color. We have prepared simple sample based on your requirement.    
  
.e-list-icon {   
    color: rgba(000.57);   
}   

  
  
  
Please let us know if you have any concern, we will happy to help you.   
  
Regards, 
Gopi G.   



PT Prangya Tiwari February 14, 2018 02:19 PM UTC

Hello,
thank you for the information.i want different color and sizes for different icons present in ejdropdown.
could you please help how would i achieve that.


GG Gopi Govindasamy Syncfusion Team February 15, 2018 11:06 AM UTC

Hi Prangya,  

We have provided a sample with different icon in each list item. If you want to set different color in each icon, please use “iconCss” class. The iconcss class is generated to provided datasource iconcss field. We have prepared a sample for different color and different font icons in list items. If you want to set png image to all list item you can change to content icon to your png images.   

datasource 
 
public socialMediaData: Object[] = [ 
        { Class: 'facebook', SocialMedia: 'Facebook', Id: 'media1' }, 
        { Class: 'twitter', SocialMedia: 'Twitter', Id: 'media2' }, 
        { Class: 'whatsapp', SocialMedia: 'WhatsApp', Id: 'media3' }, 
        { Class: 'tumblr', SocialMedia: 'Tumblr', Id: 'media4' }, 
        { Class: 'google-plus', SocialMedia: 'Google Plus', Id: 'media5' }, 
        { Class: 'skype', SocialMedia: 'Skype', Id: 'media6' }, 
        { Class: 'vimeo', SocialMedia: 'Vimeo', Id: 'media7' }, 
        { Class: 'instagram', SocialMedia: 'Instagram', Id: 'media8' }, 
        { Class: 'youtube', SocialMedia: 'YouTube', Id: 'media9' }, 
        { Class: 'linkedin', SocialMedia: 'LinkedIn', Id: 'media10' }, 
    ]; 
 
 
.e-list-icon { 
    font-family: 'Socialicons' !important; 
    color: rgba(0, 0, 0, .57); 
} 
 
.facebook:before { 
    content: "\a705"; 
    color: mediumblue; 
    font-size: 18px; 
} 
 
.vimeo:before { 
    content: "\a702"; 
    color: #777; 
   font-size: 18px; 
} 
  
 
 


Please let us know if you have any concern, we will happy to help you. 

Regards,
Gopi G. 


Loader.
Up arrow icon