From 69397a6b37677e8e75741d1713b1e752aab5460d Mon Sep 17 00:00:00 2001
From: Alex Sheehan <alex.m.sheehan@gmail.com>
Date: Mon, 19 Dec 2016 11:15:45 -0500
Subject: [PATCH] fix(fab): Mdc web/fix misaligned icons mobile safari (#132)

* fix(mdc-fab): center icons on mobile safari

* fix(mdc-fab): center icons in Edge/IE11 as well

* fix(fab): update order of style rules to pass linter

BREAKING CHANGE: Button implementations in certain browsers such as Mobile Safari and IE11 do not adhere to flexbox rules. To center icons in all supported browsers, add a span element as a child of the button and give it a class of `mdc-fab__icon`

example:
```html```
<button class="mdc-fab material-icons">
  <span class="mdc-fab__icon">
    favorite_border
  </span>
</button>
```
---
 demos/fab.html                | 40 +++++++++++++++++++++++++----------
 packages/mdc-fab/README.md    | 26 +++++++++++++++--------
 packages/mdc-fab/mdc-fab.scss |  7 ++++++
 3 files changed, 53 insertions(+), 20 deletions(-)

diff --git a/demos/fab.html b/demos/fab.html
index 5e2ebcd3df6..22e1c3e8061 100644
--- a/demos/fab.html
+++ b/demos/fab.html
@@ -47,40 +47,58 @@
       <h1>MDC FAB</h1>
 
       <button id="demo-absolute-fab" class="mdc-fab">
-        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-          <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/>
-        </svg>
+        <span class="mdc-fab__icon">
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+            <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/>
+          </svg>
+        </span>
       </button>
 
       <section>
         <fieldset>
           <legend>Normal FABs</legend>
           <button class="mdc-fab material-icons" aria-label="Favorite">
-            favorite_border
+            <span class="mdc-fab__icon">
+              favorite_border
+            </span>
           </button>
           <button class="mdc-fab mdc-fab--mini material-icons" aria-label="Favorite">
-            favorite_border
+            <span class="mdc-fab__icon">
+              favorite_border
+            </span>
           </button>
           <button class="mdc-fab mdc-fab--plain material-icons" aria-label="Favorite">
-            favorite_border
+            <span class="mdc-fab__icon">
+              favorite_border
+            </span>
           </button>
           <button class="mdc-fab mdc-fab--mini mdc-fab--plain material-icons" aria-label="Favorite">
-            favorite_border
+            <span class="mdc-fab__icon">
+              favorite_border
+            </span>
           </button>
         </fieldset>
         <fieldset disabled>
           <legend>Disabled FABs</legend>
           <button class="mdc-fab material-icons" aria-label="Favorite">
-            favorite_border
+            <span class="mdc-fab__icon">
+              favorite_border
+            </span>
           </button>
           <button class="mdc-fab mdc-fab--mini material-icons" aria-label="Favorite">
-            favorite_border
+            <span class="mdc-fab__icon">
+              favorite_border
+            </span>
           </button>
           <button class="mdc-fab mdc-fab--plain material-icons" aria-label="Favorite">
-            favorite_border
+            <span class="mdc-fab__icon">
+              favorite_border
+            </span>
           </button>
           <button class="mdc-fab mdc-fab--mini mdc-fab--plain material-icons" aria-label="Favorite">
-            favorite_border
+            <span class="mdc-fab__icon">
+              favorite_border
+            </span>
           </button>
         </fieldset>
       </section>
diff --git a/packages/mdc-fab/README.md b/packages/mdc-fab/README.md
index 99ed20c515f..c995eb36dcc 100644
--- a/packages/mdc-fab/README.md
+++ b/packages/mdc-fab/README.md
@@ -14,13 +14,15 @@ npm install --save @material/fab
 ## Usage
 
 The demonstrations use the [Material Design Icon Font](https://design.google.com/icons/).
-You may include this to use them as shown or use any other icon method you wish.
+You may include this to use them as shown or use any other icon method you wish. 
 
 ### Default
 
 ```html
 <button class="mdc-fab material-icons" aria-label="Favorite">
-  favorite
+  <span class="mdc-fab__icon">
+    favorite
+  </span>
 </button>
 ```
 
@@ -28,7 +30,9 @@ You may include this to use them as shown or use any other icon method you wish.
 
 ```html
 <button class="mdc-fab mdc-fab--mini material-icons" aria-label="Favorite">
-  favorite
+  <span class="mdc-fab__icon">
+    favorite
+  </span>
 </button>
 ```
 
@@ -36,7 +40,9 @@ You may include this to use them as shown or use any other icon method you wish.
 
 ```html
 <button class="mdc-fab mdc-fab--plain material-icons" aria-label="favorite">
-  favorite
+  <span class="mdc-fab__icon">
+    favorite
+  </span>
 </button>
 ```
 
@@ -65,9 +71,11 @@ Developers must position it as-needed within their applications designs.
 }
 </style>
 <button class="mdc-fab app-fab--absolute" aria-label="Edit">
-  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-    <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/>
-  </svg>
+  <span class="mdc-fab__icon">
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+      <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/>
+    </svg>
+  </span>
 </button>
 ```
 
@@ -80,8 +88,8 @@ Developers must position it as-needed within their applications designs.
 The block class is `mdc-fab`. This defines the top-level button element.
 
 ### Element
-
-The button component has no inner elements.
+The button component has a single `span` element added as a child of the button due to buttons not adhering to flexbox rules 
+in all browsers. See [this Stackoverflow post](http://stackoverflow.com/posts/35466231/revisions) for details.
 
 ### Modifier
 
diff --git a/packages/mdc-fab/mdc-fab.scss b/packages/mdc-fab/mdc-fab.scss
index e587a3db42c..516fd722d5a 100644
--- a/packages/mdc-fab/mdc-fab.scss
+++ b/packages/mdc-fab/mdc-fab.scss
@@ -119,4 +119,11 @@
   }
 }
 
+.mdc-fab__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+}
+
 /* postcss-bem-linter: end */