Icons not showing up

[vin]

For sorting and paging the icons are not showing up in the grid

In angular.JSON i have referenced

"node_modules/bootstrap/dist/css/bootstrap.min.css",

 "./node_modules/@syncfusion/ej2-base/styles/bootstrap.css",

              "./node_modules/@syncfusion/ej2-angular-grids/styles/bootstrap.css",

              "./node_modules/@syncfusion/ej2-angular-inputs/styles/material.css",

              "./node_modules/@syncfusion/ej2-base/styles/material.css",

              "./node_modules/@syncfusion/ej2-buttons/styles/material.css",

              "./node_modules/@syncfusion/ej2-popups/styles/material.css",

              "./node_modules/@syncfusion/ej2-lists/styles/material.css",

              "./node_modules/@syncfusion/ej2-angular-dropdowns/styles/material.css",

              "./node_modules/@syncfusion/ej2-angular-grids/styles/material.css"

[Dhivya Rajendran]

Hi Vin, 

Greetings from Syncfusion support. 

Query : For sorting and paging the icons are not showing up in the grid 

From your code we have found that, you are using two different type of themes ( bootstrap and materials ) in your style sheet so that the styles are overridden and icons are not loaded properly in Grid. We suggest you to use either bootstrap or material theme for Grid. Please refer the below help documentation for more information  

            "./node_modules/@syncfusion/ej2-base/styles/ material.css",
              . . . . . .  

              "./node_modules/@syncfusion/ej2-angular-grids/styles/ material.css", 

              "./node_modules/@syncfusion/ej2-angular-inputs/styles/material.css", 

Documentation: https://ej2.syncfusion.com/angular/documentation/grid/getting-started/?no-cache=1#adding-css-reference 

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

Regards, 

R.Dhivya 

[vin]

As per the documentation

I added in styles.css

@import '../node_modules/@syncfusion/ej2-base/styles/material.css';  

@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';  

@import '../node_modules/@syncfusion/ej2-calendars/styles/material.css';  

@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';  

@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';  

@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';

@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';

@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';  

@import '../node_modules/@syncfusion/ej2-angular-grids/styles/material.css';

And i removed the references from angular.JSON

 "styles": [

              "node_modules/bootstrap/dist/css/bootstrap.min.css",

              "src/styles.css",

              // "./node_modules/@syncfusion/ej2-icons/styles/bootstrap.css",

              // "./node_modules/@syncfusion/ej2-base/styles/bootstrap.css",

              // "./node_modules/@syncfusion/ej2-angular-grids/styles/bootstrap.css",

              // "./node_modules/@syncfusion/ej2-base/styles/material.css",

              // "./node_modules/@syncfusion/ej2-angular-inputs/styles/material.css",              

              // // "./node_modules/@syncfusion/ej2-buttons/styles/material.css",

              // // "./node_modules/@syncfusion/ej2-popups/styles/material.css",

              // // "./node_modules/@syncfusion/ej2-lists/styles/material.css",

              // // "./node_modules/@syncfusion/ej2-angular-dropdowns/styles/material.css",

              // "./node_modules/@syncfusion/ej2-angular-grids/styles/material.css"

              // "node_modules/font-awesome/css/font-awesome.css"

            ],

Still it didn't help

[vin]

As per the documentation

I added in styles.css

@import '../node_modules/@syncfusion/ej2-base/styles/material.css';  

@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';  

@import '../node_modules/@syncfusion/ej2-calendars/styles/material.css';  

@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';  

@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';  

@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';

@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';

@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';  

@import '../node_modules/@syncfusion/ej2-angular-grids/styles/material.css';

And i removed the references from angular.JSON

 "styles": [

              "node_modules/bootstrap/dist/css/bootstrap.min.css",

              "src/styles.css",

              // "./node_modules/@syncfusion/ej2-icons/styles/bootstrap.css",

              // "./node_modules/@syncfusion/ej2-base/styles/bootstrap.css",

              // "./node_modules/@syncfusion/ej2-angular-grids/styles/bootstrap.css",

              // "./node_modules/@syncfusion/ej2-base/styles/material.css",

              // "./node_modules/@syncfusion/ej2-angular-inputs/styles/material.css",              

              // // "./node_modules/@syncfusion/ej2-buttons/styles/material.css",

              // // "./node_modules/@syncfusion/ej2-popups/styles/material.css",

              // // "./node_modules/@syncfusion/ej2-lists/styles/material.css",

              // // "./node_modules/@syncfusion/ej2-angular-dropdowns/styles/material.css",

              // "./node_modules/@syncfusion/ej2-angular-grids/styles/material.css"

              // "node_modules/font-awesome/css/font-awesome.css"

            ],

Still it didn't help

Any help please

[vin]

I got it,  my font family with !important was overwriting the icon font

html * {

    font-family: Nunito Sans !important;

}

[Prasanna Kumar Viswanathan]

Hi Vin, 

 

We are happy to hear that your issue has been solved. 

 

Please get back to us if you need any further assistance. 

 

Regards, 

Prasanna Kumar N.S.V