Custom Icons at Global Level

This section details how to provide your own icons for the grid and style grid icons for your application requirements
at global level using the CSS Classes and Variables of the Grid. It is also possible to provide customs icons at
grid/column level,
see Custom Icons at Grid and Column Level.

Swapping the Provided Icon Fonts

Each provided theme comes with its own icon font. It is simple to use one provided theme with another theme’s icons. Set
--ag-icon-font-family to one of: agGridAlpine, agGridBalham or agGridMaterial. You can compare the available
icon fonts in the Provided Icons list.

Here is an example using the default Alpine theme. Switching between the different options allows to swap between the
icon sets of the provided grid themes.

Note how the icons of checkboxes, sorting, menu, filtering and dragging are modified.

View the CSS classes used for this example

These CSS classes must be added to any *.css file in the assets folder.
See Loading CSS files for more information.

.ag-theme-alpine.balham {
    --ag-icon-font-family: agGridBalham !important;
}

.ag-theme-alpine.material {
    --ag-icon-font-family: agGridMaterial !important;
}

Using an Alternative Icon Font

The grid exposes a number of CSS variables to control the icon font:

If you intend to replace every icon in the grid using the same font then you can set these variables using a CSS
selector targeting the theme name, as you would any other CSS variable:

.ag-theme-alpine.fontawesome {
    --ag-icon-font-family: 'Font Awesome 6 Free' !important;
    --ag-icon-font-code-asc: '\f164';
    --ag-icon-font-code-desc: '\f165';
    --ag-icon-font-code-none: '\f256';
    /* ... and so on - you must define a font code for every icon used */
}

Or to replace some icons without affecting others, set the variables using a CSS selector targeting the icon class:

.ag-theme-alpine.fontawesome .ag-icon-filter {
    --ag-icon-font-family: agGridMaterial !important;
    --ag-icon-font-code-filter: '\f115';
    color: #66c2a5;
    font-size: 30px;
}

The following example uses icons from Font Awesome except the filter icon, which icon is from the agGridMaterial set,
and only this icon is green with a size of 30px.

Note that it is necessary to import the CSS style sheet in the Dash app:

app = Dash(__name__, external_stylesheets=["https://use.fontawesome.com/releases/<version>/css/all.css"])

View the CSS classes used for this example

These CSS classes must be added to any *.css file in the assets folder.
See Loading CSS files for more information.

.ag-theme-alpine.fontawesome {
    --ag-icon-font-family: 'Font Awesome 6 Free' !important;
    --ag-icon-font-code-asc: '\f164';
    --ag-icon-font-code-desc: '\f165';
    --ag-icon-font-code-none: '\f256';
    --ag-icon-font-code-checkbox-checked: '\f118';
    --ag-icon-font-code-checkbox-unchecked: '\f111';
    --ag-icon-font-code-checkbox-indeterminate: '\f11a';
    --ag-icon-font-code-filter: '\f1de';
    --ag-icon-font-code-grip: '\f58d';
    --ag-icon-font-code-menu: '\f142';
    --ag-icon-font-code-small-down: '\2b';
}

.ag-theme-alpine.fontawesome .ag-icon-filter {
    --ag-icon-font-family: agGridMaterial !important;
    --ag-icon-font-code-filter: '\f115';
    color: #66c2a5;
    font-size: 30px;
}

.ag-theme-alpine.fontawesome .ag-icon,
.ag-theme-alpine.fontawesome .ag-checkbox-input-wrapper,
.ag-theme-alpine.fontawesome .ag-radio-button-input-wrapper {
    /* Font Awesome requires bold on all icon elements */
    font-weight: bold;
}

Image Icons

To replace icons with an image, including SVG images, use CSS selectors that target the icon class. You can hide the
existing icon character by setting the color to transparent.

The example below changes the icon of the menu by the favicon.ico of the Dash app in the /assets folder.

Here is the CSS classes used for this example:

.ag-theme-alpine.image-icon .ag-icon-menu {
    background: transparent url("/assets/favicon.ico") center/contain no-repeat;
    color: transparent;
}

Provided Icons

Below you can see a list with all available icons for each provided theme. The name next to each icon is the CSS name,
for example the pin icon will have the CSS class ag-icon-pin and uses the CSS variable <code>
‑‑ag‑icon‑font‑code‑pin<code>.

Alpine Balham Material CSS Name
<img> <img> <img> aggregation
<img> <img> <img> arrows
<img> <img> <img> asc
<img> <img> <img> cancel
<img> <img> <img> chart
<img> <img> <img> checkbox-checked
<img> <img> <img> checkbox-indeterminate
<img> <img> <img> checkbox-unchecked
<img> <img> <img> color-picker
<img> <img> <img> columns
<img> <img> <img> contracted
<img> <img> <img> copy
<img> <img> <img> cross
<img> <img> <img> csv
<img> <img> <img> cut
<img> <img> <img> desc
<img> <img> <img> excel
<img> <img> <img> expanded
<img> <img> <img> eye-slash
<img> <img> <img> eye
<img> <img> <img> filter
<img> <img> <img> first
<img> <img> <img> grip
<img> <img> <img> group
<img> <img> <img> last
<img> <img> <img> left
<img> <img> <img> linked
<img> <img> <img> loading
<img> <img> <img> maximize
<img> <img> <img> menu
<img> <img> <img> minimize
<img> <img> <img> next
<img> <img> <img> none
<img> <img> <img> not-allowed
<img> <img> <img> paste
<img> <img> <img> pin
<img> <img> <img> pivot
<img> <img> <img> previous
<img> <img> <img> radio-button-off
<img> <img> <img> radio-button-on
<img> <img> <img> right
<img> <img> <img> save
<img> <img> <img> small-down
<img> <img> <img> small-left
<img> <img> <img> small-right
<img> <img> <img> small-up
<img> <img> <img> tick
<img> <img> <img> tree-closed
<img> <img> <img> tree-indeterminate
<img> <img> <img> tree-open
<img> <img> <img> unlinked

<br>