React Material-UI Cookbook

There's more...

In addition to formatting header text, you can add other components, such as icons. Let's modify the example to include icons for each panel header. First, you'll import the icons that you need:

import DevicesIcon from 'material-ui/icons/Devices';import NetworkWifiIcon from 'material-ui/icons/NetworkWifi';import StorageIcon from '@material-ui/icons/Storage';

Then, you'll add a new icon style that adds space between the icon and text in the panel header:

const styles = theme => ({  icon: {    marginRight: theme.spacing(1)  }});

Lastly, here's the markup to include the icons that you've imported in the appropriate panel header:

<Fragment>  <ExpansionPanel>    <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}> <DevicesIcon className={classes.icon} ...