Icons not loading about ag-grid HOT 5 CLOSED

The cause of the issue is in src/styles.scss.

*,
*::after,
*::before {
  box-sizing: border-box;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

Ag Grid uses icon fonts to render icons, and by setting the font on *::after you remove the icon font icons and checkboxes.

We'll make a change to the grid styles to make them less susceptible to this kind of thing, but in the mean time using this instead works:

*,
*::after,
*::before {
  box-sizing: border-box;
}
* {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

from ag-grid.

Hi

Thank you for reporting this.

We'd be happy to look into this, but the most efficient way for us to do so would be for you to provide a live example reproducing the issue.

Please send us a live plunker sample which shows the issue. You can use one of the examples from our website as a starting point. Do let us know if you need further guidance on this.

We're looking forward to your response.

Kind regards,
Zoheil

from ag-grid.

Hi,

Thanks for responding back quickly.

It's an intermittent issue actually and it's hard to reproduce it manually. I keep my network tab open always, next time it happens, I'll see the network and will report back to you, if I see any discrepancy.

Thanks
Soumyanil

from ag-grid.

checkbox icons in cell are not displayed with initial settings


css variables == --ag-icon-checkbox-unchecked and --ag-icon-checkbox-checked are not defined

stackblitz: https://stackblitz.com/~/github.com/evheniyrz/angular-cdk-drag-handle

Angular: ^17.3.7
Ag-Grid:
"ag-grid-angular": "^31.3.1",
"ag-grid-community": "^31.3.1",
Component:
src/app/pages/ag-grid-tutorial/components/table/table.component.ts

Angular.json

"styles": [
              "node_modules/ag-grid-community/styles/ag-grid.css",
              "node_modules/ag-grid-community/styles/ag-theme-quartz.css",
              "@angular/material/prebuilt-themes/pink-bluegrey.css",
              "src/styles.scss"
            ],

from ag-grid.

The cause of the issue is in src/styles.scss.

*,
*::after,
*::before {
  box-sizing: border-box;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

Ag Grid uses icon fonts to render icons, and by setting the font on *::after you remove the icon font icons and checkboxes.

We'll make a change to the grid styles to make them less susceptible to this kind of thing, but in the mean time using this instead works:

*,
*::after,
*::before {
  box-sizing: border-box;
}
* {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

@BernieSumption
thank you for considering this issue.
yes, now the icons are displayed perfectly

from ag-grid.