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': '&lt;i&gt;',
        'filter': '&lt;i&gt;',
    }}

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

columnDefs = [
    {
        "field": "athlete",
        "sort": "asc",
        "icons": {
            "sortAscending": '&lt;i&gt;',
            "sortDescending": '&lt;i&gt;',
        }
    },
    # Other columns
]

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

The icons property takes an object of name/value pairs where the name is an icon name 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 in place of the sorting icons.

```python
import dash_ag_grid as dag
from dash import Dash, html
import pandas as pd

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

df = pd.read_csv(
    "https://raw.githubusercontent.com/plotly/datasets/master/ag-grid/olympic-winners.csv"
)

columnDefs = [
    {
        "field": "athlete",
        "sort": "asc",
        "icons": {
            "sortAscending": '',
            "sortDescending": '',
        }
    },
    {
        "field": "age",
        "sort": "desc",
        "icons": {
            "sortAscending": '',
            "sortDescending": '',
        }
    },
    {
        "field": "country",
        "sort": "asc",
        "icons": {
            "sortAscending": 'ASC',
            "sortDescending": 'DESC',
        }
    },
    {"field": "year"},
]

app.layout = html.Div(
    dag.AgGrid(
        id="custom-icons-grid-level",
        rowData=df.to_dict("records"),
        columnDefs=columnDefs,
        defaultColDef={'filter': True},
        dashGridOptions={
            "animateRows": False,
        },
        columnSize="sizeToFit",
    )
)

if __name__ == "__main__":
    app.run(debug=True)
```