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

[frol]

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]

Do you have the dense icons disabled for this to happen? It looks like it is displaying correctly at https://react-md.next.mlaursen.com/components/buttons#floating-buttons

[frol]

Does the documentation site use React-MD 1.1.x? The FAB works fine with 1.0.x, but behaves like presented on the screenshot with React-MD 1.1.0-alpha-7 (I don't have an opportunity to check it with the latest alpha release now, but alpha-7 was the latest at the time of reporting)

[mlaursen]

The url posted above uses 1.1.x and I don't think I updated any button styles between 7 and 8.

I'm mostly trying to figure out if it is a css import order type thing that I need to try to fix on my end or document better. So any additional info you can provide me will help :)

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

[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