Custom Icons Feature Guide

Mantine React Table uses Tabler 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 Tabler Icons or icons from a completely different library.

Relevant Table Options

	#	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.

const faIcons: Partial<MRT_Icons> = {
  //change sort icon, connect internal props so that it gets styled correctly
  IconArrowDown: (props) => <FontAwesomeIcon icon={faSortDown} {...props} />,
  IconSearch: () => <FontAwesomeIcon icon={faSearch} />,
  IconArrowsSort: (props) => (
    <FontAwesomeIcon icon={faArrowDownWideShort} {...props} />
  ),
};

const table = useMantineReactTable({
  columns,
  data,
  icons: faIcons,
});

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.

Note: This example is only using the free solid icons from Font Awesome. If you want to use the pro icons, you will need to import the pro icons from Font Awesome and use those instead.

Demo

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

Rows per page

1-5 of 11

1
import { useMemo } from 'react';
2
import {
3
  MantineReactTable,
4
  type MRT_ColumnDef,
5
  type MRT_Icons,
6
} from 'mantine-react-table';
7
import { data, type Person } from './makeData';
8
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
9
import {
10
  faAnglesDown,
11
  faBars,
12
  faBarsStaggered,
13
  faChevronDown,
14
  faChevronLeft,
15
  faChevronRight,
16
  faCircleXmark,
17
  faColumns,
18
  faCompress,
19
  faEdit,
20
  faEllipsisH,
21
  faEllipsisV,
22
  faExpand,
23
  faEyeSlash,
24
  faFilter,
25
  faFilterCircleXmark,
26
  faFloppyDisk,
27
  faGrip,
28
  faLayerGroup,
29
  faSearch,
30
  faSearchMinus,
31
  faSort,
32
  faSortDown,
33
  faSortUp,
34
  faTextWidth,
35
  faThumbTack,
36
  faX,
37
} from '@fortawesome/free-solid-svg-icons'; //replace free solid with your desired icon set
38
import '@fortawesome/fontawesome-svg-core/styles.css';
39
import { config } from '@fortawesome/fontawesome-svg-core';
40
config.autoAddCss = false;
41

42
const fontAwesomeIcons: Partial<MRT_Icons> = {
43
  IconArrowAutofitContent: (props: any) => (
44
    <FontAwesomeIcon icon={faTextWidth} {...props} />
45
  ),
46
  IconArrowsSort: (props: any) => <FontAwesomeIcon icon={faSort} {...props} />,
47
  IconBoxMultiple: (props: any) => (
48
    <FontAwesomeIcon icon={faLayerGroup} {...props} />
49
  ),
50
  IconChevronDown: (props: any) => (
51
    <FontAwesomeIcon icon={faChevronDown} {...props} />
52
  ),
53
  IconChevronLeft: (props: any) => (
54
    <FontAwesomeIcon icon={faChevronLeft} {...props} />
55
  ),
56
  IconChevronRight: (props: any) => (
57
    <FontAwesomeIcon icon={faChevronRight} {...props} />
58
  ),
59
  IconChevronsDown: (props: any) => (
60
    <FontAwesomeIcon icon={faAnglesDown} {...props} />
61
  ),
62
  IconCircleX: (props: any) => (
63
    <FontAwesomeIcon icon={faCircleXmark} {...props} />
64
  ),
65
  IconClearAll: (props: any) => (
66
    <FontAwesomeIcon icon={faBarsStaggered} {...props} />
67
  ),
68
  IconColumns: (props: any) => <FontAwesomeIcon icon={faColumns} {...props} />,
69
  IconDeviceFloppy: (props: any) => (
70
    <FontAwesomeIcon icon={faFloppyDisk} {...props} />
71
  ),
72
  IconDots: (props: any) => <FontAwesomeIcon icon={faEllipsisH} {...props} />,
73
  IconDotsVertical: (props: any) => (
74
    <FontAwesomeIcon icon={faEllipsisV} {...props} />
75
  ),
76
  IconEdit: (props: any) => <FontAwesomeIcon icon={faEdit} {...props} />,
77
  IconEyeOff: (props: any) => <FontAwesomeIcon icon={faEyeSlash} {...props} />,
78
  IconFilter: (props: any) => <FontAwesomeIcon icon={faFilter} {...props} />,
79
  IconFilterOff: (props: any) => (
80
    <FontAwesomeIcon icon={faFilterCircleXmark} {...props} />
81
  ),
82
  IconGripHorizontal: (props: any) => (
83
    <FontAwesomeIcon icon={faGrip} {...props} />
84
  ),
85
  IconMaximize: (props: any) => <FontAwesomeIcon icon={faExpand} {...props} />,
86
  IconMinimize: (props: any) => (
87
    <FontAwesomeIcon icon={faCompress} {...props} />
88
  ),
89
  IconPinned: (props: any) => <FontAwesomeIcon icon={faThumbTack} {...props} />,
90
  IconPinnedOff: (props: any) => (
91
    <FontAwesomeIcon icon={faThumbTack} {...props} />
92
  ),
93
  IconSearch: (props: any) => <FontAwesomeIcon icon={faSearch} {...props} />,
94
  IconSearchOff: (props: any) => (
95
    <FontAwesomeIcon icon={faSearchMinus} {...props} />
96
  ),
97
  IconSortAscending: (props: any) => (
98
    <FontAwesomeIcon icon={faSortUp} {...props} />
99
  ),
100
  IconSortDescending: (props: any) => (
101
    <FontAwesomeIcon icon={faSortDown} {...props} />
102
  ),
103
  IconBaselineDensityLarge: (props: any) => (
104
    <FontAwesomeIcon icon={faBars} {...props} />
105
  ),
106
  IconBaselineDensityMedium: (props: any) => (
107
    <FontAwesomeIcon icon={faBars} {...props} />
108
  ),
109
  IconBaselineDensitySmall: (props: any) => (
110
    <FontAwesomeIcon icon={faBars} {...props} />
111
  ),
112
  IconX: (props: any) => <FontAwesomeIcon icon={faX} {...props} />,
113
};
114

115
const Example = () => {
116
  const columns = useMemo<MRT_ColumnDef<Person>[]>(
117
    () => [
118
      {
119
        accessorKey: 'firstName',
120
        header: 'First Name',
121
      },
122
      {
123
        accessorKey: 'lastName',
124
        header: 'Last Name',
125
      },
126

127
      {
128
        accessorKey: 'address',
129
        header: 'Address',
130
      },
131
      {
132
        accessorKey: 'city',
133
        header: 'City',
134
      },
135

136
      {
137
        accessorKey: 'state',
138
        header: 'State',
139
      },
140
    ],
141
    [],
142
  );
143

144
  return (
145
    <MantineReactTable
146
      columns={columns}
147
      data={data}
148
      editDisplayMode="row"
149
      enableColumnFilterModes
150
      enableColumnOrdering
151
      enableColumnResizing
152
      enableEditing
153
      enableGrouping
154
      enablePinning
155
      icons={fontAwesomeIcons}
156
      initialState={{ pagination: { pageSize: 5, pageIndex: 0 } }}
157
    />
158
  );
159
};
160

161
export default Example;

1
import { useMemo } from 'react';
2
import { MantineReactTable } from 'mantine-react-table';
3
import { data } from './makeData';
4
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
5
import {
6
  faAnglesDown,
7
  faBars,
8
  faBarsStaggered,
9
  faChevronDown,
10
  faChevronLeft,
11
  faChevronRight,
12
  faCircleXmark,
13
  faColumns,
14
  faCompress,
15
  faEdit,
16
  faEllipsisH,
17
  faEllipsisV,
18
  faExpand,
19
  faEyeSlash,
20
  faFilter,
21
  faFilterCircleXmark,
22
  faFloppyDisk,
23
  faGrip,
24
  faLayerGroup,
25
  faSearch,
26
  faSearchMinus,
27
  faSort,
28
  faSortDown,
29
  faSortUp,
30
  faTextWidth,
31
  faThumbTack,
32
  faX,
33
} from '@fortawesome/free-solid-svg-icons'; //replace free solid with your desired icon set
34
import '@fortawesome/fontawesome-svg-core/styles.css';
35
import { config } from '@fortawesome/fontawesome-svg-core';
36
config.autoAddCss = false;
37

38
const fontAwesomeIcons = {
39
  IconArrowAutofitContent: (props) => (
40
    <FontAwesomeIcon icon={faTextWidth} {...props} />
41
  ),
42
  IconArrowsSort: (props) => <FontAwesomeIcon icon={faSort} {...props} />,
43
  IconBoxMultiple: (props) => (
44
    <FontAwesomeIcon icon={faLayerGroup} {...props} />
45
  ),
46
  IconChevronDown: (props) => (
47
    <FontAwesomeIcon icon={faChevronDown} {...props} />
48
  ),
49
  IconChevronLeft: (props) => (
50
    <FontAwesomeIcon icon={faChevronLeft} {...props} />
51
  ),
52
  IconChevronRight: (props) => (
53
    <FontAwesomeIcon icon={faChevronRight} {...props} />
54
  ),
55
  IconChevronsDown: (props) => (
56
    <FontAwesomeIcon icon={faAnglesDown} {...props} />
57
  ),
58
  IconCircleX: (props) => <FontAwesomeIcon icon={faCircleXmark} {...props} />,
59
  IconClearAll: (props) => (
60
    <FontAwesomeIcon icon={faBarsStaggered} {...props} />
61
  ),
62
  IconColumns: (props) => <FontAwesomeIcon icon={faColumns} {...props} />,
63
  IconDeviceFloppy: (props) => (
64
    <FontAwesomeIcon icon={faFloppyDisk} {...props} />
65
  ),
66
  IconDots: (props) => <FontAwesomeIcon icon={faEllipsisH} {...props} />,
67
  IconDotsVertical: (props) => (
68
    <FontAwesomeIcon icon={faEllipsisV} {...props} />
69
  ),
70
  IconEdit: (props) => <FontAwesomeIcon icon={faEdit} {...props} />,
71
  IconEyeOff: (props) => <FontAwesomeIcon icon={faEyeSlash} {...props} />,
72
  IconFilter: (props) => <FontAwesomeIcon icon={faFilter} {...props} />,
73
  IconFilterOff: (props) => (
74
    <FontAwesomeIcon icon={faFilterCircleXmark} {...props} />
75
  ),
76
  IconGripHorizontal: (props) => <FontAwesomeIcon icon={faGrip} {...props} />,
77
  IconMaximize: (props) => <FontAwesomeIcon icon={faExpand} {...props} />,
78
  IconMinimize: (props) => <FontAwesomeIcon icon={faCompress} {...props} />,
79
  IconPinned: (props) => <FontAwesomeIcon icon={faThumbTack} {...props} />,
80
  IconPinnedOff: (props) => <FontAwesomeIcon icon={faThumbTack} {...props} />,
81
  IconSearch: (props) => <FontAwesomeIcon icon={faSearch} {...props} />,
82
  IconSearchOff: (props) => <FontAwesomeIcon icon={faSearchMinus} {...props} />,
83
  IconSortAscending: (props) => <FontAwesomeIcon icon={faSortUp} {...props} />,
84
  IconSortDescending: (props) => (
85
    <FontAwesomeIcon icon={faSortDown} {...props} />
86
  ),
87
  IconBaselineDensityLarge: (props) => (
88
    <FontAwesomeIcon icon={faBars} {...props} />
89
  ),
90
  IconBaselineDensityMedium: (props) => (
91
    <FontAwesomeIcon icon={faBars} {...props} />
92
  ),
93
  IconBaselineDensitySmall: (props) => (
94
    <FontAwesomeIcon icon={faBars} {...props} />
95
  ),
96
  IconX: (props) => <FontAwesomeIcon icon={faX} {...props} />,
97
};
98

99
const Example = () => {
100
  const columns = useMemo(
101
    () => [
102
      {
103
        accessorKey: 'firstName',
104
        header: 'First Name',
105
      },
106
      {
107
        accessorKey: 'lastName',
108
        header: 'Last Name',
109
      },
110

111
      {
112
        accessorKey: 'address',
113
        header: 'Address',
114
      },
115
      {
116
        accessorKey: 'city',
117
        header: 'City',
118
      },
119

120
      {
121
        accessorKey: 'state',
122
        header: 'State',
123
      },
124
    ],
125
    [],
126
  );
127

128
  return (
129
    <MantineReactTable
130
      columns={columns}
131
      data={data}
132
      editDisplayMode="row"
133
      enableColumnFilterModes
134
      enableColumnOrdering
135
      enableColumnResizing
136
      enableEditing
137
      enableGrouping
138
      enablePinning
139
      icons={fontAwesomeIcons}
140
      initialState={{ pagination: { pageSize: 5, pageIndex: 0 } }}
141
    />
142
  );
143
};
144

145
export default Example;