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

import '@mantine/core/styles.css';
import '@mantine/dates/styles.css'; //if using mantine date picker features
import 'mantine-react-table/styles.css'; //make sure MRT styles were imported in your app root (once)
import { useMemo } from 'react';
import {
  MantineReactTable,
  type MRT_ColumnDef,
  type MRT_Icons,
} from 'mantine-react-table';
import { data, type Person } from './makeData';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {
  faAnglesDown,
  faBars,
  faBarsStaggered,
  faChevronDown,
  faChevronLeft,
  faChevronRight,
  faCircleXmark,
  faColumns,
  faCompress,
  faEdit,
  faEllipsisH,
  faEllipsisV,
  faExpand,
  faEyeSlash,
  faFilter,
  faFilterCircleXmark,
  faFloppyDisk,
  faGrip,
  faLayerGroup,
  faSearch,
  faSearchMinus,
  faSort,
  faSortDown,
  faSortUp,
  faTextWidth,
  faThumbTack,
  faX,
} from '@fortawesome/free-solid-svg-icons'; //replace free solid with your desired icon set
import '@fortawesome/fontawesome-svg-core/styles.css';
import { config } from '@fortawesome/fontawesome-svg-core';
config.autoAddCss = false;

const fontAwesomeIcons: Partial<MRT_Icons> = {
  IconArrowAutofitContent: (props: any) => (
    <FontAwesomeIcon icon={faTextWidth} {...props} />
  ),
  IconArrowsSort: (props: any) => <FontAwesomeIcon icon={faSort} {...props} />,
  IconBoxMultiple: (props: any) => (
    <FontAwesomeIcon icon={faLayerGroup} {...props} />
  ),
  IconChevronDown: (props: any) => (
    <FontAwesomeIcon icon={faChevronDown} {...props} />
  ),
  IconChevronLeft: (props: any) => (
    <FontAwesomeIcon icon={faChevronLeft} {...props} />
  ),
  IconChevronRight: (props: any) => (
    <FontAwesomeIcon icon={faChevronRight} {...props} />
  ),
  IconChevronsDown: (props: any) => (
    <FontAwesomeIcon icon={faAnglesDown} {...props} />
  ),
  IconCircleX: (props: any) => (
    <FontAwesomeIcon icon={faCircleXmark} {...props} />
  ),
  IconClearAll: (props: any) => (
    <FontAwesomeIcon icon={faBarsStaggered} {...props} />
  ),
  IconColumns: (props: any) => <FontAwesomeIcon icon={faColumns} {...props} />,
  IconDeviceFloppy: (props: any) => (
    <FontAwesomeIcon icon={faFloppyDisk} {...props} />
  ),
  IconDots: (props: any) => <FontAwesomeIcon icon={faEllipsisH} {...props} />,
  IconDotsVertical: (props: any) => (
    <FontAwesomeIcon icon={faEllipsisV} {...props} />
  ),
  IconEdit: (props: any) => <FontAwesomeIcon icon={faEdit} {...props} />,
  IconEyeOff: (props: any) => <FontAwesomeIcon icon={faEyeSlash} {...props} />,
  IconFilter: (props: any) => <FontAwesomeIcon icon={faFilter} {...props} />,
  IconFilterOff: (props: any) => (
    <FontAwesomeIcon icon={faFilterCircleXmark} {...props} />
  ),
  IconGripHorizontal: (props: any) => (
    <FontAwesomeIcon icon={faGrip} {...props} />
  ),
  IconMaximize: (props: any) => <FontAwesomeIcon icon={faExpand} {...props} />,
  IconMinimize: (props: any) => (
    <FontAwesomeIcon icon={faCompress} {...props} />
  ),
  IconPinned: (props: any) => <FontAwesomeIcon icon={faThumbTack} {...props} />,
  IconPinnedOff: (props: any) => (
    <FontAwesomeIcon icon={faThumbTack} {...props} />
  ),
  IconSearch: (props: any) => <FontAwesomeIcon icon={faSearch} {...props} />,
  IconSearchOff: (props: any) => (
    <FontAwesomeIcon icon={faSearchMinus} {...props} />
  ),
  IconSortAscending: (props: any) => (
    <FontAwesomeIcon icon={faSortUp} {...props} />
  ),
  IconSortDescending: (props: any) => (
    <FontAwesomeIcon icon={faSortDown} {...props} />
  ),
  IconBaselineDensityLarge: (props: any) => (
    <FontAwesomeIcon icon={faBars} {...props} />
  ),
  IconBaselineDensityMedium: (props: any) => (
    <FontAwesomeIcon icon={faBars} {...props} />
  ),
  IconBaselineDensitySmall: (props: any) => (
    <FontAwesomeIcon icon={faBars} {...props} />
  ),
  IconX: (props: any) => <FontAwesomeIcon icon={faX} {...props} />,
};

const Example = () => {
  const columns = useMemo<MRT_ColumnDef<Person>[]>(
    () => [
      {
        accessorKey: 'firstName',
        header: 'First Name',
      },
      {
        accessorKey: 'lastName',
        header: 'Last Name',
      },

      {
        accessorKey: 'address',
        header: 'Address',
      },
      {
        accessorKey: 'city',
        header: 'City',
      },

      {
        accessorKey: 'state',
        header: 'State',
      },
    ],
    [],
  );

  return (
    <MantineReactTable
      columns={columns}
      data={data}
      editDisplayMode="row"
      enableColumnFilterModes
      enableColumnOrdering
      enableColumnResizing
      enableEditing
      enableGrouping
      enableColumnPinning
      icons={fontAwesomeIcons}
      initialState={{ pagination: { pageSize: 5, pageIndex: 0 } }}
    />
  );
};

export default Example;