Material-ui: Change the color of <ListItem> icons via custom theme

[jampy]

Problem description

This is a <Drawer> with a custom theme (I want the drawer in a dark theme, while the main content uses a light theme):

          <MuiThemeProvider muiTheme={sidebarTheme}>
            <Drawer
              docked={false}
              width={this.props.width}
              open={this.props.openDrawer}
              onRequestChange={this.handleDrawerChange}
            >
              {this.props.drawerContent}
            </Drawer>
          </MuiThemeProvider>

How can I change the color of the left icons?

This is the sidebarTheme I'm using:

import baseTheme from 'material-ui/styles/baseThemes/darkBaseTheme';

import * as colors from 'material-ui/styles/colors';

export default {
  ...baseTheme,
  palette: {
    ...baseTheme.palette,

    canvasColor: colors.green900,
    primary1Color: colors.lime500,

    // just testing:
    listItem: {
      leftIconColor: "#FFFF00",
      rightIconColor: "#FFFF00",
    },

    svgIcon: {
      color: "#FFFF00"
    }
  }
};

I can't find the right setting to change the icon - or, the setting does not work...

Versions

• Material-UI: 0.16.0
• React: 15.3.2
• Browser: Google Chrome 54.0.2840.59 m (64-bit)

[lucasbento]

@jampy: can you please provide a bin to reproduce the code that you provided?

The color of icons should be changed on the content of the drawer (probably <MenuItem /> components) which I can not tell by your code.

[jampy]

@lucasbento I would, but I don't know how to import icons in webpackbin.

[lucasbento]

@jampy: I just commented in the issue, I hope that works for you!

[lucasbento]

Closing this due to inactivity.

[MinaroShikuchi]

See https://github.com/mui-org/material-ui/issues/16572