Custom Icons Feature Guide

Material React Table uses Material Icons by default for all of its internal icons.

If you need to, you can customize and replace some or all of the icons with your own custom icons. You can either use other Material Icons or icons from a completely different library.

Relevant Props

	#	Prop Name	Type	Default Value	More Info Links
	1		Partial<MRT_Icons>;

To replace a default icon, specify the icon in the icons prop. You should get TS hints for the name of the icons you can replace, but you can also consult this source file for a list of all the icons you can replace.

<MaterialReactTable
  columns={columns}
  data={data}
  icons={{
    //change sort icon, connect internal props so that it gets styled correctly
    ArrowDownwardIcon: (props) =>  <FontAwesomeIcon icon={faSortDown} {...props} />,
    SearchIcon: () => <FontAwesomeIcon icon={faSearch} />,
    SortIcon: (props) => (<FontAwesomeIcon icon={faArrowDownWideShort} {...props} />), //best practice
  }}

Some icons have style props that get applied to them internally. So, in order to preserve the ability of those Icons to be styled with the correct paddings, margins, or rotations, you should pass in {...props} to your custom icon component as a best practice.

Font Awesome Example

Here is an example where we use icons from a completely different library, Font Awesome.

Demo

Open Stackblitz Open Code Sandbox Open on GitHub

Primary

Secondary

Drop to group by

First Name	Last Name	Address	City	State
Dylan	Murray	261 Erdman Ford	East Daphne	Kentucky
Raquel	Kohler	769 Dominic Grove	Columbus	Ohio
Ervin	Reinger	566 Brakus Inlet	South Linda	West Virginia
Brittany	McCullough	722 Emie Stream	Lincoln	Nebraska
Branson	Frami	32188 Larkin Turnpike	Charleston	South Carolina

Source Code

1import React, { useMemo } from 'react';
2import MaterialReactTable, {
3  MRT_ColumnDef,
4  MRT_Icons,
5} from 'material-react-table';
6import { data, Person } from './makeData';
7import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
8import {
9  faArrowDownWideShort,
10  faBars,
11  faBarsStaggered,
12  faColumns,
13  faCompress,
14  faEllipsisH,
15  faEllipsisVertical,
16  faExpand,
17  faEyeSlash,
18  faFilter,
19  faFilterCircleXmark,
20  faGripLines,
21  faSearch,
22  faSearchMinus,
23  faSortDown,
24  faThumbTack,
25} from '@fortawesome/free-solid-svg-icons';
26import '@fortawesome/fontawesome-svg-core/styles.css';
27import { config } from '@fortawesome/fontawesome-svg-core';
28config.autoAddCss = false;
29
30/**
31 * These are just some of the icons visible in this table's feature set.
32 * If you skip customizing some icons, those particular icons will fallback the the default Material-UI icons.
33 */
34const fontAwesomeIcons: Partial<MRT_Icons> = {
35  ArrowDownwardIcon: (props: any) => (
36    <FontAwesomeIcon icon={faSortDown} {...props} />
37  ),
38  ClearAllIcon: () => <FontAwesomeIcon icon={faBarsStaggered} />,
39  DensityLargeIcon: () => <FontAwesomeIcon icon={faGripLines} />,
40  DensityMediumIcon: () => <FontAwesomeIcon icon={faBars} />,
41  DensitySmallIcon: () => <FontAwesomeIcon icon={faBars} />,
42  DragHandleIcon: () => <FontAwesomeIcon icon={faGripLines} />,
43  FilterListIcon: (props: any) => (
44    <FontAwesomeIcon icon={faFilter} {...props} />
45  ),
46  FilterListOffIcon: () => <FontAwesomeIcon icon={faFilterCircleXmark} />,
47  FullscreenExitIcon: () => <FontAwesomeIcon icon={faCompress} />,
48  FullscreenIcon: () => <FontAwesomeIcon icon={faExpand} />,
49  SearchIcon: (props: any) => <FontAwesomeIcon icon={faSearch} {...props} />,
50  SearchOffIcon: () => <FontAwesomeIcon icon={faSearchMinus} />,
51  ViewColumnIcon: () => <FontAwesomeIcon icon={faColumns} />,
52  MoreVertIcon: () => <FontAwesomeIcon icon={faEllipsisVertical} />,
53  MoreHorizIcon: () => <FontAwesomeIcon icon={faEllipsisH} />,
54  SortIcon: (props: any) => (
55    <FontAwesomeIcon icon={faArrowDownWideShort} {...props} /> //props so that style rotation transforms are applied
56  ),
57  PushPinIcon: (props: any) => (
58    <FontAwesomeIcon icon={faThumbTack} {...props} /> //props so that style rotation transforms are applied
59  ),
60  VisibilityOffIcon: () => <FontAwesomeIcon icon={faEyeSlash} />,
61};
62
63const Example = () => {
64  const columns = useMemo(
65    //column definitions...
66    () =>
67      [
68        {
69          accessorKey: 'firstName',
70          header: 'First Name',
71        },
72        {
73          accessorKey: 'lastName',
74          header: 'Last Name',
75        },
76
77        {
78          accessorKey: 'address',
79          header: 'Address',
80        },
81        {
82          accessorKey: 'city',
83          header: 'City',
84        },
85
86        {
87          accessorKey: 'state',
88          header: 'State',
89        },
90      ] as MRT_ColumnDef<Person>[],
91    [], 
92  );
93
94  return (
95    <MaterialReactTable
96      columns={columns}
97      data={data}
98      enableColumnOrdering
99      enablePinning
100      icons={fontAwesomeIcons}
101    />
102  );
103};
104
105export default Example;
106

Relevant Props

Replace with Custom Icons

Font Awesome Example

Demo

Source Code