Material-table: [Docs & Types] Importing icons from @material-ui/icons in TypeScript

[hinsxd]

Importing icons with the way mentioned in tutorial will raise type errors.

import { Icons } from 'material-table';
const tableIcons: Icons = {
  Add: AddBox,
  Check: Check,
  Clear: Clear,
  Delete: DeleteOutline,
  DetailPanel: ChevronRight,
  Edit: Edit,
  Export: SaveAlt,
  Filter: FilterList,
  FirstPage: FirstPage,
  LastPage: LastPage,
  NextPage: ChevronRight,
  PreviousPage: ChevronLeft,
  ResetSearch: Clear,
  Search: Search,
  SortArrow: ArrowUpward,
  ThirdStateCheck: Remove,
  ViewColumn: ViewColumn
};
// Type 'ComponentType<SvgIconProps>' is not assignable to type '(() => ReactElement<any, string ...

The correct way should be

const tableIcons: Icons = {
  Add: () => <AddBox />,
  Check: () => <Check />,
  Clear: () => <Clear />,
  Delete: () => <DeleteOutline />,
  DetailPanel: () => <ChevronRight />,
  Edit: () => <Edit />,
  Export: () => <SaveAlt />,
  Filter: () => <FilterList />,
  FirstPage: () => <FirstPage />,
  LastPage: () => <LastPage />,
  NextPage: () => <ChevronRight />,
  PreviousPage: () => <ChevronLeft />,
  ResetSearch: () => <Clear />,
  Search: () => <Search />,
  SortArrow: () => <ArrowUpward />,
  ThirdStateCheck: () => <Remove />,
  ViewColumn: () => <ViewColumn />
};

It seems that the type of icons are declared as Add?: () => React.ReactElement<any>;, which forces imports to be arrow functions, but the icons are exported from @material-ui/icons as React.ComponentType<SvgIconProps>

[mbrn]

I can change them React.Type. Thanks.

[robinlarsson]

I am also using TypeScript and been struggling with the icons. I have the same solution as @hinsxd and get issues with tooltip:

Warning: Failed prop type: Invalid propchildrensupplied toTooltip. Expected an element that can hold a ref. Did you accidentally use a plain function component for an element instead? For more information see https://material-ui.com/guides/composition/#caveat-with-refs

[argentinaluiz]

@robinlarsson Me too

[tony-molumby]

@mbrn any update on this issue? I am having the same problem as @robinlarsson and @argentinaluiz. The only two icons which throw the error are the Filter and Search Icons:

const icons = {
  Filter: props => <FilterList {...props} />,
  Search: props => <Search {...props} />
}

I am also using TypeScript and been struggling with the icons. I have the same solution as @hinsxd and get issues with tooltip:

Warning: Failed prop type: Invalid propchildrensupplied toTooltip. Expected an element that can hold a ref. Did you accidentally use a plain function component for an element instead? For more information see https://material-ui.com/guides/composition/#caveat-with-refs

[thedanielfactor]

I would like to know if there is any resolution on this. We are trying to use the same thing with TypeScript.

[richardmcconnell12]

I have imported the Icons correctly, and added them according to "Correct way it should be" but receiving an error that reads Generic type 'MaterialTable<RowData>' requires 1 type argument(s).

[sunpar]

I got this working by declaring like this:

import ShowChartIconOutlined from '@material-ui/icons/ShowChartOutlined';
import { SvgIconProps } from '@material-ui/core';

type Menu = {
  id: number;
  icon: (props: SvgIconProps) => JSX.Element;
  label: string;
}[];

const NavBarMenus: Menu = [
  {
    id: 1,
    icon: ShowChartIconOutlined,
    label: 'Dashboard',
  },
...
];

[bargar]

See this comment in related issue mbrn/material-table#1004 for a workaround.

[Domino987]

Closing due to updated docs.