Custom Icons at Grid and Column Level

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

Set the Icons Through dashGridOptions and columnDefs

You can pass an icons property either on the Grid Options to apply across the whole grid:

dashGridOptions = {
    "icons": {
        'menu': '<i>',
        'filter': '<i>',
    }}

Or the Column Definition to use the icons only the current column:

columnDefs = [
    {
        "field": "athlete",
        "sort": "asc",
        "icons": {
            "sortAscending": '<i>',
            "sortDescending": '<i>',
        }
    },
    # Other columns
]

If both are provided, icons specified at the column level will take priority.

The icons property takes an object of name/value pairs where the name is one of the icon names below (note that these
are different from
the CSS names that can be
used at global level) and the value is an HTML string to be inserted in place of the usual DOM element for an icon.

The following example uses:

• For the Athlete column: Alpha sorting icons with custom colors.
• For the Age column: Numeric sorting icons with custom size.
• For the Country column: ‘ASC’/’DESC’ text used inplace of the sorting icons.
• For the whole grid: ‘Menu’ text used inplace of the menu icon.

Icon Names

In the following table, the grid name used in the dashGridOptions/columnDefs is to the left, and on the right is the
corresponding CSS names.

<br>