Toolbar icons not showing

[Rafael]

Hello,

I am trying to follow this tutorial: https://ej2.syncfusion.com/angular/demos/?_ga=2.174164907.840670587.1594405296-1229092957.1593122815#/material/grid/row-height

And everything works, but the icons are not showing up:

I was checking where the excel icon is coming from:

But when I searched for icons like e-medium-icon in this .css I didn't found anything. This problem is because I am using angular material theme? How can I fix that?

Thank you

[Rajapandiyan Settu]

Hi Rafael, 

Greetings from syncfusion support. 

Query :  Toolbar icons not showing 

We have analyzed your query and found that the icons used in the Grid toolbar are custom icons not syncfusion icons. To show these custom icons in your project we need to add below styles in the project. 

Custom font Icons : 

 

Referring custom font icons in the project: 

 

Find the below sample for your reference. (See the styles used in app.component.html file ) 

Sample : https://stackblitz.com/edit/angular-rhw8sz?file=main.ts 

(see the Source section in the below link) 

Demo : https://ej2.syncfusion.com/angular/demos/?&_ga=2.22484283.1498047444.1596424807-1727593844.1580270613#/material/grid/row-height 

Also refer the below documentation which illustrates available icons in EJ2. 

UG : https://ej2.syncfusion.com/angular/documentation/appearance/icons/#available-icons 

Please get back to us if you need further assistance on this. 

Regards, 

Rajapandiyan S 

[Rafael]

Hello Rajapandiyan,

It works! Thank you!

PS. (For everyone that find this post) : Its necessary to put the encapsulation of the component as none:

Thanks again Rajapandiyan

[Rajapandiyan Settu]

Hi Rafael, 

We are glad that the provided solution is resolved your requirement. 

Query :  Its necessary to put the encapsulation of the component as none 

ViewEncapsulation is used to encapsulates the styles between child component (app.component) and main HTML file (index.html). 

When viewEncapsulation set as None, then styles from the component propagate back to the main HTML and therefore are visible to all components on the page. 

If the viewEncapsulation set as Emulated (default), then styles from main HTML propagate to the component. 

Find the below common documentation to understand this deeply. 

https://angular-2-training-book.rangle.io/advanced-components/view_encapsulation#:~:text=View%20encapsulation%20defines%20whether%20the,HTML%20propagate%20to%20the%20component.  

https://dzone.com/articles/what-is-viewencapsulation-in-angular 

 

Regards, 

Rajapandiyan S