Setting css for icons in list of items

[Prangya Tiwari]

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.

[Gopi Govindasamy]

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(0, 0, 0, .57);   

}   

Sample Browser Demo: http://ej2.syncfusion.com/15.4.23/angular/demos/#/material/dropdownlist/groupingicon    

  

Sample Link: http://plnkr.co/edit/eIjanTX6UTEyrfsM4x6m?p=preview  

  

UG Link: http://ej2.syncfusion.com/15.4.23/angular/documentation/drop-down-list/how-to.html#show-the-list-items-with-icons  

  

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

  

Regards, 

Gopi G.   

[Prangya Tiwari]

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.

[Gopi Govindasamy]

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; 

} 

  

 

 

Sample Link: http://plnkr.co/edit/58yzbSspZqajW6Bu8jRb?p=preview  

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

Regards,
Gopi G.