Custom Icons at Global Level

You can customize icons globally using theme parts. To customize icons at the grid or column level, see Custom Icons at Grid and Column Level.

Swapping Icon Sets

Use withPart() to swap the entire icon set for a theme. See Custom Icons in the AG Grid docs for available icon sets.

To swap icons:

Define a JavaScript function in dashAgGridFunctions.js that accepts theme and agGrid as parameters. Within the function, use agGrid.createPart() to convert the icon set into the type that withPart() expects and return the new theme:
```javascript
var dagfuncs = (window.dashAgGridFunctions = window.dashAgGridFunctions || {});

dagfuncs.customIconSet = (theme, agGrid) => {
return theme.withPart(agGrid.createPart(agGrid.iconSetQuartzLight));
}
```
In dashGridOptions.theme.function, pass a string that calls the function with the base theme and agGrid as parameters:
python dag.AgGrid( rowData=df.to_dict("records"), columnDefs=columnDefs, dashGridOptions={ "theme": {"function": "customIconSet(themeQuartz, agGrid)"} }, )

agGrid grants you access to objects from the AG Grid community library, making it easier to create custom themes and configurations. See Customizing Themes Using Theme Parts for more on how this pattern works.

Here’s the full Python app code:

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

app = Dash()

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

columnDefs = [
    {"field": "athlete", "filter": True},
    {"field": "country", "filter": True},
    {"field": "sport"},
    {"field": "year"},
]

app.layout = html.Div(
    dag.AgGrid(
        id="material-icons-example",
        rowData=df.to_dict("records"),
        columnDefs=columnDefs,
        columnSize="sizeToFit",
        dashGridOptions={
            "theme": {"function": "customIconSet(themeQuartz, agGrid)"}
        },
    )
)

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

Using Legacy Theming

When using legacy theming, you can swap icon sets using the --ag-icon-font-family CSS variable. Set it to agGridAlpine, agGridBalham, or agGridMaterial.

To use icons from a different theme, load both theme stylesheets:

import dash_ag_grid as dag
from dash import Dash

app = Dash(external_stylesheets=[dag.themes.BASE, dag.themes.ALPINE, dag.themes.MATERIAL])

Then add a CSS class to swap the icon font. In a .css file in your assets folder:

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

And apply it to the grid:

dag.AgGrid(
    columnDefs=columnDefs,
    rowData=rowData,
    dashGridOptions={"theme": "legacy"},
    className="ag-theme-alpine material-icons",
)

For more legacy icon customization options, see Custom Icons in the AG Grid v32 docs.