[Button] - FAB icon is not centered on wide screens

Description

The style seems to use wrong height/width values for the FAB (floating button) on wide screens:

.md-btn--floating{height:48px;padding:14px;width:48px}

It seems it should use 56px instead of 48px.

Images/Screenshots

Version

• React 15.6.1
• React-MD 1.1.0-alpha-7

[mlaursen]

I could update the styles to something like this:

@media #{$md-desktop-media} {
  .md-icon.material-icons {
    font-size: 20px;
  }
}

which would work for these cases. It would just be harder to manually update the size of icons anywhere else. Maybe this isn’t too bad since there is the forceSize prop on the FontIcon? I’ll either update the documentation to tell the import order, or add this. I’ll close once I decide or if anyone else has opinions

[frol]

OK, I figured the root cause: I include material-icons-fontface.css AFTER the React-MD style sheets, and .material-icons class overrides the font-size. If I swap the <link> tags so Material icons style sheets are included BEFORE the React-MD ones, the issue goes away.

React-MD 1.0.x doesn’t change the size of the FAB button based on the screen size, which is why it works fine there.

I am not sure I like the idea of importing fonts before React-MD styles, but I can live with it. Feel free to close the issue if there is nothing you can do about it.