Toolbar customize items icons

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

Reply | Reply with quote

Pavithra Subramaniyam [Syncfusion]

Replied On January 31, 2019 10:43 AM UTC

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]

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.

Reply | Reply with quote

Ane

Replied On January 31, 2019 11:39 AM UTC

Thank you!

Reply | Reply with quote

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.

Reply | Reply with quote

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.

Reply | Reply with quote

Seeni Sakthi Kumar Seeni Raj [Syncfusion]

Replied On November 22, 2019 07:30 AM UTC

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

Reply | Reply with quote

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 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?

Reply | Reply with quote

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.

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

Reply | Reply with quote