Expand All

  Getting Started

  Reference

  Features

  Row Models

  Themes

  Components

  Examples

  Third Party

Misc

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

Icons

By default, ag-Grid comes with a set of SVG icons. You can provide your own icons for the grid to use.

In v13 of ag-Grid we changed how icons are set in the grid. Previous to v13 the icons were image files that you could override via the 'icons' grid options. v13 uses SVG and CSS for the icons which is in line with industry best practices.

For backwards compatibility you can still provide icons using the 'icons' grid option. If you want to use the old icons, you can set them this way.

The old icons are available in the src/styles/legacy directory of the grid package.

If you have created your own theme and want to include the stock icons, this is easiest done by taking the contents of the dist/styles/compiled-icons.css file and add its contents to your CSS theme.

Change Individual Icons (CSS)

You can change individual icons by overriding the background images for the respective CSS selector. The following code snippet overrides the fresh theme pin icon used in the drag hint when reordering columns:

/* * The override should be placed after the import of the theme. * Alternatively, you can aso increase the selector's specifcity. */ .ag-fresh .ag-icon-pin { background-image: url('path/to/my-pin-icon.svg'); }

The icon classes follow the .ag-icon-{icon-file-name} convention.

Replace the icons by changing the icons path (Scss)

If you are using Sass/Scss in your project, you can include the ag-grid theme source file and customize its properties by overriding the default variables, including the path to the icons.

The easiest way to replace the entire icon set is to change the $ag-icons-path Scss variable to point to a directory with your set of icons. The icons should be 14x14px sized SVG files. You can check the full icon list in the GitHub repository.

// styles.scss // This is an example of the application scss file; // Popular framework project scaffolders like angular-cli support // generating sass enabled projects. // For example, the `ng new` command accepts `--style scss`. // override the icons path to a custom path $ag-icons-path: "./my-icons/"; // import the Sass files from the ag-Grid npm package. // // The "~" path prefix below relies on Webpack's sass-loader - // https://github.com/webpack-contrib/sass-loader. @import "~ag-grid/src/styles/ag-grid.scss"; @import "~ag-grid/src/styles/theme-fresh.scss";

A working Sass / Webpack which includes the source theme file is available in the ag grid seed repository.

Set the icons through gridOptions (JavaScript)

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 columns 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)