Polymer has a paper-icon-button
:
https://www.webcomponents.org/element/PolymerElements/paper-icon-button
Polymer also has a paper-fab
:
https://www.webcomponents.org/element/PolymerElements/paper-fab/elements/paper-fab
I understand the design difference; that the material design spec recommends using these differently (e.g. "Only one floating action button is recommended per screen"), but is there really any difference as far as the components go? Or is a paper-fab
just a paper-icon-button
with a pink background, a border radius, and a box shadow (three lines of css?). Basically, I don't understand why I should bother importing both.
As you commented, it is because of its behavior following Material Design spec. <paper-fab>
is intended to represent the primary action of the app while <paper-icon-button>
provide additional functionality.
Let's use Twitter mobile app as an example. In Android, it has a "paper fab" to post new tweets, and we can all agree that the main purpose of Twitter app is to post tweets so it makes sense to place a floating button for that action, while it has additional buttons represented as icons to add functionality, for example the find contacts button that you can find next to the search bar.
Note: Take into account the date this answer was posted as Twitter UI could have been changed since then. If example description is not clear, please comment it and I will try to post a screenshot.
Concerning the implementation in Polymer of these components, both uses <iron-icon>
and we could consider the code "pretty close", you can check them here: <paper-icon-button>
and <paper-fab>
So, in conclusion, despite thinking they are pretty much the same, it is good to use them as different components as they represent different things.