icons

Your own icons in place of the grid’s marks, as SVG.

Type	GridIcons
Default	not set
Live update (update())	Yes
Angular	the [icons] input
<dz-grid>	the icons property
Declared in	packages/dom/src/settings.ts

What it does

The grid draws its marks itself, with no file. Give an SVG — its text, or an <svg> element already in the page, copied — for any of them:

Key	The mark
sortAsc, sortDesc	A sorted column’s arrow.
sortNone	A sortable column that is not sorted (1.12.0); without it, such a column shows no mark. Decorative: screen readers hear the sort state from aria-sort, not from the mark.
filter	The header’s filter button.
filterActive	A filtered column’s filter button; without it, filter in the accent colour.
menu	The column menu’s button.
chevron	A tree’s, a detail’s and a column group’s toggle, pointing to the end of the line when closed; turned and mirrored as the default is.
submenu	A menu item’s submenu mark, mirrored in right to left.
grip	The handle a row is moved by.

The icon is drawn in the mark’s colour and size (--dzg-icon-size), whatever its own fill. It needs theming() from @dzgrid/dom/theme. An icon that is not plain shapes — a <script>, a <style>, a <foreignObject>, an on… attribute, a link out of the icon, more than 20 000 characters — is refused: the default stays and an invalid-setting warning is told. Your icon always wins: the grid’s own mark is not drawn under it, with the layered sheets and with the *.unlayered.css copies alike (1.12.0). The icons are drawn as data: images: a Content Security Policy must allow img-src data:.

Example

TypeScript

import { createGrid } from '@dzgrid/dom';
import { theming } from '@dzgrid/dom/theme';
import { EN } from '@dzgrid/dom/locales/en';

type Plant = { id: string; name: string; height: number };

const funnel = document.querySelector<SVGSVGElement>('#my-funnel')!;   // an <svg> already in the page

createGrid<Plant>(document.getElementById('plants')!, {
  rows: [{ id: 'p1', name: 'Foxglove', height: 120 }],
  columns: [{ id: 'name', header: 'Plant' }, { id: 'height', header: 'Height (cm)', type: 'number' }],
  getRowId: (p) => p.id,
  messages: EN,
  icons: { sortAsc: '<svg viewBox="0 0 16 16"><path d="M8 3l5 8H3z"/></svg>', sortNone: '<svg viewBox="0 0 16 16"><path d="M8 2l4 5H4zM8 14l4-5H4z"/></svg>', filter: funnel },
  features: [theming()],
});

Angular

import { Component } from '@angular/core';
import { DzGrid, type DzgColumnOrGroup } from '@dzgrid/angular';
import { theming } from '@dzgrid/dom/theme';
import { EN } from '@dzgrid/dom/locales/en';

type Plant = { id: string; name: string; height: number };

@Component({
  selector: 'app-plants',
  imports: [DzGrid],
  template: `<dz-grid [rows]="rows" [columns]="columns" [getRowId]="rowId" [messages]="messages" [features]="features" [icons]="icons" />`,
})
export class Plants {
  readonly rows: Plant[] = [{ id: 'p1', name: 'Foxglove', height: 120 }];
  readonly columns: DzgColumnOrGroup<Plant>[] = [{ id: 'name', header: 'Plant' }, { id: 'height', header: 'Height (cm)', type: 'number' }];
  readonly rowId = (p: Plant) => p.id;
  readonly messages = EN;
  readonly features = [theming()];
  readonly icons = { sortAsc: '<svg viewBox="0 0 16 16"><path d="M8 3l5 8H3z"/></svg>' };
}

Web Component

import '@dzgrid/element/define';
import type { DzGridElement } from '@dzgrid/element';
import { theming } from '@dzgrid/dom/theme';
import { EN } from '@dzgrid/dom/locales/en';

type Plant = { id: string; name: string; height: number };

const grid = document.querySelector<DzGridElement<Plant>>('dz-grid')!;
grid.columns = [{ id: 'name', header: 'Plant' }, { id: 'height', header: 'Height (cm)', type: 'number' }];
grid.getRowId = (p) => p.id;
grid.messages = EN;
grid.features = [theming()];
grid.icons = { sortAsc: '<svg viewBox="0 0 16 16"><path d="M8 3l5 8H3z"/></svg>' };
grid.rows = [{ id: 'p1', name: 'Foxglove', height: 120 }];

With injectStyles: false, load ICONS_CSS from @dzgrid/dom/theme with the rest of the layout CSS.

See also

• theme — colours and sizes.
• Theming and right to left.