1. Home
  2. Forum
  3. Angular - EJ 2
  4. Toolbar icons not showing

Toolbar icons not showing

Hello,


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

3 Replies 1 reply marked as answer
RS Rajapandiyan Settu Syncfusion Team August 7, 2020 04:37 AM UTC

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 ) 


(see the Source section in the below link) 

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


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

Regards, 
Rajapandiyan S 


Marked as answer
RA Rafael August 7, 2020 01:37 PM UTC

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

RS Rajapandiyan Settu Syncfusion Team August 10, 2020 10:05 AM UTC

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. 


 
Regards, 
Rajapandiyan S 


Loader.
Up arrow icon