MRT logoMaterial React Table

Customizing 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

No Description Provided... Yet...

Replace with Custom Icons

To replace a default icon, you 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.

<MaterialTable
columns={columns}
data={data}
icons={{
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.


First Name
Last Name
Address
City
State
DylanMurray261 Erdman FordEast DaphneKentucky
RaquelKohler769 Dominic GroveColumbusOhio
ErvinReinger566 Brakus InletSouth LindaWest Virginia
BrittanyMcCullough722 Emie StreamLincolnNebraska
BransonFrami32188 Larkin TurnpikeCharlestonSouth Carolina

Rows per page

1-5 of 5

Source Code

1import React, { useMemo } from 'react';
2import MaterialReactTable from 'material-react-table';
3import { data } from './makeData';
4import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
5import {
6 faArrowDownWideShort,
7 faBars,
8 faBarsStaggered,
9 faColumns,
10 faCompress,
11 faEllipsisH,
12 faEllipsisVertical,
13 faExpand,
14 faEyeSlash,
15 faFilter,
16 faFilterCircleXmark,
17 faGripLines,
18 faSearch,
19 faSearchMinus,
20 faThumbTack,
21} from '@fortawesome/free-solid-svg-icons';
22import '@fortawesome/fontawesome-svg-core/styles.css';
23import { config } from '@fortawesome/fontawesome-svg-core';
24config.autoAddCss = false;
25
26/**
27 * These are just some of the icons visible in this table's feature set.
28 * If you skip customizing some icons, those particular icons will fallback the the default Material-UI icons.
29 */
30const fontAwesomeIcons = {
31 ClearAllIcon: () => <FontAwesomeIcon icon={faBarsStaggered} />,
32 DensityLargeIcon: () => <FontAwesomeIcon icon={faGripLines} />,
33 DensityMediumIcon: () => <FontAwesomeIcon icon={faBars} />,
34 DensitySmallIcon: () => <FontAwesomeIcon icon={faBars} />,
35 DragHandleIcon: () => <FontAwesomeIcon icon={faGripLines} />,
36 FilterListIcon: (props) => <FontAwesomeIcon icon={faFilter} {...props} />,
37 FilterListOffIcon: () => <FontAwesomeIcon icon={faFilterCircleXmark} />,
38 FullscreenExitIcon: () => <FontAwesomeIcon icon={faCompress} />,
39 FullscreenIcon: () => <FontAwesomeIcon icon={faExpand} />,
40 SearchIcon: (props) => <FontAwesomeIcon icon={faSearch} {...props} />,
41 SearchOffIcon: () => <FontAwesomeIcon icon={faSearchMinus} />,
42 ViewColumnIcon: () => <FontAwesomeIcon icon={faColumns} />,
43 MoreVertIcon: () => <FontAwesomeIcon icon={faEllipsisVertical} />,
44 MoreHorizIcon: () => <FontAwesomeIcon icon={faEllipsisH} />,
45 SortIcon: (props) => (
46 <FontAwesomeIcon icon={faArrowDownWideShort} {...props} /> //props so that style rotation transforms are applied
47 ),
48 PushPinIcon: (props) => (
49 <FontAwesomeIcon icon={faThumbTack} {...props} /> //props so that style rotation transforms are applied
50 ),
51 VisibilityOffIcon: () => <FontAwesomeIcon icon={faEyeSlash} />,
52};
53
54const Example = () => {
55 const columns = useMemo(
56 //column definitions...
82 );
83
84 return (
85 <MaterialReactTable
86 columns={columns}
87 data={data}
88 enableColumnOrdering
89 enablePinning
90 icons={fontAwesomeIcons}
91 />
92 );
93};
94
95export default Example;
96