Align FontIcon inside Button component

[tarmolov]

At documentation page the icon is accurately align to the left side of the button. But it looks different in my demo.

Code:

<RaisedButton label='Sign in with Github'>
    <FontIcon className="muidocs-icon-custom-github"/>
</RaisedButton>

Styles:

<link href="http://material-ui.com/css/main.css" rel="stylesheet" type="text/css">

I included this css file because I wanted to get the same icon as in doc page. It is just for test.

Of course I can do style inlining for the button and fix the issue. But it doesn't look good for me.

How to align icons inside buttons properly?

[c0b41]

material ui not need css file?

[etmarch]

+1. I tried both "before" and "after" for the labelPosition property, but nothing changed.

[tarmolov]

material ui not need css file?

I included css file from material-ui.com because of using muidocs-icon-custom-github classname. I wanted to reproduce button view exactly as it looks at material-ui.com.

I'll update my post. Thx.

[oliviertassinari]

This partialy solve the issue #2014. We still have before and after option that are inversed.

[ACPK]

+1 for centering the icon.

[RahavLussato]

+1

[mccxiv]

My very first experience with this library: broken buttons

[oliviertassinari]

@subjectix I think that the up coming v0.14 is the right moment to fix this (introduce a small breaking change).

[oliviertassinari]

@mccxiv You are right, the issue is that the demo components are altered by the documentation. We are moving each demo into an isolated component, this will be fixed and shouldn't happnend again.

[alitaheri]

@oliviertassinari Yes I agree. any clue how to solve this? I'm clueless 😬

[zachguo]

I aligned my FontIcon in Button by <FontIcon style={verticalAlign: 'middle', lineHeight: '36px'} ... />

36px is the line height of parent element (here Button)

[oliviertassinari]

#2874 Is partially solving the issue.
We still have a wrong default value for the labelPostion. We should change it for the next breaking changes release: v0.15.0.