Material-ui: [SvgIcon] color in MenuItem

[liesislukas]

Problem description

I use Svg Icon, SelectField & MenuItem.
I want to change Icon's color. It's possible with color attribute, but it's not working inside MenuItem:

I've put same icon's code near menu to show that it works w/o MenuItem

Steps to reproduce

import ActionLabel from 'material-ui/svg-icons/action/label';
import {red500, green500, orange500} from 'material-ui/styles/colors';
import MenuItem from 'material-ui/MenuItem';
import SelectField from 'material-ui/SelectField';

...

<ActionLabel color={orange500} />
<SelectField>
    <MenuItem
       leftIcon={<ActionLabel color={orange500} />}
       value={'medium'} key={'medium'} primaryText={'medium'}
    />
</SelectField>

...

Workaround
I'm adding icon & text as primaryText and it works, but when such item is _selected_ layout goes out, there is extra whitespace around.

<MenuItem value={'medium'} primaryText={<span style={{display: 'flex'}}>
                    <ActionLabel color={orange500}/>
                    <span style={{lineHeight: '25px', marginLeft: 6}}>Medium</span>
                 </span>}/>

Versions

• Material-UI: 0.15.0
• React: 15.1.0
• Browser: Chrome: Version 51.0.2704.84 (64-bit)

[rochdev]

Another workaround that I found for ListItem is to wrap the icon inside an avatar:

<ListItem
  leftAvatar={<Avatar icon={<ActionLabel />} backgroundColor='transparent' color={orange500} />}
/>

[nehalbhanushali]

@liesislukas Yes it does not work in Material-UI: 0.15.0. but it works perfectly fine in Material-UI:0.15.1 without any workaround.

[mpontikes]

@liesislukas Can we close this issue with @nehalbhanushali 's solution?

[liesislukas]

@mpontikes sure, if it works - let's close