Custom Icons

Which icons you can replace

Three, and they all belong to the moments when the grid has nothing to draw: the icon above the no rows message, the one above a load failure, and the small one inside the Try again button. That is why the demo above opens on an empty grid — a grid full of rows shows none of them. Flip the switch to compare your icon with the shipped one, and use Has rows to see the same grid working normally.

Everything else the grid draws — sort arrows, chevrons, the resize handle — is styled through the theme rather than swapped as an image, so it stays consistent as the rest of the grid changes. See Theming for those.

Passing an icon

Each value is a complete SVG as a string, inlined exactly as you write it. Draw with currentColor instead of a fixed colour and the icon inherits whatever the surrounding theme is using — the same icon then reads correctly in light and dark without a second version.

config: GridConfig = {
  icons: {
    empty: '<svg …></svg>',
    error: '<svg …></svg>',
    retry: '<svg …></svg>',
  },
};

Set only the ones you want. A key you leave out keeps its shipped icon, so replacing the empty icon alone is a three-line change.

Setting them once for the whole app

Most apps want one set of icons everywhere, not a copy on every grid. Pass them to provideGridDefaults() in your application config and every grid picks them up — including grids you add later.

// app.config.ts
import { provideGridDefaults } from '@gridcraft/angular';

export const appConfig: ApplicationConfig = {
  providers: [
    provideGridDefaults({
      icons: { empty: EMPTY_ICON, error: ERROR_ICON, retry: RETRY_ICON },
    }),
  ],
};

A grid can still override any single key locally, and the two levels merge key by key — a grid that sets only error keeps your global empty and retry. So the app-wide set is the baseline, not an all-or-nothing choice. See Global Configuration for the other options that work this way.

Icons and words are separate

icons changes the picture; messages changes the text beside it. This page sets both — the empty state reads "Nobody matches those filters" — because an icon on its own rarely says enough. See Global Configuration to set either once for every grid in your app instead of per grid.

Sizing

Keep your SVG close to the size of the one it replaces — 28 px for the empty and error icons, 12 px for the retry icon — or set width and height on the SVG itself. The grid inlines what you give it and does not rescale it.