IconButton has unbalanced vertical alignment.

[Reanmachine]

When using the <IconButton> with the material design font icons the inner <span> element that displays the material icon does not align properly.

I've confirmed that it's not being acted upon by any outside styles and reproduced the example in the playground on the docs site.

Here is an illustration of the problem:

As you can see the icon isn't aligned with the text next to it, I've even "lit" the background to illustrate that the button itself is centered properly but the icon inside the button is pushed down (look close, you can see the highlighted overlay showing it's off by a few pixels.

Adding vertical-align: top to the <span> seems to fix the problem as shown here:

However I'm not sure why, and it doesn't seem semantically like the correct fix.

Here's the example in the playground:

const ButtonsTest = () => (
  <div>
  <div style={{'margin-bottom': '5px', 'border': '1px solid red', height: '38px'}}>
    <IconButton style={{'background-color': 'blue'}} icon='favorite' accent />
    <span>This is some text!</span>
  </div>
  <div style={{'border': '1px solid red', height: '38px'}}>
    <IconButton icon='favorite' accent />
    <span>This is some text!</span>
  </div>
  </div>
);

return <ButtonsTest />