Custom Icons

Another nice way we can customize the grid is by using custom icons. You can do this with grid options (which we'll cover) or CSS pseudo-elements, though the latter is quite manual and often unnecessary. In the sample project, I've included Font Awesome so we can have some fun with this.

Custom icons work at both the column definition level and at the grid level. We can add custom icons to any column definition (in the video we use the Last Name column) by adding an icons object. The object will have keys with specific ag-Grid icon names and values of either a string or function. These icon names can be found in the ag-Grid docs on custom icons:

// App.js
// Last Name column definition
icons: {
  sortAscending: '<i class="fa fa-sort-alpha-up"/>',
  sortDescending: '<i class="fa fa-sort-alpha-down"/>',
  menu: '<i class="fa fa-caret-square-down"/>',
},

To set the icons at the grid level, we can add the same type of icons object to our state:

// App.js component state
icons: {
  sortAscending: '<i class="fa fa-sort-up"/>',
  sortDescending: '<i class="fa fa-sort-down"/>',
  menu: '<i class="fa fa-compass"/>',
  rowDrag: '<i class="fa fa-dragon"/>',
},

And then add a property to the grid:

// App.js AgGridReact component props
icons={this.state.icons}

And just like that, we've added some custom icons to our grid. Nice! Last but not least, let's learn about print friendly layouts in ag-Grid.