Icons

The grid draws about fifty small marks for its own chrome - sort arrows, the filter funnel, the column menu, expanders, pager arrows, the tool panel's buttons. Every one of them has a name, and the icons prop replaces any of them with a snippet of your markup.

Colours and sizes are design tokens; the glyphs themselves are this prop. That split is deliberate - a token cannot change the shape of a mark, and an icon set should not have to know your palette.

The smallest version

Write a snippet, name it after the icon you want to replace:

<script lang="ts">
  import { SvGrid } from '@svgrid/grid'
</script>

{#snippet funnel()}
  <svg viewBox="0 0 24 24" fill="currentColor">
    <path d="M4 4h16l-6.5 8v7l-3-1.5V12z" />
  </svg>
{/snippet}

<SvGrid {data} {columns} icons={{ filter: funnel }} />

That is the whole API. Everything else on this page is the catalogue and the two or three things worth knowing about how the markup is treated.

A partial map is a complete answer

icons is a map, not a single snippet that receives a name. Names you leave out keep their built-in glyph, so you never have to be exhaustive and you can never blank an icon by forgetting it exists:

<!-- Sort arrows are yours. The other ~50 marks are still ours. -->
<SvGrid {data} {columns} icons={{ 'sort-asc': up, 'sort-desc': down }} />

This matters more than it looks. The grid asks for icons you may not have thought about - op-regex only appears once someone picks the regex operator, page-last only when pagination is on. A catch-all snippet makes you responsible for all of them forever; a map does not.

It is the same shape as localization.text: a flat map of overrides with built-in defaults. Strings there, glyphs here.

What your markup gets

The grid wraps your snippet in its own icon box, which means:

• Size comes from the call site. The same chevron-right is 12px in a tree expander and 1em in a menu row. Your override inherits whichever box it lands in, so one snippet works everywhere the name is used - don't set a width.
• Colour follows currentColor. Use it (fill="currentColor" or stroke="currentColor") and your icon picks up hover, disabled, muted and accent states from the chrome around it for free. Hard-code a colour and it will look wrong in half of them.
• Rotation still applies. Expanders draw one chevron and rotate it 90 degrees when open rather than swapping glyphs. Your override rotates with them, so supply the closed (pointing right) form.

A snippet is a snippet, so an <Icon> component from your design system, an <img>, or a plain character all work:

{#snippet fromDesignSystem()}<Icon name="table/sort-ascending" />{/snippet}
{#snippet justText()}<span aria-hidden="true">+</span>{/snippet}

Setting icons at runtime

icons is an ordinary prop, so it is reactive, and api.setOption works on it too - useful when the icon set follows a theme the user picks:

<SvGrid {data} {columns} icons={dense ? compactIcons : {}} />

The catalogue

Import GridIconName for autocomplete, or GRID_ICON_NAMES for the list at runtime.

Header and column menu

Filter operators

op-contains, op-notContains, op-equals, op-notEquals, op-startsWith, op-endsWith, op-regex, op-in, op-notIn, op-greaterThan, op-lessThan, op-between, op-isBlank, op-isNotBlank.

These appear in the operator menu and on the filter row's operator button.

Pinning

pin-left, pin-right, unpin.

Their built-in glyphs are borrowed from op-startsWith, op-greaterThan and x, but they are separate names on purpose: restyling a filter operator should not silently repaint the pin menu.

Toolbar and overlays

Glyph icons

These default to a character rather than a path. GRID_ICON_GLYPHS holds the defaults.

Components you mount yourself

SvGroupCell and SvRowGroupPanel are exported so you can place them in your own markup, which means they never see the grid's icons. Pass the same object to them:

<SvRowGroupPanel {columns} {groupBy} {onChange} {icons} />

<!-- and in a column definition -->
cell: (ctx) => renderComponent(SvGroupCell, { row: ctx.row.original, onToggle, icons })

What this does not cover

Two marks are deliberately outside the prop.

The scrollbar's stepper arrows. <sv-grid-scrollbar> is a custom element that builds its arrow with createElementNS inside a shadow root, specifically so it stays usable under a strict Content Security Policy and Trusted Types. A Svelte snippet cannot render into another element's shadow root, and injecting arbitrary markup there would give up the CSP guarantee. Colour it with the --sg-scrollbar-arrow* tokens.

The checkbox tick and its indeterminate dash. Both are ::after pseudo-elements drawn from borders rather than glyphs, so there is nothing to swap. They follow --sg-accent and --sg-on-accent.

Conditional formatting's iconSet is a different feature that happens to share the word - those are value-driven data marks you already choose per rule. See Conditional formatting.

Web components

<sv-grid> does not expose icons. Snippets are a compile-time Svelte construct, and a host page has no way to author one, so there is nothing an attribute could carry. Restyle the element's icons with CSS and the --sg-* tokens instead. See Web components.

See also

• Design tokens - the colours and sizes the icons inherit
• Internationalization - localization.text, the same idea for the grid's strings
• Custom icon set demo - a partial override and a full one, side by side