MRT logoMaterial React Table

On This Page

    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 Table Options

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

    Replace with Custom 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 StackblitzOpen Code SandboxOpen on GitHub
    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

    1-5 of 5

    Source Code 

    1import { useMemo } from 'react';
    2import {
    3  MaterialReactTable,
    4  type MRT_ColumnDef,
    5  type MRT_Icons,
    6} from 'material-react-table';
    7import { data, type Person } from './makeData';
    8import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
    9import {
    10  faArrowDownWideShort,
    11  faBars,
    12  faBarsStaggered,
    13  faColumns,
    14  faCompress,
    15  faEllipsisH,
    16  faEllipsisVertical,
    17  faExpand,
    18  faEyeSlash,
    19  faFilter,
    20  faFilterCircleXmark,
    21  faGripLines,
    22  faSearch,
    23  faSearchMinus,
    24  faSortDown,
    25  faThumbTack,
    26} from '@fortawesome/free-solid-svg-icons';
    27import '@fortawesome/fontawesome-svg-core/styles.css';
    28import { config } from '@fortawesome/fontawesome-svg-core';
    29config.autoAddCss = false;
    30

    31/**
    32 * These are just some of the icons visible in this table's feature set.
    33 * If you skip customizing some icons, those particular icons will fallback the the default Material UI icons.
    34 */
    35const fontAwesomeIcons: Partial<MRT_Icons> = {
    36  ArrowDownwardIcon: (props: any) => (
    37    <FontAwesomeIcon icon={faSortDown} {...props} />
    38  ),
    39  ClearAllIcon: () => <FontAwesomeIcon icon={faBarsStaggered} />,
    40  DensityLargeIcon: () => <FontAwesomeIcon icon={faGripLines} />,
    41  DensityMediumIcon: () => <FontAwesomeIcon icon={faBars} />,
    42  DensitySmallIcon: () => <FontAwesomeIcon icon={faBars} />,
    43  DragHandleIcon: () => <FontAwesomeIcon icon={faGripLines} />,
    44  FilterListIcon: (props: any) => (
    45    <FontAwesomeIcon icon={faFilter} {...props} />
    46  ),
    47  FilterListOffIcon: () => <FontAwesomeIcon icon={faFilterCircleXmark} />,
    48  FullscreenExitIcon: () => <FontAwesomeIcon icon={faCompress} />,
    49  FullscreenIcon: () => <FontAwesomeIcon icon={faExpand} />,
    50  SearchIcon: (props: any) => <FontAwesomeIcon icon={faSearch} {...props} />,
    51  SearchOffIcon: () => <FontAwesomeIcon icon={faSearchMinus} />,
    52  ViewColumnIcon: () => <FontAwesomeIcon icon={faColumns} />,
    53  MoreVertIcon: () => <FontAwesomeIcon icon={faEllipsisVertical} />,
    54  MoreHorizIcon: () => <FontAwesomeIcon icon={faEllipsisH} />,
    55  SortIcon: (props: any) => (
    56    <FontAwesomeIcon icon={faArrowDownWideShort} {...props} /> //props so that style rotation transforms are applied
    57  ),
    58  PushPinIcon: (props: any) => (
    59    <FontAwesomeIcon icon={faThumbTack} {...props} /> //props so that style rotation transforms are applied
    60  ),
    61  VisibilityOffIcon: () => <FontAwesomeIcon icon={faEyeSlash} />,
    62};
    63

    64const Example = () => {
    65  const columns = useMemo(
    66    //column definitions...
    93  );
    94

    95  return (
    96    <MaterialReactTable
    97      columns={columns}
    98      data={data}
    99      enableColumnOrdering
    100      enableColumnPinning
    101      icons={fontAwesomeIcons}
    102    />
    103  );
    104};
    105

    106export default Example;
    107