fix(fab): Restore horizontal alignment in IE11

[kfranqueiro]

Also fixes markup to move material-icons to the icon element, as pointed out by Will in #2692.

[williamernest]

It's better than it was, and addresses the issue regarding the icon being on the right, but it's still off in IE11.

We might want to just accept these changes as they are now, to fix the immediate regression, but file a bug to fix this in IE11 once and for all.

Before

After:

The icon on the fab in the bottom right was centered in the second picture.

[codecov-io]

Codecov Report

Merging #2715 into master will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##           master    #2715   +/-   ##
=======================================
  Coverage   98.48%   98.48%           
=======================================
  Files          98       98           
  Lines        4231     4231           
  Branches      538      538           
=======================================
  Hits         4167     4167           
  Misses         64       64

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 463e492...b9ffeb8. Read the comment docs.

[kfranqueiro]

I can file a bug for the vertical alignment. AFAICT, that vertical alignment was a thing (at least according to the in-repo demos and screenshot tests) even prior to the changes to support SVGs in FABs.

The baffling part, though, is that if I throw FABs into a codepen running 0.34.1, they align fine in IE 11... but in our demos on 0.34.1, they don't. Removing normalize.css makes no difference.

Edit: Filed #2752.

[williamernest]

LGTM