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
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.,
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
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.,
<link href="https://fonts.googleapis.com/css?family=Titillium+Web" rel="stylesheet">
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 <head> ... <link href="https://fonts.googleapis.com/css?family=Titillium+Web" rel="stylesheet"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> </head> <body class="ig-typography ig-scrollbar"> <app-root></app-root> </body>
Regarding your last question,
Perunthagai jaganathan said:
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
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.
0753.igxApp.zip