IgxGrid Icons Not Showing in Ignite UI for Angular 16

Hi, i have built igx grid from the examples and using 16.0.0 . icons are not showing up in the grid. am i missing any reference?

i have referred  css using theme

@use “@infragistics/igniteui-angular/theming” as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:

// @import ‘~igniteui-angular/lib/core/styles/themes/index’;

@include core();

@include typography($font-family: $material-typeface, $type-scale: $material-type-scale);

/* autoprefixer grid:on */

@include theme($default-palette);

Hello Peru,

Thank you for posting in our community!

I have been looking into your question and in an effort to reproduce the described behavior I have prepared a small sample from scratch by following our Getting started topic here and enabling some IgxGrid features, i.e., filtering, sorting, etc., by using the Ignite UI CLI and the add command as demonstrated in the following topic here.

ng new igxApp –style=scssng add @infragistics/igniteui-angular (installed the latest supported version 16.0.12)ig add (added custom grid with sorting, filtering, grouping, etc)

On my side, I was not able to reproduce the described behavior and when running the project, the IgxGrid along with the features’ icons were displayed successfully and as expected. This could be observed in the attachment below:

Attached could be found my sample for your reference. Please test it on your side and let me know how it behaves.

Additionally, in order to assist you further, it would be highly appreciated if you could provide me with a small sample that demonstrates the behavior on your side.

Having a sample that I could debug on my side will be extremely helpful in further investigating this matter and providing you with a solution as soon as possible.

Thank you for your cooperation. Looking forward to your reply.

Sincerely, Riva Ivanova Associate Software Developer

0753.igxApp.zip

Attachments:

1. 0753.igxApp.zip

Hey , i  was able to nail down the issue with the reference project

what is the use of  below line and what alternative we have

<link href="">fonts.googleapis.com/css rel="stylesheet">

  <link href="">fonts.googleapis.com/icon rel="stylesheet">

also how is  this packaged used by infragistics

 "@igniteui/material-icons-extended": "^2.10.0",

Thanks,

Peru

Hello Peru,

Thank you for following up!

I am glad that you found the root cause of this behavior.

Additionally, regarding your additional questions, what I could say is that Ignite UI for Angular is based on the Material Design System and respectively uses the Material Design icons. Having this in mind, in order to use the icons, the icon set should be referenced in the project, i.e.,

However, another approach I could suggest is self-hosting the icon set in your project and I believe that your will find the following section here quite helpful on this matter.

Furthermore, regarding the following line of code, i.e.,

what I could say, as mentioned in our documentation here, is that we have selected Titillium Web to be the default font for the Material Theme in Ignite UI for Angular and in order to use it you have to host it yourself, or include it from Google Fonts. I believe that you will find the following topic here quite helpful as it demonstrates how to host the web fonts on your own server.

By default, when installing the ignteui-angular package via the ng add command, the following configuration is included automatically.

index.html

    ...
    
    


    

Regarding your last question,

[quote user=”E9438D211DF97DA5D703ACD7EE58F4187005AA1E”][/quote]

also how is  this packaged used by infragistics

 "@igniteui/material-icons-extended": "^2.10.0",

what I could say is that the Ignite UI Material Icons Extended is a subset of icons that extends the material icon set by Google. More information along with code snippets demonstrating how to use this package could be found in our Material Icons Extended topic here. Another useful resource I could suggest is the GitHub repository that could be found here.

Please let me know if you need any further information regarding this matter.

Sincerely,
Riva Ivanova
Associate Software Developer

Hello Riva,
I am facing a similar issue. Some icons are not visible. For example the "cancel" and "clear" icons are not visible. In the below screenshot you will find that even though the igx-icon element is present the icon is not visible.

If I manually edit the icon label – "cancel" to "close" then I can see a relevant icon (below image).

I think the icons are not downloaded properly which is leading to this issue. Maybe I missed a step while upgrading to angular 16 from 13. Any suggestion is highly appreciated.