Expand All

  Getting Started

  Interfacing

  Features

  Row Models

  Themes

  Components

  Examples

  Third Party

Misc

Github stars make projects look great. Please help, donate a star, it's free.
Get informed on releases and other ag-Grid news only - never spam.
Follow on Twitter

Icons

ag-Grid comes with default icons that are created using SVG. You can provide your own icons for the grid to use.

The icons can either be set on the grid options (all icons) or on the column definition (all except group). If defined in both the grid options and column definitions, the column definition will get used. This allows you to specify defaults in the grid options to fall back on, and then provide individual icons for specific columns. This is handy if, for example, you want to include 'A..Z' as string sort icons and just the simple arrow for other columns.

The icons are set as follows:

// column header items
menu
filter
sortAscending
sortDescending
sortUnSort

// expand / contract row group
groupExpanded
groupContracted

// expand / contract column group
columnGroupOpened
columnGroupClosed

// tool panel column group open / close
columnSelectOpen
columnSelectClosed

// row checkbox selection and tool panel column selection
checkboxChecked
checkboxUnchecked
checkboxIndeterminate

// tool panel column selection, when read only (ie disabled checkboxes)
checkboxCheckedReadOnly
checkboxUncheckedReadOnly
checkboxIndeterminateReadOnly

// when moving columns
columnMovePin // when column is to the left, before it gets pinned
columnMoveAdd // when adding a column
columnMoveHide // when removing a column
columnMoveMove // when moving a column
columnMoveLeft // when moving and scrolling left
columnMoveRight // when moving and scrolling right
columnMoveGroup // when about to drop into group panel
columnMoveValue // when about to drop into value panel
columnMovePivot // when about to drop into pivot panel
dropNotAllowed // when trying to drop column into group/value/pivot panel and column doesn't support it

// menu
menuPin // beside the column pin menu item
menuValue // beside the column value menu item
menuAddRowGroup // beside the column row group menu item
menuRemoveRowGroup // beside the column row group menu item
clipboardCopy // beside the copy to clipboard menu item
clipboardPaste // beside the paste from clipboard menu item

// column drop panels
rowGroupPanel // beside where to drop columns for row group
pivotPanel // beside where to drop columns for pivot
valuePanel // beside where to drop columns for value

Setting the icons on the column definitions is identical, except group icons are not used in column definitions.

The icon can be any of the following:

  • String: The string will be treated as html. Use to return just text, or HTML tags.
  • Function: A function that returns either a String or a DOM node or element.

The example below shows a mixture of different methods for providing icons. The grouping is done with images, and the header icons use a mix of Font Awesome and strings.

(note: the example below uses ag-Grid-Enterprise, this is to demonstrate the icons for grouping only)