We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Toolbar customize items icons

Hello, 

I am trying to use the "e-filternone" icon but it's not showing. 

this.toolbar = ['CsvExport', { text: 'Clear Filters', tooltipText: 'Clear Filters', prefixIcon: 'e-filternone', id: 'ClearFilters' }];

Looking forward to hearing from you, 

Ane

7 Replies

PS Pavithra Subramaniyam Syncfusion Team January 31, 2019 10:43 AM UTC

 
Thanks for contacting Syncfusion support. 
 
We would like to let you know that, In order to reduce the size of our Icon file, we have removed the unused icons from our icon list, which are not used by our components. And then we have hosted these unused icons style in the below CDN link and you can directly use it in your application.   
   
[index.html]  
 
<link rel='nofollow' href="https://cdn.syncfusion.com/ej2/custom-icons.css" rel="stylesheet" type="text/css">   
 
  
 So you can achieve your requirement by adding the e-custom-icons class with the toolbar icon element as in the below code snippet.    
  
[component.ts]  
this.toolbar = ['CsvExport',  { text: 'Clear Filters', tooltipText: 'Clear Filters', prefixIcon: 'e-custom-icons e-filternone', id: 'ClearFilters' }]; 
   
[style]  
.e-custom-icons.e-filternone::before { 
                             content: '\e819'; 
              } 
 
  
You can also refer the below link to know the unused icons removed from our icon library.    
 
Please get back to us if you need any further assistance. 
 
Regards, 
Pavithra S. 



AN Ane January 31, 2019 11:39 AM UTC

Thank you!


PS Pavithra Subramaniyam Syncfusion Team January 31, 2019 12:35 PM UTC

Hi Ane,  

Thanks for your update.  

Please contact us if you need any further assistance. As always, we will be happy to assist you.  

Regards,  
Pavithra S. 



EV Ervin van der Merwe November 21, 2019 08:27 AM UTC

Thanks for the solution. I would like to add that the style for the menu icon did not work using the component's css file. I had to add it to the global css file.


SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team November 22, 2019 07:30 AM UTC

Hi Ervin,  

Refer to the following demo,  


We have referred the CSS for the EJ2 components in the index.html which will be applied to all the files in the application.  

 

Regards  
Seeni Sakthi Kumar S 



RT Robert Tabacaru May 25, 2020 12:45 PM UTC

Hi, I have also a question.
     I use the menu component(ejs-menu).  

There I have some MenuItems and each item has an iconCss.
public static VerticalMenuItemsMenuItemModel[] = [
        {
            text: 'Navigation.Menu.Home',
            iconCss: 'icon-globe icon',
            url: '/'
        },

and in css: 
#sidebar-menu .icon-globe:before {
    content'\e809';
}

I want to use instead of icon-globe, one of those icons from the unused list. This is the "home"  "\e7d9" icon.

Could you please help me to achieve this result?




SD Saranya Dhayalan Syncfusion Team May 26, 2020 10:09 AM UTC

Hi Ane 
 
We have checked your reported issue, we would like to let you know that for the demo purpose, we have generated the home icon in metro studio and referred in the demo sample.  
 
 
Please find the below documentation link for available icons 
 
 
We suggest you use metro studio, to generate your own icon and use it in our own application. Please find the demo video link below 
 
 
  
  
Please let us know if you need further assistance. 
 
Regards, 
Saranya D  


Loader.
Live Chat Icon For mobile
Up arrow icon