ListItemIcon with Typescript

I am using the latest version of the material-ui theme with typescript but I get the below error when trying to define a ListItemIcon. Any ideas what am I doing wrong? the issue seems to be down to the icon type as the children property resolves to shouldUpdate() instead of a ReactElement…

import {
    **Dashboard**
} from 'material-ui-icons';

export type AppRoute = {
    redirect?: boolean,
    to: string,
    from?: LocationDescriptor,
    path: string,
    **icon?: React.ComponentType<SvgIconProps>,**
    sidebarName?: string,
    navbarName: string,
    component?: React.ComponentType
};

const appRoutes: Array<AppRoute> = [
    {
        path: '/dashboard',
        sidebarName: 'Dashboard',
        navbarName: 'Material Dashboard',
        to: '',
        **icon: Dashboard,**
        component: DashboardPage
    },
    {redirect: true, path: '/', to: '/dashboard', navbarName: 'Redirect'}
];

<ListItem button={true} className={classes.itemLink}>
                            <ListItemIcon className={classes.itemIcon + whiteFontClasses + listItemClasses}>
                                {prop.icon}
                            </ListItemIcon>
                            <ListItemText
                                primary={prop.sidebarName}
                                className={classes.itemText + whiteFontClasses}
                                disableTypography={true}
                            />
                        </ListItem>

index.js:2177 Warning: Failed prop type: Invalid prop children of type function supplied to ListItemIcon, expected a single ReactElement. in ListItemIcon (created by WithStyles(ListItemIcon)) in WithStyles(ListItemIcon) (created by Sidebar) in div (created by ButtonBase) in ButtonBase (created by WithStyles(ButtonBase)) in WithStyles(ButtonBase) (created by ListItem) in ListItem (created by WithStyles(ListItem)) in WithStyles(ListItem) (created by Sidebar) in a (created by Link) in Link (created by Route) in Route (created by NavLink) in NavLink (created by Sidebar) in ul (created by List) in List (created by WithStyles(List)) in WithStyles(List) (created by Sidebar) in div (created by Sidebar) in div (created by Paper) in Paper (created by WithStyles(Paper)) in WithStyles(Paper) (created by Drawer) in div (created by Drawer) in Drawer (created by WithStyles(Drawer)) in WithStyles(Drawer) (created by Sidebar) in HiddenJs (created by WithWidth(HiddenJs)) in EventListener (created by WithWidth(HiddenJs)) in WithWidth(HiddenJs) (created by WithTheme(WithWidth(HiddenJs))) in WithTheme(WithWidth(HiddenJs)) (created by Hidden) in Hidden (created by Sidebar) in div (created by Sidebar) in Sidebar (created by WithStyles(Sidebar)) in WithStyles(Sidebar) (created by App) in div (created by App) in App (created by WithStyles(App)) in WithStyles(App) (created by Route) in Route in Switch in Router

[jesserwright]

I encountered a similar issue, and was able to use the SvgIconProps from the SvgIcon export:

import RoomIcon from '@material-ui/icons/Room'
import PeopleIcon from '@material-ui/icons/People'
import { SvgIconProps } from '@material-ui/core/SvgIcon'

type Description = {
  icon: React.ReactElement<SvgIconProps>
  title: string
  body: string
}

const descriptions: Description[] = [
  {
    icon: <RoomIcon />,
    title: 'Location',
    body: 'A place containing Lines.'
  },
  {
    icon: <PeopleIcon />,
    title: 'Line',
    body: 'A place containing Sections.'
  }
]

[kwo]

I had the same issue. The problem is that you must set the icon as an element with the starting and closing tags. So icon: <DashboardIcon/> (react element) instead of just icon: Dashboard (react component).