Ripple is not centered for a radio button when using an image for the custom icon

[joshunger]

Problem description

The ripple is not centered for a radio button when using an image for the custom icon

Steps to reproduce

const style = {
  img: {
    outline: '1px solid #646e7c',
    //padding: '4px',
    border: '4px solid transparent',
    width: '40px',
    height: '40px'
  },
  radioButtonStyle:
  {
    width: '40px',
    height: '40px',
    display: 'inline-block'
  }
};

            <RadioButton
              value=""
              label=""
              checkedIcon={<img style={style.img} src={require('./placeholder-36x36.png')} />}
              uncheckedIcon={<img style={style.img} src={require('./placeholder-36x36.png')} />}
              style={style.radioButtonStyle}
              iconStyle={{width: '40px', height: '40px'}}
              inputStyle={{width: '40px', height: '40px'}}
            />

Versions

• Material-UI: 0.15.0
• React: 15.0.2
• Browser: Google Chrome 50

EXPECTING: I'm expecting it to be centered or positioned at the click coordinates.

ACTUAL: Always in the bottom right area.

Is there a way to fix this?

[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.