Icons

This sections details how to provide your own icons for the grid and style grid icons for your application requirements.

In v21 of ag-Grid we changed how icons are set in the grid. Previous to v21 the icons were svg files that you could override via the icons-path variable in SASS files. v21 uses WebFonts and CSS for the icons which is the best way to allow icon theming.

For backwards compatibility you can still provide icons using the icons grid option.
If you need to reintroduce SVG icons, see this section: SVG Icons

If you have created your own theme and want to include the stock icons, this is easiest done by adding the WebFont from the theme you like:
dist/styles/webfont/agGridClassicFont.css - WebFont used by themes fresh, blue, dark and bootstrap
dist/styles/webfont/agGridBalhamFont.css - WebFont used by theme balham and balham-dark
dist/styles/webfont/agGridMaterialFont.css - WebFont used by theme material

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 specificity. */ .ag-theme-balham .ag-icon-pin { font-family: "Font Awesome 5 Free"; /* FontAwesome uses font-weight bold */ font-weight: bold; } .ag-theme-balham .ag-icon-pin::before { content: '\f08d'; }

Replace the icons by changing the icons font (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.

// 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`. // 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. $ag-icon-font-family: "Font Awesome 5 Free"; $ag-icon-aggregation: "\f247"; $ag-icon-arrows: "\f0b2"; $ag-icon-asc: "\f062"; $ag-icon-cancel: "\f057"; $ag-icon-chart: "\f080"; $ag-icon-checkbox-checked: "\f14a"; $ag-icon-checkbox-indeterminate: "\f146"; $ag-icon-checkbox-unchecked: "\f0c8"; $ag-icon-color-picker: "\f576"; $ag-icon-column: "\f142"; $ag-icon-columns: "\f0db"; $ag-icon-contracted: "\f146"; $ag-icon-copy: "\f0c5"; $ag-icon-cross: "\f00d"; $ag-icon-cut: "\f0c4"; $ag-icon-data: "\f1c0"; $ag-icon-desc: "\f063"; $ag-icon-expanded: "\f0fe"; $ag-icon-eye-slash: "\f070"; $ag-icon-eye: "\f06e"; $ag-icon-filter: "\f0b0"; $ag-icon-first: "\f100"; $ag-icon-grip: "\f58e"; $ag-icon-group: "\f5fd"; $ag-icon-indeterminate: "\f06e"; $ag-icon-linked: "\f0c1"; $ag-icon-last: "\f101"; $ag-icon-left: "\f060"; $ag-icon-loading: "\f110"; $ag-icon-maximize: "\f2d0"; $ag-icon-menu: "\f0c9"; $ag-icon-minimize: "\f2d1"; $ag-icon-minus: "\f068"; $ag-icon-next: "\f105"; $ag-icon-none: "\f338"; $ag-icon-not-allowed: "\f05e"; $ag-icon-paste: "\f0ea"; $ag-icon-pin: "\f276"; $ag-icon-pivot: "\f074"; $ag-icon-plus: "\f067"; $ag-icon-previous: "\f104"; $ag-icon-radio-button-off: "\f111"; $ag-icon-radio-button-on: "\f058"; $ag-icon-right: "\f061"; $ag-icon-save: "\f0c7"; $ag-icon-small-down: "\f107"; $ag-icon-small-left: "\f104"; $ag-icon-small-right: "\f105"; $ag-icon-small-up: "\f106"; $ag-icon-tick: "\f00c"; $ag-icon-tree-closed: "\f105"; $ag-icon-tree-indeterminate: "\f068"; $ag-icon-tree-open: "\f107"; $ag-icon-unlinked: "\f127"; @import "~ag-grid-community/src/styles/ag-grid.scss"; @import "~ag-grid-community/src/styles/ag-theme-balham.scss"; .ag-icon { font-weight: bold; }

A working Sass / Webpack which includes the source theme file is available in the ag grid customising theme 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 columnSelectIndeterminate // grid checkboxes checkboxChecked checkboxUnchecked checkboxIndeterminate // grid radio buttons radioButtonOn radioButtonOff // 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 clipboardCut // beside the cut 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 valuePanel // drag rowDrag // the row drag icon columnDrag // the column drag icon // panels and dialogs close maximize minimize // paging toolbar first previous next last // chevrons (small arrows) smallLeft smallRight smallUp smallDown // generic chart cancel check colorPicker groupLoading data save linked unlinked

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)

SVG Icons

When you create your own theme as described in Customizing Themes, you are also able to replace the WebFont with SVG Icons. To do that you will need to override the ag-icon SASS rules and also the rules for each icon. You can see the example styles.scss file in our custom theme with SVG icons example here: SVG Icons Example.

Below you can see a list with all available icons for each theme, their names, and download them.

SVG Icons will not use the $ag-icon-color, $ag-alt-icon-color and $ag-accent-color variables to colorize icons. This means you will need to add the colors you want to the SVG icons code.