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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Toolbar customize items icons

Thread ID:

Created:

Updated:

Platform:

Replies:

142377 Jan 30,2019 09:59 AM UTC May 26,2020 10:09 AM UTC Angular - EJ 2 7
loading
Tags: Menu
Ane
Asked On January 30, 2019 12:45 PM UTC

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 [Syncfusion]
Replied On 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. 


Ane
Replied On January 31, 2019 11:39 AM UTC

Thank you!

Pavithra Subramaniyam [Syncfusion]
Replied On 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. 


Ervin van der Merwe
Replied On 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.

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On 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 


Robert Tabacaru
Replied On 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?



Saranya Dhayalan [Syncfusion]
Replied On 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  


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon