Material Theme

The Material Theme is one of the four themes supplied with ag-Grid.

To use a theme, add the theme class name to the div element where the ag-Grid directive is attached.

The following is an example of using the ag-material theme:

<div ag-grid="gridOptions" class="ag-material"></div>

Note that to use the Material theme you'll need to override the default rowHeight
gridOptions = {
    rowHeight: 48
}
Additionally, to be consistent with Googles guidelines, you should override the default checkbox behaviour - in the example below we've overriden the selected checkbox state to be blue
gridOptions = {
    icons: {
        checkboxChecked: '<img src="data:image/png;base64,..."/>'
    }
}
Material Theme Example
This grouped example demonstrates some of the different facets of a theme - full, part and no checkbox selection for example, as well as general look and feel