# GridIcons

> _Since v0.1.1_

Grid-wide icon configuration.
All icons are optional - sensible defaults are used when not specified.

The grid uses a **CSS-first hybrid approach**: icons render via `--tbw-icon-*` CSS
custom properties by default. Setting `gridConfig.icons` provides JS overrides that
take precedence over CSS (the JS icon injects DOM content, suppressing the CSS
`::before` pseudo-element via the `:empty` selector).

**Use CSS** for static theming (text, emoji, SVG masks via `--tbw-icon-*-mask`).
**Use JS** for dynamic icons, icon libraries, or `HTMLElement` instances.

Icons can be text (including emoji), HTML strings (for SVG), or HTMLElement instances.

#### Example

```typescript
grid.gridConfig = {
  icons: {
    // Emoji icons
    expand: '➕',
    collapse: '➖',

    // Custom SVG icon
    sortAsc: '<svg viewBox="0 0 16 16"><path d="M8 4l4 8H4z"/></svg>',

    // Font icon class (wrap in span)
    filter: '<span class="icon icon-filter"></span>',
  },
};
```

## Properties

| Property | Type | Description |
| -------- | ---- | ----------- |
| `expand?` | <code><a href="/grid/api/core/types/iconvalue/">IconValue</a></code> | Expand icon for collapsed items (trees, groups, details). Default: '▶' |
| `collapse?` | <code><a href="/grid/api/core/types/iconvalue/">IconValue</a></code> | Collapse icon for expanded items (trees, groups, details). Default: '▼' |
| `sortAsc?` | <code><a href="/grid/api/core/types/iconvalue/">IconValue</a></code> | Sort ascending indicator. Default: '▲' |
| `sortDesc?` | <code><a href="/grid/api/core/types/iconvalue/">IconValue</a></code> | Sort descending indicator. Default: '▼' |
| `sortNone?` | <code><a href="/grid/api/core/types/iconvalue/">IconValue</a></code> | Sort neutral/unsorted indicator. Default: '⇅' |
| `submenuArrow?` | <code><a href="/grid/api/core/types/iconvalue/">IconValue</a></code> | Submenu arrow for context menus. Default: '▶' |
| `dragHandle?` | <code><a href="/grid/api/core/types/iconvalue/">IconValue</a></code> | Drag handle icon for reordering. Default: '⋮⋮' |
| `toolPanel?` | <code><a href="/grid/api/core/types/iconvalue/">IconValue</a></code> | Tool panel toggle icon in toolbar. Default: '☰' |
| `filter?` | <code><a href="/grid/api/core/types/iconvalue/">IconValue</a></code> | Filter icon in column headers. Default: SVG funnel icon |
| `filterActive?` | <code><a href="/grid/api/core/types/iconvalue/">IconValue</a></code> | Filter icon when filter is active. Default: same as filter with accent color |
| `print?` | <code><a href="/grid/api/core/types/iconvalue/">IconValue</a></code> | Print icon for print button. Default: '🖨️' |

## See Also

- [`IconValue`](/grid/api/core/types/iconvalue.md) for allowed icon formats