Checked/Unchecked toggle icon behavior consistently generates unexpected result

[thomasgwatson]

Problem Description

The icons don't render 'properly' on the checkbox when 'checked':

When unchecked

When checked

import Checkbox from 'material-ui/lib/checkbox'
import ToggleIconLeft from 'material-ui/lib/svg-icons/hardware/keyboard-arrow-left'
import ToggleIconRight from 'material-ui/lib/svg-icons/hardware/keyboard-arrow-right'

...

<Checkbox
          label='Toggle LeftNav'
          checkedIcon={<ToggleIconLeft />}
          unCheckedIcon={<ToggleIconRight />}
          style={leftNavToggleStyle}
          onTouchTap={this.handleToggle} />

Versions

• Material-UI: 0.14.4
• React: 0.14
• Browser: Chrome 48 and FF 41.0.2

I can't dig into implementation issues and do a PR right now, so going to work-around it but thought it should be flagged.

[oliviertassinari]

We have been porting the component on the next branch. We reimplemented it from the ground-up. While we haven't tested it, I think that the issue is most likely fixed on that branch. Hence, I'm closing it.