[Icons] Support for Google offical Material Icons font

[quanglam2807]

Google recently released an official font for Material Icons and I think material-ui's FontIcon component should be modified to support this.
This is what I'm using now but it's tricky to use with iconClassName.

<div className="material-icons md-24">&#xE8B6;</div>

or

// > IE 9
<div className="material-icons md-24">search</div>

[mairh]

+1

[metalmatze]

I'm already using it like

<FloatingActionButton>
    <i className="material-icons" style={{color: 'white'}}>add</i>
</FloatingActionButton>

But integrating it would be really nice!

[mariusk]

This solution also works great with .classname:before { content: '...' } for the cases where this library does not pass on children (typically the ligature name).

[ilourt]

@metalmatze

I use your solution, but the icon is not centered in the button. Do you have the same problem?

[metalmatze]

No, that not a problem. But when hovering the button, I get this annoying background.

Otherwise it all seems fine to me.

[mariusk]

That kind of background is actually the same thing that happens when a button wraps an a tag tag (ref. discussion about <SomeButton><Link>...</Link></SomeButton> related to the react-router discussion in another issue.

[ilourt]

I find out the center problem. It is when I use the 'send' icon, for exemple with 'home' icon ther is no problem of centering.