Toolbar customize items icons

[Ane]

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

[Pavithra Subramaniyam]

Hi Ane, 

 

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'; 

              } 

 

Sample: https://stackblitz.com/edit/angular-xpprxx?file=index.html  

  

You can also refer the below link to know the unused icons removed from our icon library.    

https://cdn.syncfusion.com/ej2/custom-icons.html  

 

Please get back to us if you need any further assistance. 

 

Regards, 

Pavithra S. 

[Ane]

Thank you!

[Pavithra Subramaniyam]

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. 

[Ervin van der Merwe]

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.

[Seeni Sakthi Kumar Seeni Raj]

Hi Ervin,  

Refer to the following demo,  

https://stackblitz.com/edit/angular-xpprxx?file=index.html 

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 

[Robert Tabacaru]

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 VerticalMenuItems: MenuItemModel[] = [

        {

            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?

[Saranya Dhayalan]

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.  

 

Sample link: https://stackblitz.com/edit/angular-p1flzt?file=app.component.css 

 

Please find the below documentation link for available icons 

 

https://ej2.syncfusion.com/angular/documentation/appearance/icons/#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 

 

Video Link: https://www.youtube.com/watch?v=eWAemchE6Sg 

 

Help Doc Link: https://help.syncfusion.com/metro-studio/export-icon-font 

  

  

Please let us know if you need further assistance. 

 

Regards, 

Saranya D