From fa415797bed1126073fe7fb6aa421b179b51a4a4 Mon Sep 17 00:00:00 2001
From: "Kenneth G. Franqueiro" <kfranqueiro@users.noreply.github.com>
Date: Wed, 12 Dec 2018 15:22:17 -0500
Subject: [PATCH] feat(button): Add trailing icon support via label element
 (#4159)

BREAKING CHANGE: We recommend placing each button's text label within a mdc-button__label element. This does not immediately break existing MDC Button usage, but updating is recommended to future-proof against potential upcoming changes.
---
 packages/mdc-button/README.md                 |  31 ++-
 packages/mdc-button/_mixins.scss              |   8 +
 packages/mdc-button/mdc-button.scss           |  16 +-
 packages/mdc-card/README.md                   |  26 ++-
 packages/mdc-dialog/README.md                 |  24 ++-
 test/screenshot/golden.json                   |  78 ++++---
 .../classes/baseline-button-with-icons.html   |  17 +-
 .../baseline-button-with-trailing-icons.html  | 183 ++++++++++++++++
 .../baseline-button-without-icons.html        |  18 +-
 .../classes/baseline-link-with-icons.html     |  81 ++++++-
 .../classes/baseline-link-without-icons.html  |  33 ++-
 .../classes/dense-button-with-icons.html      |  17 +-
 .../dense-button-with-trailing-icons.html     | 199 ++++++++++++++++++
 .../classes/dense-button-without-icons.html   |  34 ++-
 .../classes/dense-link-with-icons.html        |  89 +++++++-
 .../classes/dense-link-without-icons.html     |  33 ++-
 .../mixins/container-fill-color.html          |  12 +-
 .../mdc-button/mixins/filled-accessible.html  |  16 +-
 .../mixins/horizontal-padding-baseline.html   |  57 +++--
 .../mixins/horizontal-padding-dense.html      |  57 +++--
 .../spec/mdc-button/mixins/icon-color.html    |  78 ++++++-
 .../spec/mdc-button/mixins/ink-color.html     |  32 +--
 .../spec/mdc-button/mixins/shape-radius.html  |  32 ++-
 .../spec/mdc-button/mixins/stroke-color.html  |  12 +-
 .../spec/mdc-button/mixins/stroke-width.html  |  62 ++++--
 .../classes/baseline-alert-above-drawer.html  |   4 +-
 .../classes/baseline-alert-with-title.html    |   4 +-
 .../mdc-dialog/classes/baseline-alert.html    |   4 +-
 .../classes/baseline-confirmation.html        |   4 +-
 .../classes/manual-window-resize.html         |   6 +-
 .../overflow-accessible-font-size.html        |   8 +-
 .../mdc-dialog/classes/overflow-bottom.html   |   8 +-
 .../spec/mdc-dialog/classes/overflow-top.html |   8 +-
 .../spec/mdc-dialog/issues/3717.html          |   4 +-
 .../mixins/container-fill-color.html          |   6 +-
 .../mdc-dialog/mixins/content-ink-color.html  |   6 +-
 .../spec/mdc-dialog/mixins/max-height.html    |   8 +-
 .../spec/mdc-dialog/mixins/max-width.html     |   8 +-
 .../spec/mdc-dialog/mixins/min-width.html     |   2 +-
 .../spec/mdc-dialog/mixins/scrim-color.html   |   6 +-
 .../mixins/scroll-divider-color.html          |   6 +-
 .../spec/mdc-dialog/mixins/shape-radius.html  |   6 +-
 .../mdc-dialog/mixins/title-ink-color.html    |   6 +-
 test/unit/mdc-dialog/mdc-dialog.test.js       |  15 +-
 44 files changed, 1111 insertions(+), 253 deletions(-)
 create mode 100644 test/screenshot/spec/mdc-button/classes/baseline-button-with-trailing-icons.html
 create mode 100644 test/screenshot/spec/mdc-button/classes/dense-button-with-trailing-icons.html

diff --git a/packages/mdc-button/README.md b/packages/mdc-button/README.md
index 58f6b12d3d4..1c7443e87af 100644
--- a/packages/mdc-button/README.md
+++ b/packages/mdc-button/README.md
@@ -41,7 +41,7 @@ npm install @material/button
 
 ```html
 <button class="mdc-button">
-  Button
+  <span class="mdc-button__label">Button</span>
 </button>
 ```
 
@@ -92,7 +92,7 @@ To add an icon, add an element with the `mdc-button__icon` class inside the butt
 ```html
 <button class="mdc-button">
   <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
-  Button
+  <span class="mdc-button__label">Button</span>
 </button>
 ```
 
@@ -103,10 +103,24 @@ It's also possible to use an SVG icon:
   <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="...">
   ...
   </svg>
-  Button
+  <span class="mdc-button__label">Button</span>
 </button>
 ```
 
+#### Trailing Icon
+
+Certain icons make more sense to appear after the button's text label rather than before. This can be accomplished by
+putting the icon markup _after_ the `mdc-button__label` element.
+
+```html
+<button class="mdc-button">
+  <span class="mdc-button__label">Button</span>
+  <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
+</button>
+```
+
+> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.
+
 ### Disabled
 
 To disable a button, add the `disabled` attribute directly to the `<button>`, or set the `disabled` attribute on the `<fieldset>` containing the button.
@@ -114,7 +128,7 @@ Disabled buttons cannot be interacted with and have no visual interaction effect
 
 ```html
 <button class="mdc-button" disabled>
-  Button
+  <span class="mdc-button__label">Button</span>
 </button>
 ```
 
@@ -129,7 +143,14 @@ CSS Class | Description
 `mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.
 `mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.
 `mdc-button--dense` | Optional. Makes the button text and container slightly smaller.
-`mdc-button__icon` | Optional. Indicates an icon element.
+`mdc-button__label` | Recommended.\* Indicates the element containing the button's text label.
+`mdc-button__icon` | Optional. Indicates the element containing the button's icon.
+
+> \*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for
+> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist
+> directly within the `mdc-button` element.
+> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to
+> always include it to be future-proof.
 
 ### Sass Mixins
 
diff --git a/packages/mdc-button/_mixins.scss b/packages/mdc-button/_mixins.scss
index 3d9eeadecf7..dcca2fc187c 100644
--- a/packages/mdc-button/_mixins.scss
+++ b/packages/mdc-button/_mixins.scss
@@ -147,6 +147,10 @@
   vertical-align: top;
 }
 
+@mixin mdc-button__icon-trailing_ {
+  @include mdc-rtl-reflexive-box(margin, left, 8px);
+}
+
 @mixin mdc-button__icon-svg_ {
   fill: currentColor;
 }
@@ -155,6 +159,10 @@
   @include mdc-rtl-reflexive-property(margin, -4px, 8px);
 }
 
+@mixin mdc-button__icon-contained-trailing_ {
+  @include mdc-rtl-reflexive-property(margin, 8px, -4px);
+}
+
 @mixin mdc-button--outlined_() {
   border-style: solid;
 
diff --git a/packages/mdc-button/mdc-button.scss b/packages/mdc-button/mdc-button.scss
index c6a16ce0eb8..4500f85e489 100644
--- a/packages/mdc-button/mdc-button.scss
+++ b/packages/mdc-button/mdc-button.scss
@@ -40,11 +40,15 @@
   .mdc-button__icon {
     @include mdc-button__icon_;
   }
+}
 
-  // stylelint-disable-next-line selector-no-qualifying-type
-  svg.mdc-button__icon {
-    @include mdc-button__icon-svg_;
-  }
+.mdc-button__label + .mdc-button__icon {
+  @include mdc-button__icon-trailing_;
+}
+
+// stylelint-disable-next-line selector-no-qualifying-type
+svg.mdc-button__icon {
+  @include mdc-button__icon-svg_;
 }
 
 .mdc-button--raised,
@@ -54,6 +58,10 @@
     // Icons inside contained buttons have different styles due to increased button padding
     @include mdc-button__icon-contained_;
   }
+
+  .mdc-button__label + .mdc-button__icon {
+    @include mdc-button__icon-contained-trailing_;
+  }
 }
 
 .mdc-button--raised,
diff --git a/packages/mdc-card/README.md b/packages/mdc-card/README.md
index 0963b8a0f5c..df9e98ec292 100644
--- a/packages/mdc-card/README.md
+++ b/packages/mdc-card/README.md
@@ -57,8 +57,12 @@ Fully-featured:
   <!-- ... content ... -->
   <div class="mdc-card__actions">
     <div class="mdc-card__action-buttons">
-      <button class="mdc-button mdc-card__action mdc-card__action--button">Action 1</button>
-      <button class="mdc-button mdc-card__action mdc-card__action--button">Action 2</button>
+      <button class="mdc-button mdc-card__action mdc-card__action--button">
+        <span class="mdc-button__label">Action 1</span>
+      </button>
+      <button class="mdc-button mdc-card__action mdc-card__action--button">
+        <span class="mdc-button__label">Action 2</span>
+      </button>
     </div>
     <div class="mdc-card__action-icons">
       <button class="material-icons mdc-icon-button mdc-card__action mdc-card__action--icon" title="Share">share</button>
@@ -123,8 +127,12 @@ and the [optional modifier classes](#css-classes).
 
 ```html
 <div class="mdc-card__actions">
-  <button class="mdc-button mdc-card__action mdc-card__action--button">Action 1</button>
-  <button class="mdc-button mdc-card__action mdc-card__action--button">Action 2</button>
+  <button class="mdc-button mdc-card__action mdc-card__action--button">
+    <span class="mdc-button__label">Action 1</span>
+  </button>
+  <button class="mdc-button mdc-card__action mdc-card__action--button">
+    <span class="mdc-button__label">Action 2</span>
+  </button>
 </div>
 ```
 
@@ -153,7 +161,7 @@ To have a single action button take up the entire width of the action row, use t
 ```html
 <div class="mdc-card__actions mdc-card__actions--full-bleed">
   <a class="mdc-button mdc-card__action mdc-card__action--button" href="#">
-    All Business Headlines
+    <span class="mdc-button__label">All Business Headlines</span>
     <i class="material-icons" aria-hidden="true">arrow_forward</i>
   </a>
 </div>
@@ -165,8 +173,12 @@ elements:
 ```html
 <div class="mdc-card__actions">
   <div class="mdc-card__action-buttons">
-    <button class="mdc-button mdc-card__action mdc-card__action--button">Read</button>
-    <button class="mdc-button mdc-card__action mdc-card__action--button">Bookmark</button>
+    <button class="mdc-button mdc-card__action mdc-card__action--button">
+      <span class="mdc-button__label">Read</span>
+    </button>
+    <button class="mdc-button mdc-card__action mdc-card__action--button">
+      <span class="mdc-button__label">Bookmark</span>
+    </button>
   </div>
   <div class="mdc-card__action-icons">
    <button class="material-icons mdc-icon-button mdc-card__action mdc-card__action--icon" title="Share">share</button>
diff --git a/packages/mdc-dialog/README.md b/packages/mdc-dialog/README.md
index 0253e8aab35..915df3258c9 100644
--- a/packages/mdc-dialog/README.md
+++ b/packages/mdc-dialog/README.md
@@ -55,8 +55,12 @@ npm install @material/dialog
         Dialog body text goes here.
       </div>
       <footer class="mdc-dialog__actions">
-        <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="no">No</button>
-        <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="yes">Yes</button>
+        <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="no">
+          <span class="mdc-button__label">No</span>
+        </button>
+        <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="yes">
+          <span class="mdc-button__label">Yes</span>
+        </button>
       </footer>
     </div>
   </div>
@@ -177,8 +181,12 @@ radio buttons (indicating single selection) or checkboxes (indicating multiple s
         </ul>
       </div>
       <footer class="mdc-dialog__actions">
-        <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="close">Cancel</button>
-        <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="accept">OK</button>
+        <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="close">
+          <span class="mdc-button__label">Cancel</span>
+        </button>
+        <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="accept">
+          <span class="mdc-button__label">OK</span>
+        </button>
       </footer>
     </div>
   </div>
@@ -245,8 +253,12 @@ For example:
 ```html
 ...
 <footer class="mdc-dialog__actions">
-  <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="close">Cancel</button>
-  <button type="button" class="mdc-button mdc-dialog__button mdc-dialog__button--default" data-mdc-dialog-action="accept">OK</button>
+  <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="close">
+    <span class="mdc-button__label">Cancel</span>
+  </button>
+  <button type="button" class="mdc-button mdc-dialog__button mdc-dialog__button--default" data-mdc-dialog-action="accept">
+    <span class="mdc-button__label">OK</span>
+  </button>
 </footer>
 ...
 ```
diff --git a/test/screenshot/golden.json b/test/screenshot/golden.json
index 5de39555716..d32ec017835 100644
--- a/test/screenshot/golden.json
+++ b/test/screenshot/golden.json
@@ -8,6 +8,15 @@
       "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/09/13/21_47_32_548/spec/mdc-button/classes/baseline-button-with-icons.html.windows_ie_11.png"
     }
   },
+  "spec/mdc-button/classes/baseline-button-with-trailing-icons.html": {
+    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/12/10/17_38_00_089/spec/mdc-button/classes/baseline-button-with-trailing-icons.html?utm_source=golden_json",
+    "screenshots": {
+      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/12/10/17_38_00_089/spec/mdc-button/classes/baseline-button-with-trailing-icons.html.windows_chrome_71.png",
+      "desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/12/10/17_38_00_089/spec/mdc-button/classes/baseline-button-with-trailing-icons.html.windows_edge_17.png",
+      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/12/10/17_38_00_089/spec/mdc-button/classes/baseline-button-with-trailing-icons.html.windows_firefox_63.png",
+      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/12/10/17_38_00_089/spec/mdc-button/classes/baseline-button-with-trailing-icons.html.windows_ie_11.png"
+    }
+  },
   "spec/mdc-button/classes/baseline-button-without-icons.html": {
     "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/09/13/21_47_32_548/spec/mdc-button/classes/baseline-button-without-icons.html?utm_source=golden_json",
     "screenshots": {
@@ -18,12 +27,12 @@
     }
   },
   "spec/mdc-button/classes/baseline-link-with-icons.html": {
-    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/09/13/21_47_32_548/spec/mdc-button/classes/baseline-link-with-icons.html?utm_source=golden_json",
+    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/12/10/17_38_00_089/spec/mdc-button/classes/baseline-link-with-icons.html?utm_source=golden_json",
     "screenshots": {
-      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/09/13/21_47_32_548/spec/mdc-button/classes/baseline-link-with-icons.html.windows_chrome_69.png",
-      "desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/09/13/21_47_32_548/spec/mdc-button/classes/baseline-link-with-icons.html.windows_edge_17.png",
-      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/09/13/21_47_32_548/spec/mdc-button/classes/baseline-link-with-icons.html.windows_firefox_62.png",
-      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/09/13/21_47_32_548/spec/mdc-button/classes/baseline-link-with-icons.html.windows_ie_11.png"
+      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/12/10/17_38_00_089/spec/mdc-button/classes/baseline-link-with-icons.html.windows_chrome_71.png",
+      "desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/12/10/17_38_00_089/spec/mdc-button/classes/baseline-link-with-icons.html.windows_edge_17.png",
+      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/12/10/17_38_00_089/spec/mdc-button/classes/baseline-link-with-icons.html.windows_firefox_63.png",
+      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/12/10/17_38_00_089/spec/mdc-button/classes/baseline-link-with-icons.html.windows_ie_11.png"
     }
   },
   "spec/mdc-button/classes/baseline-link-without-icons.html": {
@@ -44,6 +53,15 @@
       "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/09/13/21_47_32_548/spec/mdc-button/classes/dense-button-with-icons.html.windows_ie_11.png"
     }
   },
+  "spec/mdc-button/classes/dense-button-with-trailing-icons.html": {
+    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/12/10/17_38_00_089/spec/mdc-button/classes/dense-button-with-trailing-icons.html?utm_source=golden_json",
+    "screenshots": {
+      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/12/10/17_38_00_089/spec/mdc-button/classes/dense-button-with-trailing-icons.html.windows_chrome_71.png",
+      "desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/12/10/17_38_00_089/spec/mdc-button/classes/dense-button-with-trailing-icons.html.windows_edge_17.png",
+      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/12/10/17_38_00_089/spec/mdc-button/classes/dense-button-with-trailing-icons.html.windows_firefox_63.png",
+      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/12/10/17_38_00_089/spec/mdc-button/classes/dense-button-with-trailing-icons.html.windows_ie_11.png"
+    }
+  },
   "spec/mdc-button/classes/dense-button-without-icons.html": {
     "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/09/13/21_47_32_548/spec/mdc-button/classes/dense-button-without-icons.html?utm_source=golden_json",
     "screenshots": {
@@ -54,12 +72,12 @@
     }
   },
   "spec/mdc-button/classes/dense-link-with-icons.html": {
-    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/09/13/21_47_32_548/spec/mdc-button/classes/dense-link-with-icons.html?utm_source=golden_json",
+    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/12/10/17_38_00_089/spec/mdc-button/classes/dense-link-with-icons.html?utm_source=golden_json",
     "screenshots": {
-      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/09/13/21_47_32_548/spec/mdc-button/classes/dense-link-with-icons.html.windows_chrome_69.png",
-      "desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/09/13/21_47_32_548/spec/mdc-button/classes/dense-link-with-icons.html.windows_edge_17.png",
-      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/09/13/21_47_32_548/spec/mdc-button/classes/dense-link-with-icons.html.windows_firefox_62.png",
-      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/09/13/21_47_32_548/spec/mdc-button/classes/dense-link-with-icons.html.windows_ie_11.png"
+      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/12/10/17_38_00_089/spec/mdc-button/classes/dense-link-with-icons.html.windows_chrome_71.png",
+      "desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/12/10/17_38_00_089/spec/mdc-button/classes/dense-link-with-icons.html.windows_edge_17.png",
+      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/12/10/17_38_00_089/spec/mdc-button/classes/dense-link-with-icons.html.windows_firefox_63.png",
+      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/12/10/17_38_00_089/spec/mdc-button/classes/dense-link-with-icons.html.windows_ie_11.png"
     }
   },
   "spec/mdc-button/classes/dense-link-without-icons.html": {
@@ -90,30 +108,30 @@
     }
   },
   "spec/mdc-button/mixins/horizontal-padding-baseline.html": {
-    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/09/13/21_47_32_548/spec/mdc-button/mixins/horizontal-padding-baseline.html?utm_source=golden_json",
+    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/12/10/17_38_00_089/spec/mdc-button/mixins/horizontal-padding-baseline.html?utm_source=golden_json",
     "screenshots": {
-      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/09/13/21_47_32_548/spec/mdc-button/mixins/horizontal-padding-baseline.html.windows_chrome_69.png",
-      "desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/09/13/21_47_32_548/spec/mdc-button/mixins/horizontal-padding-baseline.html.windows_edge_17.png",
-      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/09/13/21_47_32_548/spec/mdc-button/mixins/horizontal-padding-baseline.html.windows_firefox_62.png",
-      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/09/13/21_47_32_548/spec/mdc-button/mixins/horizontal-padding-baseline.html.windows_ie_11.png"
+      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/12/10/17_38_00_089/spec/mdc-button/mixins/horizontal-padding-baseline.html.windows_chrome_71.png",
+      "desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/12/10/17_38_00_089/spec/mdc-button/mixins/horizontal-padding-baseline.html.windows_edge_17.png",
+      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/12/10/17_38_00_089/spec/mdc-button/mixins/horizontal-padding-baseline.html.windows_firefox_63.png",
+      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/12/10/17_38_00_089/spec/mdc-button/mixins/horizontal-padding-baseline.html.windows_ie_11.png"
     }
   },
   "spec/mdc-button/mixins/horizontal-padding-dense.html": {
-    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/09/13/21_47_32_548/spec/mdc-button/mixins/horizontal-padding-dense.html?utm_source=golden_json",
+    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/12/10/17_38_00_089/spec/mdc-button/mixins/horizontal-padding-dense.html?utm_source=golden_json",
     "screenshots": {
-      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/09/13/21_47_32_548/spec/mdc-button/mixins/horizontal-padding-dense.html.windows_chrome_69.png",
-      "desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/09/13/21_47_32_548/spec/mdc-button/mixins/horizontal-padding-dense.html.windows_edge_17.png",
-      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/09/13/21_47_32_548/spec/mdc-button/mixins/horizontal-padding-dense.html.windows_firefox_62.png",
-      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/09/13/21_47_32_548/spec/mdc-button/mixins/horizontal-padding-dense.html.windows_ie_11.png"
+      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/12/10/17_38_00_089/spec/mdc-button/mixins/horizontal-padding-dense.html.windows_chrome_71.png",
+      "desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/12/10/17_38_00_089/spec/mdc-button/mixins/horizontal-padding-dense.html.windows_edge_17.png",
+      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/12/10/17_38_00_089/spec/mdc-button/mixins/horizontal-padding-dense.html.windows_firefox_63.png",
+      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/12/10/17_38_00_089/spec/mdc-button/mixins/horizontal-padding-dense.html.windows_ie_11.png"
     }
   },
   "spec/mdc-button/mixins/icon-color.html": {
-    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/09/13/21_47_32_548/spec/mdc-button/mixins/icon-color.html?utm_source=golden_json",
+    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/12/10/17_38_00_089/spec/mdc-button/mixins/icon-color.html?utm_source=golden_json",
     "screenshots": {
-      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/09/13/21_47_32_548/spec/mdc-button/mixins/icon-color.html.windows_chrome_69.png",
-      "desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/09/13/21_47_32_548/spec/mdc-button/mixins/icon-color.html.windows_edge_17.png",
-      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/09/13/21_47_32_548/spec/mdc-button/mixins/icon-color.html.windows_firefox_62.png",
-      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/09/13/21_47_32_548/spec/mdc-button/mixins/icon-color.html.windows_ie_11.png"
+      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/12/10/17_38_00_089/spec/mdc-button/mixins/icon-color.html.windows_chrome_71.png",
+      "desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/12/10/17_38_00_089/spec/mdc-button/mixins/icon-color.html.windows_edge_17.png",
+      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/12/10/17_38_00_089/spec/mdc-button/mixins/icon-color.html.windows_firefox_63.png",
+      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/12/10/17_38_00_089/spec/mdc-button/mixins/icon-color.html.windows_ie_11.png"
     }
   },
   "spec/mdc-button/mixins/ink-color.html": {
@@ -144,12 +162,12 @@
     }
   },
   "spec/mdc-button/mixins/stroke-width.html": {
-    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/09/13/21_47_32_548/spec/mdc-button/mixins/stroke-width.html?utm_source=golden_json",
+    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/12/10/17_38_00_089/spec/mdc-button/mixins/stroke-width.html?utm_source=golden_json",
     "screenshots": {
-      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/09/13/21_47_32_548/spec/mdc-button/mixins/stroke-width.html.windows_chrome_69.png",
-      "desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/09/13/21_47_32_548/spec/mdc-button/mixins/stroke-width.html.windows_edge_17.png",
-      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/09/13/21_47_32_548/spec/mdc-button/mixins/stroke-width.html.windows_firefox_62.png",
-      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/09/13/21_47_32_548/spec/mdc-button/mixins/stroke-width.html.windows_ie_11.png"
+      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/12/10/17_38_00_089/spec/mdc-button/mixins/stroke-width.html.windows_chrome_71.png",
+      "desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/12/10/17_38_00_089/spec/mdc-button/mixins/stroke-width.html.windows_edge_17.png",
+      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/12/10/17_38_00_089/spec/mdc-button/mixins/stroke-width.html.windows_firefox_63.png",
+      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/12/10/17_38_00_089/spec/mdc-button/mixins/stroke-width.html.windows_ie_11.png"
     }
   },
   "spec/mdc-card/classes/baseline.html": {
diff --git a/test/screenshot/spec/mdc-button/classes/baseline-button-with-icons.html b/test/screenshot/spec/mdc-button/classes/baseline-button-with-icons.html
index 91cb12cddc1..d01b6008aa7 100644
--- a/test/screenshot/spec/mdc-button/classes/baseline-button-with-icons.html
+++ b/test/screenshot/spec/mdc-button/classes/baseline-button-with-icons.html
@@ -45,7 +45,7 @@
         <div class="test-cell test-cell--button">
           <button class="mdc-button">
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
-            Font Icon
+            <span class="mdc-button__label">Font Icon</span>
           </button>
         </div>
         <div class="test-cell test-cell--button">
@@ -54,14 +54,14 @@
               <path fill="none" d="M0 0h24v24H0z"/>
               <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
             </svg>
-            SVG Icon
+            <span class="mdc-button__label">SVG Icon</span>
           </button>
         </div>
 
         <div class="test-cell test-cell--button">
           <button class="mdc-button mdc-button--raised">
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
-            Font Icon
+            <span class="mdc-button__label">Font Icon</span>
           </button>
         </div>
         <div class="test-cell test-cell--button">
@@ -70,14 +70,14 @@
               <path fill="none" d="M0 0h24v24H0z"/>
               <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
             </svg>
-            SVG Icon
+            <span class="mdc-button__label">SVG Icon</span>
           </button>
         </div>
 
         <div class="test-cell test-cell--button">
           <button class="mdc-button mdc-button--unelevated">
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
-            Font Icon
+            <span class="mdc-button__label">Font Icon</span>
           </button>
         </div>
         <div class="test-cell test-cell--button">
@@ -86,14 +86,14 @@
               <path fill="none" d="M0 0h24v24H0z"/>
               <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
             </svg>
-            SVG Icon
+            <span class="mdc-button__label">SVG Icon</span>
           </button>
         </div>
 
         <div class="test-cell test-cell--button">
           <button class="mdc-button mdc-button--outlined">
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
-            Font Icon
+            <span class="mdc-button__label">Font Icon</span>
           </button>
         </div>
         <div class="test-cell test-cell--button">
@@ -102,10 +102,11 @@
               <path fill="none" d="M0 0h24v24H0z"/>
               <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
             </svg>
-            SVG Icon
+            <span class="mdc-button__label">SVG Icon</span>
           </button>
         </div>
 
+        <!-- Disabled variants intentionally have no mdc-button__label span to verify that leading icon works with or without it -->
         <div class="test-cell test-cell--button">
           <button class="mdc-button" disabled>
             <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
diff --git a/test/screenshot/spec/mdc-button/classes/baseline-button-with-trailing-icons.html b/test/screenshot/spec/mdc-button/classes/baseline-button-with-trailing-icons.html
new file mode 100644
index 00000000000..74b97934f8e
--- /dev/null
+++ b/test/screenshot/spec/mdc-button/classes/baseline-button-with-trailing-icons.html
@@ -0,0 +1,183 @@
+<!DOCTYPE html>
+<!--
+  Copyright 2018 Google Inc.
+
+  Permission is hereby granted, free of charge, to any person obtaining a copy
+  of this software and associated documentation files (the "Software"), to deal
+  in the Software without restriction, including without limitation the rights
+  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+  copies of the Software, and to permit persons to whom the Software is
+  furnished to do so, subject to the following conditions:
+
+  The above copyright notice and this permission notice shall be included in
+  all copies or substantial portions of the Software.
+
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+  THE SOFTWARE.
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Baseline Button Element With Trailing Icons - MDC Web Screenshot Test</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="../../../out/mdc.button.css">
+    <link rel="stylesheet" href="../../../out/spec/fixture.css">
+    <link rel="stylesheet" href="../../../out/spec/mdc-button/fixture.css">
+
+    <!-- Global site tag (gtag.js) - Google Analytics -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-118996389-2"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+      gtag('config', 'UA-118996389-2');
+    </script>
+  </head>
+
+  <body class="test-container">
+    <main class="test-viewport test-viewport--mobile">
+      <div class="test-layout">
+        <div class="test-cell test-cell--button">
+          <button class="mdc-button">
+            <span class="mdc-button__label">Font Icon</span>
+            <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
+          </button>
+        </div>
+        <div class="test-cell test-cell--button">
+          <button class="mdc-button">
+            <span class="mdc-button__label">SVG Icon</span>
+            <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
+              <path fill="none" d="M0 0h24v24H0z"/>
+              <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
+            </svg>
+          </button>
+        </div>
+
+        <div class="test-cell test-cell--button">
+          <button class="mdc-button mdc-button--raised">
+            <span class="mdc-button__label">Font Icon</span>
+            <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
+          </button>
+        </div>
+        <div class="test-cell test-cell--button">
+          <button class="mdc-button mdc-button--raised">
+            <span class="mdc-button__label">SVG Icon</span>
+            <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
+              <path fill="none" d="M0 0h24v24H0z"/>
+              <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
+            </svg>
+          </button>
+        </div>
+
+        <div class="test-cell test-cell--button">
+          <button class="mdc-button mdc-button--unelevated">
+            <span class="mdc-button__label">Font Icon</span>
+            <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
+          </button>
+        </div>
+        <div class="test-cell test-cell--button">
+          <button class="mdc-button mdc-button--unelevated">
+            <span class="mdc-button__label">SVG Icon</span>
+            <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
+              <path fill="none" d="M0 0h24v24H0z"/>
+              <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
+            </svg>
+          </button>
+        </div>
+
+        <div class="test-cell test-cell--button">
+          <button class="mdc-button mdc-button--outlined">
+            <span class="mdc-button__label">Font Icon</span>
+            <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
+          </button>
+        </div>
+        <div class="test-cell test-cell--button">
+          <button class="mdc-button mdc-button--outlined">
+            <span class="mdc-button__label">SVG Icon</span>
+            <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
+              <path fill="none" d="M0 0h24v24H0z"/>
+              <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
+            </svg>
+          </button>
+        </div>
+
+        <div class="test-cell test-cell--button">
+          <button class="mdc-button" disabled>
+            <span class="mdc-button__label">SVG Icon</span>
+            <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
+              <path fill="none" d="M0 0h24v24H0z"/>
+              <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
+            </svg>
+          </button>
+        </div>
+        <div class="test-cell test-cell--button">
+          <button class="mdc-button" disabled>
+            <span class="mdc-button__label">Font Icon</span>
+            <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
+          </button>
+        </div>
+
+        <div class="test-cell test-cell--button">
+          <button class="mdc-button mdc-button--raised" disabled>
+            <span class="mdc-button__label">SVG Icon</span>
+            <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
+              <path fill="none" d="M0 0h24v24H0z"/>
+              <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
+            </svg>
+          </button>
+        </div>
+        <div class="test-cell test-cell--button">
+          <button class="mdc-button mdc-button--raised" disabled>
+            <span class="mdc-button__label">Font Icon</span>
+            <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
+          </button>
+        </div>
+
+        <div class="test-cell test-cell--button">
+          <button class="mdc-button mdc-button--unelevated" disabled>
+            <span class="mdc-button__label">SVG Icon</span>
+            <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
+              <path fill="none" d="M0 0h24v24H0z"/>
+              <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
+            </svg>
+          </button>
+        </div>
+        <div class="test-cell test-cell--button">
+          <button class="mdc-button mdc-button--unelevated" disabled>
+            <span class="mdc-button__label">Font Icon</span>
+            <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
+          </button>
+        </div>
+
+        <div class="test-cell test-cell--button">
+          <button class="mdc-button mdc-button--outlined" disabled>
+            <span class="mdc-button__label">SVG Icon</span>
+            <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
+              <path fill="none" d="M0 0h24v24H0z"/>
+              <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
+            </svg>
+          </button>
+        </div>
+        <div class="test-cell test-cell--button">
+          <button class="mdc-button mdc-button--outlined" disabled>
+            <span class="mdc-button__label">Font Icon</span>
+            <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
+          </button>
+        </div>
+      </div>
+    </main>
+
+    <!-- Automatically provides/replaces `Promise` if missing or broken. -->
+    <script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/fontfaceobserver/2.0.13/fontfaceobserver.standalone.js"></script>
+    <script src="../../../out/material-components-web.js"></script>
+    <script src="../../../out/spec/fixture.js"></script>
+    <script src="../../../out/spec/mdc-button/fixture.js"></script>
+  </body>
+</html>
diff --git a/test/screenshot/spec/mdc-button/classes/baseline-button-without-icons.html b/test/screenshot/spec/mdc-button/classes/baseline-button-without-icons.html
index 6037d312ac3..49e36d4015e 100644
--- a/test/screenshot/spec/mdc-button/classes/baseline-button-without-icons.html
+++ b/test/screenshot/spec/mdc-button/classes/baseline-button-without-icons.html
@@ -43,31 +43,33 @@
     <main class="test-viewport test-viewport--mobile">
       <div class="test-layout">
         <div class="test-cell test-cell--button">
-          <button class="mdc-button">Button</button>
+          <button class="mdc-button"><span class="mdc-button__label">Button</span></button>
         </div>
         <div class="test-cell test-cell--button">
-          <button class="mdc-button mdc-button--raised">Button</button>
+          <button class="mdc-button mdc-button--raised"><span class="mdc-button__label">Button</span></button>
         </div>
         <div class="test-cell test-cell--button">
-          <button class="mdc-button mdc-button--unelevated">Button</button>
+          <button class="mdc-button mdc-button--unelevated"><span class="mdc-button__label">Button</span></button>
         </div>
         <div class="test-cell test-cell--button">
-          <button class="mdc-button mdc-button--outlined">Button</button>
+          <button class="mdc-button mdc-button--outlined"><span class="mdc-button__label">Button</span></button>
         </div>
 
+        <!-- Short labels to test min-width -->
         <div class="test-cell test-cell--button">
-          <button class="mdc-button">+</button><!-- test min-width -->
+          <button class="mdc-button"><span class="mdc-button__label">+</span></button>
         </div>
         <div class="test-cell test-cell--button">
-          <button class="mdc-button mdc-button--raised">+</button><!-- test min-width -->
+          <button class="mdc-button mdc-button--raised"><span class="mdc-button__label">+</span></button>
         </div>
         <div class="test-cell test-cell--button">
-          <button class="mdc-button mdc-button--unelevated">+</button><!-- test min-width -->
+          <button class="mdc-button mdc-button--unelevated"><span class="mdc-button__label">+</span></button>
         </div>
         <div class="test-cell test-cell--button">
-          <button class="mdc-button mdc-button--outlined">+</button><!-- test min-width -->
+          <button class="mdc-button mdc-button--outlined"><span class="mdc-button__label">+</span></button>
         </div>
 
+        <!-- Disabled variants intentionally have no mdc-button__label span to verify that leading icon works with or without it -->
         <div class="test-cell test-cell--button">
           <button class="mdc-button" disabled>Button</button>
         </div>
diff --git a/test/screenshot/spec/mdc-button/classes/baseline-link-with-icons.html b/test/screenshot/spec/mdc-button/classes/baseline-link-with-icons.html
index 037b59b5334..8806bed80b8 100644
--- a/test/screenshot/spec/mdc-button/classes/baseline-link-with-icons.html
+++ b/test/screenshot/spec/mdc-button/classes/baseline-link-with-icons.html
@@ -45,7 +45,7 @@
         <div class="test-cell test-cell--button">
           <a href="#" class="mdc-button">
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
-            Font Icon
+            <span class="mdc-button__label">Font Icon</span>
           </a>
         </div>
         <div class="test-cell test-cell--button">
@@ -54,14 +54,14 @@
               <path fill="none" d="M0 0h24v24H0z"/>
               <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
             </svg>
-            SVG Icon
+            <span class="mdc-button__label">SVG Icon</span>
           </a>
         </div>
 
         <div class="test-cell test-cell--button">
           <a href="#" class="mdc-button mdc-button--raised">
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
-            Font Icon
+            <span class="mdc-button__label">Font Icon</span>
           </a>
         </div>
         <div class="test-cell test-cell--button">
@@ -70,14 +70,14 @@
               <path fill="none" d="M0 0h24v24H0z"/>
               <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
             </svg>
-            SVG Icon
+            <span class="mdc-button__label">SVG Icon</span>
           </a>
         </div>
 
         <div class="test-cell test-cell--button">
           <a href="#" class="mdc-button mdc-button--unelevated">
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
-            Font Icon
+            <span class="mdc-button__label">Font Icon</span>
           </a>
         </div>
         <div class="test-cell test-cell--button">
@@ -86,14 +86,14 @@
               <path fill="none" d="M0 0h24v24H0z"/>
               <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
             </svg>
-            SVG Icon
+            <span class="mdc-button__label">SVG Icon</span>
           </a>
         </div>
 
         <div class="test-cell test-cell--button">
           <a href="#" class="mdc-button mdc-button--outlined">
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
-            Font Icon
+            <span class="mdc-button__label">Font Icon</span>
           </a>
         </div>
         <div class="test-cell test-cell--button">
@@ -102,7 +102,72 @@
               <path fill="none" d="M0 0h24v24H0z"/>
               <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
             </svg>
-            SVG Icon
+            <span class="mdc-button__label">SVG Icon</span>
+          </a>
+        </div>
+
+        <!-- Trailing icons -->
+        <div class="test-cell test-cell--button">
+          <a href="#" class="mdc-button">
+            <span class="mdc-button__label">Font Icon</span>
+            <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
+          </a>
+        </div>
+        <div class="test-cell test-cell--button">
+          <a href="#" class="mdc-button">
+            <span class="mdc-button__label">SVG Icon</span>
+            <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
+              <path fill="none" d="M0 0h24v24H0z"/>
+              <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
+            </svg>
+          </a>
+        </div>
+
+        <div class="test-cell test-cell--button">
+          <a href="#" class="mdc-button mdc-button--raised">
+            <span class="mdc-button__label">Font Icon</span>
+            <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
+          </a>
+        </div>
+        <div class="test-cell test-cell--button">
+          <a href="#" class="mdc-button mdc-button--raised">
+            <span class="mdc-button__label">SVG Icon</span>
+            <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
+              <path fill="none" d="M0 0h24v24H0z"/>
+              <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
+            </svg>
+          </a>
+        </div>
+
+        <div class="test-cell test-cell--button">
+          <a href="#" class="mdc-button mdc-button--unelevated">
+            <span class="mdc-button__label">Font Icon</span>
+            <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
+          </a>
+        </div>
+        <div class="test-cell test-cell--button">
+          <a href="#" class="mdc-button mdc-button--unelevated">
+            <span class="mdc-button__label">SVG Icon</span>
+            <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
+              <path fill="none" d="M0 0h24v24H0z"/>
+              <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
+            </svg>
+          </a>
+        </div>
+
+        <div class="test-cell test-cell--button">
+          <a href="#" class="mdc-button mdc-button--outlined">
+            <span class="mdc-button__label">Font Icon</span>
+            <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
+          </a>
+        </div>
+        <div class="test-cell test-cell--button">
+          <a href="#" class="mdc-button mdc-button--outlined">
+            <span class="mdc-button__label">SVG Icon</span>
+            <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
+              <path fill="none" d="M0 0h24v24H0z"/>
+              <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
+            </svg>
           </a>
         </div>
       </div>
diff --git a/test/screenshot/spec/mdc-button/classes/baseline-link-without-icons.html b/test/screenshot/spec/mdc-button/classes/baseline-link-without-icons.html
index c72bee44bff..2cad4a24f5a 100644
--- a/test/screenshot/spec/mdc-button/classes/baseline-link-without-icons.html
+++ b/test/screenshot/spec/mdc-button/classes/baseline-link-without-icons.html
@@ -43,29 +43,46 @@
     <main class="test-viewport test-viewport--mobile">
       <div class="test-layout">
         <div class="test-cell test-cell--button">
-          <a href="#" class="mdc-button">Link</a>
+          <a href="#" class="mdc-button">
+            <span class="mdc-button__label">Link</span>
+          </a>
         </div>
         <div class="test-cell test-cell--button">
-          <a href="#" class="mdc-button mdc-button--raised">Link</a>
+          <a href="#" class="mdc-button mdc-button--raised">
+            <span class="mdc-button__label">Link</span>
+          </a>
         </div>
         <div class="test-cell test-cell--button">
-          <a href="#" class="mdc-button mdc-button--unelevated">Link</a>
+          <a href="#" class="mdc-button mdc-button--unelevated">
+            <span class="mdc-button__label">Link</span>
+          </a>
         </div>
         <div class="test-cell test-cell--button">
-          <a href="#" class="mdc-button mdc-button--outlined">Link</a>
+          <a href="#" class="mdc-button mdc-button--outlined">
+            <span class="mdc-button__label">Link</span>
+          </a>
         </div>
 
+        <!-- Short labels to test min-width -->
         <div class="test-cell test-cell--button">
-          <a href="#" class="mdc-button">+</a><!-- test min-width -->
+          <a href="#" class="mdc-button">
+            <span class="mdc-button__label">+</span>
+          </a>
         </div>
         <div class="test-cell test-cell--button">
-          <a href="#" class="mdc-button mdc-button--raised">+</a><!-- test min-width -->
+          <a href="#" class="mdc-button mdc-button--raised">
+            <span class="mdc-button__label">+</span>
+          </a>
         </div>
         <div class="test-cell test-cell--button">
-          <a href="#" class="mdc-button mdc-button--unelevated">+</a><!-- test min-width -->
+          <a href="#" class="mdc-button mdc-button--unelevated">
+            <span class="mdc-button__label">+</span>
+          </a>
         </div>
         <div class="test-cell test-cell--button">
-          <a href="#" class="mdc-button mdc-button--outlined">+</a><!-- test min-width -->
+          <a href="#" class="mdc-button mdc-button--outlined">
+            <span class="mdc-button__label">+</span>
+          </a>
         </div>
       </div>
     </main>
diff --git a/test/screenshot/spec/mdc-button/classes/dense-button-with-icons.html b/test/screenshot/spec/mdc-button/classes/dense-button-with-icons.html
index f17076e8487..7e54173d9a0 100644
--- a/test/screenshot/spec/mdc-button/classes/dense-button-with-icons.html
+++ b/test/screenshot/spec/mdc-button/classes/dense-button-with-icons.html
@@ -45,7 +45,7 @@
         <div class="test-cell test-cell--button">
           <button class="mdc-button mdc-button--dense">
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
-            Font Icon
+            <span class="mdc-button__label">Font Icon</span>
           </button>
         </div>
         <div class="test-cell test-cell--button">
@@ -56,14 +56,14 @@
               <path fill="none" d="M0 0h24v24H0z"/>
               <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
             </svg>
-            SVG Icon
+            <span class="mdc-button__label">SVG Icon</span>
           </button>
         </div>
 
         <div class="test-cell test-cell--button">
           <button class="mdc-button mdc-button--dense mdc-button--raised">
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
-            Font Icon
+            <span class="mdc-button__label">Font Icon</span>
           </button>
         </div>
         <div class="test-cell test-cell--button">
@@ -74,14 +74,14 @@
               <path fill="none" d="M0 0h24v24H0z"/>
               <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
             </svg>
-            SVG Icon
+            <span class="mdc-button__label">SVG Icon</span>
           </button>
         </div>
 
         <div class="test-cell test-cell--button">
           <button class="mdc-button mdc-button--dense mdc-button--unelevated">
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
-            Font Icon
+            <span class="mdc-button__label">Font Icon</span>
           </button>
         </div>
         <div class="test-cell test-cell--button">
@@ -92,14 +92,14 @@
               <path fill="none" d="M0 0h24v24H0z"/>
               <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
             </svg>
-            SVG Icon
+            <span class="mdc-button__label">SVG Icon</span>
           </button>
         </div>
 
         <div class="test-cell test-cell--button">
           <button class="mdc-button mdc-button--dense mdc-button--outlined">
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
-            Font Icon
+            <span class="mdc-button__label">Font Icon</span>
           </button>
         </div>
         <div class="test-cell test-cell--button">
@@ -110,10 +110,11 @@
               <path fill="none" d="M0 0h24v24H0z"/>
               <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
             </svg>
-            SVG Icon
+            <span class="mdc-button__label">SVG Icon</span>
           </button>
         </div>
 
+        <!-- Disabled variants intentionally have no mdc-button__label span to verify that leading icon works with or without it -->
         <div class="test-cell test-cell--button">
           <button class="mdc-button mdc-button--dense" disabled>
             <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
diff --git a/test/screenshot/spec/mdc-button/classes/dense-button-with-trailing-icons.html b/test/screenshot/spec/mdc-button/classes/dense-button-with-trailing-icons.html
new file mode 100644
index 00000000000..ed9c203ecd7
--- /dev/null
+++ b/test/screenshot/spec/mdc-button/classes/dense-button-with-trailing-icons.html
@@ -0,0 +1,199 @@
+<!DOCTYPE html>
+<!--
+  Copyright 2018 Google Inc.
+
+  Permission is hereby granted, free of charge, to any person obtaining a copy
+  of this software and associated documentation files (the "Software"), to deal
+  in the Software without restriction, including without limitation the rights
+  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+  copies of the Software, and to permit persons to whom the Software is
+  furnished to do so, subject to the following conditions:
+
+  The above copyright notice and this permission notice shall be included in
+  all copies or substantial portions of the Software.
+
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+  THE SOFTWARE.
+  -->
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Dense Button Element With Trailing Icons - MDC Web Screenshot Test</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="../../../out/mdc.button.css">
+    <link rel="stylesheet" href="../../../out/spec/fixture.css">
+    <link rel="stylesheet" href="../../../out/spec/mdc-button/fixture.css">
+
+    <!-- Global site tag (gtag.js) - Google Analytics -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-118996389-2"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+      gtag('config', 'UA-118996389-2');
+    </script>
+  </head>
+
+  <body class="test-container">
+    <main class="test-viewport test-viewport--mobile">
+      <div class="test-layout">
+        <div class="test-cell test-cell--button">
+          <button class="mdc-button mdc-button--dense">
+            <span class="mdc-button__label">Font Icon</span>
+            <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
+          </button>
+        </div>
+        <div class="test-cell test-cell--button">
+          <button class="mdc-button mdc-button--dense">
+            <span class="mdc-button__label">SVG Icon</span>
+            <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
+                 viewBox="0 0 24 24"
+                 fill="#000000">
+              <path fill="none" d="M0 0h24v24H0z"/>
+              <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
+            </svg>
+          </button>
+        </div>
+
+        <div class="test-cell test-cell--button">
+          <button class="mdc-button mdc-button--dense mdc-button--raised">
+            <span class="mdc-button__label">Font Icon</span>
+            <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
+          </button>
+        </div>
+        <div class="test-cell test-cell--button">
+          <button class="mdc-button mdc-button--dense mdc-button--raised">
+            <span class="mdc-button__label">SVG Icon</span>
+            <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
+                 viewBox="0 0 24 24"
+                 fill="#000000">
+              <path fill="none" d="M0 0h24v24H0z"/>
+              <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
+            </svg>
+          </button>
+        </div>
+
+        <div class="test-cell test-cell--button">
+          <button class="mdc-button mdc-button--dense mdc-button--unelevated">
+            <span class="mdc-button__label">Font Icon</span>
+            <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
+          </button>
+        </div>
+        <div class="test-cell test-cell--button">
+          <button class="mdc-button mdc-button--dense mdc-button--unelevated">
+            <span class="mdc-button__label">SVG Icon</span>
+            <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
+                 viewBox="0 0 24 24"
+                 fill="#000000">
+              <path fill="none" d="M0 0h24v24H0z"/>
+              <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
+            </svg>
+          </button>
+        </div>
+
+        <div class="test-cell test-cell--button">
+          <button class="mdc-button mdc-button--dense mdc-button--outlined">
+            <span class="mdc-button__label">Font Icon</span>
+            <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
+          </button>
+        </div>
+        <div class="test-cell test-cell--button">
+          <button class="mdc-button mdc-button--dense mdc-button--outlined">
+            <span class="mdc-button__label">SVG Icon</span>
+            <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
+                 viewBox="0 0 24 24"
+                 fill="#000000">
+              <path fill="none" d="M0 0h24v24H0z"/>
+              <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
+            </svg>
+          </button>
+        </div>
+
+        <div class="test-cell test-cell--button">
+          <button class="mdc-button mdc-button--dense" disabled>
+            <span class="mdc-button__label">SVG Icon</span>
+            <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
+                 viewBox="0 0 24 24"
+                 fill="#000000">
+              <path fill="none" d="M0 0h24v24H0z"/>
+              <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
+            </svg>
+          </button>
+        </div>
+        <div class="test-cell test-cell--button">
+          <button class="mdc-button mdc-button--dense" disabled>
+            <span class="mdc-button__label">Font Icon</span>
+            <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
+          </button>
+        </div>
+
+        <div class="test-cell test-cell--button">
+          <button class="mdc-button mdc-button--dense mdc-button--raised" disabled>
+            <span class="mdc-button__label">SVG Icon</span>
+            <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
+                 viewBox="0 0 24 24"
+                 fill="#000000">
+              <path fill="none" d="M0 0h24v24H0z"/>
+              <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
+            </svg>
+          </button>
+        </div>
+        <div class="test-cell test-cell--button">
+          <button class="mdc-button mdc-button--dense mdc-button--raised" disabled>
+            <span class="mdc-button__label">Font Icon</span>
+            <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
+          </button>
+        </div>
+
+        <div class="test-cell test-cell--button">
+          <button class="mdc-button mdc-button--dense mdc-button--unelevated" disabled>
+            <span class="mdc-button__label">SVG Icon</span>
+            <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
+                 viewBox="0 0 24 24"
+                 fill="#000000">
+              <path fill="none" d="M0 0h24v24H0z"/>
+              <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
+            </svg>
+          </button>
+        </div>
+        <div class="test-cell test-cell--button">
+          <button class="mdc-button mdc-button--dense mdc-button--unelevated" disabled>
+            <span class="mdc-button__label">Font Icon</span>
+            <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
+          </button>
+        </div>
+
+        <div class="test-cell test-cell--button">
+          <button class="mdc-button mdc-button--dense mdc-button--outlined" disabled>
+            <span class="mdc-button__label">SVG Icon</span>
+            <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
+                 viewBox="0 0 24 24"
+                 fill="#000000">
+              <path fill="none" d="M0 0h24v24H0z"/>
+              <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
+            </svg>
+          </button>
+        </div>
+        <div class="test-cell test-cell--button">
+          <button class="mdc-button mdc-button--dense mdc-button--outlined" disabled>
+            <span class="mdc-button__label">Font Icon</span>
+            <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
+          </button>
+        </div>
+      </div>
+    </main>
+
+    <!-- Automatically provides/replaces `Promise` if missing or broken. -->
+    <script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/fontfaceobserver/2.0.13/fontfaceobserver.standalone.js"></script>
+    <script src="../../../out/material-components-web.js"></script>
+    <script src="../../../out/spec/fixture.js"></script>
+    <script src="../../../out/spec/mdc-button/fixture.js"></script>
+  </body>
+</html>
diff --git a/test/screenshot/spec/mdc-button/classes/dense-button-without-icons.html b/test/screenshot/spec/mdc-button/classes/dense-button-without-icons.html
index 999c4d6b444..626ffa3cd7b 100644
--- a/test/screenshot/spec/mdc-button/classes/dense-button-without-icons.html
+++ b/test/screenshot/spec/mdc-button/classes/dense-button-without-icons.html
@@ -43,31 +43,49 @@
     <main class="test-viewport test-viewport--mobile">
       <div class="test-layout">
         <div class="test-cell test-cell--button">
-          <button class="mdc-button mdc-button--dense">Button</button>
+          <button class="mdc-button mdc-button--dense">
+            <span class="mdc-button__label">Button</span>
+          </button>
         </div>
         <div class="test-cell test-cell--button">
-          <button class="mdc-button mdc-button--dense mdc-button--raised">Button</button>
+          <button class="mdc-button mdc-button--dense mdc-button--raised">
+            <span class="mdc-button__label">Button</span>
+          </button>
         </div>
         <div class="test-cell test-cell--button">
-          <button class="mdc-button mdc-button--dense mdc-button--unelevated">Button</button>
+          <button class="mdc-button mdc-button--dense mdc-button--unelevated">
+            <span class="mdc-button__label">Button</span>
+          </button>
         </div>
         <div class="test-cell test-cell--button">
-          <button class="mdc-button mdc-button--dense mdc-button--outlined">Button</button>
+          <button class="mdc-button mdc-button--dense mdc-button--outlined">
+            <span class="mdc-button__label">Button</span>
+          </button>
         </div>
 
+        <!-- Short labels to test min-width -->
         <div class="test-cell test-cell--button">
-          <button class="mdc-button mdc-button--dense">+</button><!-- test min-width -->
+          <button class="mdc-button mdc-button--dense">
+            <span class="mdc-button__label">+</span>
+          </button>
         </div>
         <div class="test-cell test-cell--button">
-          <button class="mdc-button mdc-button--dense mdc-button--raised">+</button><!-- test min-width -->
+          <button class="mdc-button mdc-button--dense mdc-button--raised">
+            <span class="mdc-button__label">+</span>
+          </button>
         </div>
         <div class="test-cell test-cell--button">
-          <button class="mdc-button mdc-button--dense mdc-button--unelevated">+</button><!-- test min-width -->
+          <button class="mdc-button mdc-button--dense mdc-button--unelevated">
+            <span class="mdc-button__label">+</span>
+          </button>
         </div>
         <div class="test-cell test-cell--button">
-          <button class="mdc-button mdc-button--dense mdc-button--outlined">+</button><!-- test min-width -->
+          <button class="mdc-button mdc-button--dense mdc-button--outlined">
+            <span class="mdc-button__label">+</span>
+          </button>
         </div>
 
+        <!-- Disabled variants intentionally have no mdc-button__label span to verify that leading icon works with or without it -->
         <div class="test-cell test-cell--button">
           <button class="mdc-button mdc-button--dense" disabled>Button</button>
         </div>
diff --git a/test/screenshot/spec/mdc-button/classes/dense-link-with-icons.html b/test/screenshot/spec/mdc-button/classes/dense-link-with-icons.html
index 1bce66ee10d..9b1bd789a39 100644
--- a/test/screenshot/spec/mdc-button/classes/dense-link-with-icons.html
+++ b/test/screenshot/spec/mdc-button/classes/dense-link-with-icons.html
@@ -45,7 +45,7 @@
         <div class="test-cell test-cell--button">
           <a href="#" class="mdc-button mdc-button--dense">
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
-            Font Icon
+            <span class="mdc-button__label">Font Icon</span>
           </a>
         </div>
         <div class="test-cell test-cell--button">
@@ -56,14 +56,14 @@
               <path fill="none" d="M0 0h24v24H0z"/>
               <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
             </svg>
-            SVG Icon
+            <span class="mdc-button__label">SVG Icon</span>
           </a>
         </div>
 
         <div class="test-cell test-cell--button">
           <a href="#" class="mdc-button mdc-button--dense mdc-button--raised">
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
-            Font Icon
+            <span class="mdc-button__label">Font Icon</span>
           </a>
         </div>
         <div class="test-cell test-cell--button">
@@ -74,14 +74,14 @@
               <path fill="none" d="M0 0h24v24H0z"/>
               <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
             </svg>
-            SVG Icon
+            <span class="mdc-button__label">SVG Icon</span>
           </a>
         </div>
 
         <div class="test-cell test-cell--button">
           <a href="#" class="mdc-button mdc-button--dense mdc-button--unelevated">
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
-            Font Icon
+            <span class="mdc-button__label">Font Icon</span>
           </a>
         </div>
         <div class="test-cell test-cell--button">
@@ -92,14 +92,14 @@
               <path fill="none" d="M0 0h24v24H0z"/>
               <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
             </svg>
-            SVG Icon
+            <span class="mdc-button__label">SVG Icon</span>
           </a>
         </div>
 
         <div class="test-cell test-cell--button">
           <a href="#" class="mdc-button mdc-button--dense mdc-button--outlined">
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
-            Font Icon
+            <span class="mdc-button__label">Font Icon</span>
           </a>
         </div>
         <div class="test-cell test-cell--button">
@@ -110,7 +110,80 @@
               <path fill="none" d="M0 0h24v24H0z"/>
               <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
             </svg>
-            SVG Icon
+            <span class="mdc-button__label">SVG Icon</span>
+          </a>
+        </div>
+
+        <!-- Trailing icons -->
+        <div class="test-cell test-cell--button">
+          <a href="#" class="mdc-button mdc-button--dense">
+            <span class="mdc-button__label">Font Icon</span>
+            <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
+          </a>
+        </div>
+        <div class="test-cell test-cell--button">
+          <a href="#" class="mdc-button mdc-button--dense">
+            <span class="mdc-button__label">SVG Icon</span>
+            <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
+                 viewBox="0 0 24 24"
+                 fill="#000000">
+              <path fill="none" d="M0 0h24v24H0z"/>
+              <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
+            </svg>
+          </a>
+        </div>
+
+        <div class="test-cell test-cell--button">
+          <a href="#" class="mdc-button mdc-button--dense mdc-button--raised">
+            <span class="mdc-button__label">Font Icon</span>
+            <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
+          </a>
+        </div>
+        <div class="test-cell test-cell--button">
+          <a href="#" class="mdc-button mdc-button--dense mdc-button--raised">
+            <span class="mdc-button__label">SVG Icon</span>
+            <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
+                 viewBox="0 0 24 24"
+                 fill="#000000">
+              <path fill="none" d="M0 0h24v24H0z"/>
+              <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
+            </svg>
+          </a>
+        </div>
+
+        <div class="test-cell test-cell--button">
+          <a href="#" class="mdc-button mdc-button--dense mdc-button--unelevated">
+            <span class="mdc-button__label">Font Icon</span>
+            <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
+          </a>
+        </div>
+        <div class="test-cell test-cell--button">
+          <a href="#" class="mdc-button mdc-button--dense mdc-button--unelevated">
+            <span class="mdc-button__label">SVG Icon</span>
+            <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
+                 viewBox="0 0 24 24"
+                 fill="#000000">
+              <path fill="none" d="M0 0h24v24H0z"/>
+              <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
+            </svg>
+          </a>
+        </div>
+
+        <div class="test-cell test-cell--button">
+          <a href="#" class="mdc-button mdc-button--dense mdc-button--outlined">
+            <span class="mdc-button__label">Font Icon</span>
+            <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
+          </a>
+        </div>
+        <div class="test-cell test-cell--button">
+          <a href="#" class="mdc-button mdc-button--dense mdc-button--outlined">
+            <span class="mdc-button__label">SVG Icon</span>
+            <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
+                 viewBox="0 0 24 24"
+                 fill="#000000">
+              <path fill="none" d="M0 0h24v24H0z"/>
+              <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
+            </svg>
           </a>
         </div>
       </div>
diff --git a/test/screenshot/spec/mdc-button/classes/dense-link-without-icons.html b/test/screenshot/spec/mdc-button/classes/dense-link-without-icons.html
index b05eb40b54e..8e383c8b473 100644
--- a/test/screenshot/spec/mdc-button/classes/dense-link-without-icons.html
+++ b/test/screenshot/spec/mdc-button/classes/dense-link-without-icons.html
@@ -43,29 +43,46 @@
     <main class="test-viewport test-viewport--mobile">
       <div class="test-layout">
         <div class="test-cell test-cell--button">
-          <a href="#" class="mdc-button mdc-button--dense">Button</a>
+          <a href="#" class="mdc-button mdc-button--dense">
+            <span class="mdc-button__label">Button</span>
+          </a>
         </div>
         <div class="test-cell test-cell--button">
-          <a href="#" class="mdc-button mdc-button--dense mdc-button--raised">Button</a>
+          <a href="#" class="mdc-button mdc-button--dense mdc-button--raised">
+            <span class="mdc-button__label">Button</span>
+          </a>
         </div>
         <div class="test-cell test-cell--button">
-          <a href="#" class="mdc-button mdc-button--dense mdc-button--unelevated">Button</a>
+          <a href="#" class="mdc-button mdc-button--dense mdc-button--unelevated">
+            <span class="mdc-button__label">Button</span>
+          </a>
         </div>
         <div class="test-cell test-cell--button">
-          <a href="#" class="mdc-button mdc-button--dense mdc-button--outlined">Button</a>
+          <a href="#" class="mdc-button mdc-button--dense mdc-button--outlined">
+            <span class="mdc-button__label">Button</span>
+          </a>
         </div>
 
+        <!-- Short labels to test min-width -->
         <div class="test-cell test-cell--button">
-          <a href="#" class="mdc-button mdc-button--dense">+</a><!-- test min-width -->
+          <a href="#" class="mdc-button mdc-button--dense">
+            <span class="mdc-button__label">+</span>
+          </a>
         </div>
         <div class="test-cell test-cell--button">
-          <a href="#" class="mdc-button mdc-button--dense mdc-button--raised">+</a><!-- test min-width -->
+          <a href="#" class="mdc-button mdc-button--dense mdc-button--raised">
+            <span class="mdc-button__label">+</span>
+          </a>
         </div>
         <div class="test-cell test-cell--button">
-          <a href="#" class="mdc-button mdc-button--dense mdc-button--unelevated">+</a><!-- test min-width -->
+          <a href="#" class="mdc-button mdc-button--dense mdc-button--unelevated">
+            <span class="mdc-button__label">+</span>
+          </a>
         </div>
         <div class="test-cell test-cell--button">
-          <a href="#" class="mdc-button mdc-button--dense mdc-button--outlined">+</a><!-- test min-width -->
+          <a href="#" class="mdc-button mdc-button--dense mdc-button--outlined">
+            <span class="mdc-button__label">+</span>
+          </a>
         </div>
       </div>
     </main>
diff --git a/test/screenshot/spec/mdc-button/mixins/container-fill-color.html b/test/screenshot/spec/mdc-button/mixins/container-fill-color.html
index 925aab104c1..ea7ab9ba83f 100644
--- a/test/screenshot/spec/mdc-button/mixins/container-fill-color.html
+++ b/test/screenshot/spec/mdc-button/mixins/container-fill-color.html
@@ -43,13 +43,19 @@
     <main class="test-viewport test-viewport--mobile">
       <div class="test-layout">
         <div class="test-cell test-cell--button">
-          <button class="custom-button custom-button--container-fill-color mdc-button mdc-button--raised">Button</button>
+          <button class="custom-button custom-button--container-fill-color mdc-button mdc-button--raised">
+            <span class="mdc-button__label">Button</span>
+          </button>
         </div>
         <div class="test-cell test-cell--button">
-          <a class="custom-button custom-button--container-fill-color mdc-button mdc-button--raised" href="#">Link</a>
+          <a class="custom-button custom-button--container-fill-color mdc-button mdc-button--raised" href="#">
+            <span class="mdc-button__label">Link</span>
+          </a>
         </div>
         <div class="test-cell test-cell--button">
-          <button class="custom-button custom-button--container-fill-color mdc-button mdc-button--raised" disabled>Disabled</button>
+          <button class="custom-button custom-button--container-fill-color mdc-button mdc-button--raised" disabled>
+            <span class="mdc-button__label">Disabled</span>
+          </button>
         </div>
       </div>
     </main>
diff --git a/test/screenshot/spec/mdc-button/mixins/filled-accessible.html b/test/screenshot/spec/mdc-button/mixins/filled-accessible.html
index 139b0ea4a5d..a833917c3d7 100644
--- a/test/screenshot/spec/mdc-button/mixins/filled-accessible.html
+++ b/test/screenshot/spec/mdc-button/mixins/filled-accessible.html
@@ -43,15 +43,19 @@
     <main class="test-viewport test-viewport--mobile">
       <div class="test-layout">
         <div class="test-cell test-cell--button">
-          <button class="custom-button custom-button--filled-accessible mdc-button mdc-button--raised">Button</button>
+          <button class="custom-button custom-button--filled-accessible mdc-button mdc-button--raised">
+            <span class="mdc-button__label">Button</span>
+          </button>
         </div>
         <div class="test-cell test-cell--button">
-          <a class="custom-button custom-button--filled-accessible mdc-button mdc-button--raised" href="#">Link</a>
+          <a class="custom-button custom-button--filled-accessible mdc-button mdc-button--raised" href="#">
+            <span class="mdc-button__label">Link</span>
+          </a>
         </div>
         <div class="test-cell test-cell--button">
           <button class="custom-button custom-button--filled-accessible mdc-button mdc-button--raised">
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
-            Font Icon
+            <span class="mdc-button__label">Font Icon</span>
           </button>
         </div>
         <div class="test-cell test-cell--button">
@@ -60,7 +64,7 @@
               <path fill="none" d="M0 0h24v24H0z"/>
               <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
             </svg>
-            SVG Icon
+            <span class="mdc-button__label">SVG Icon</span>
           </button>
         </div>
         <div class="test-cell test-cell--button">
@@ -69,13 +73,13 @@
               <path fill="none" d="M0 0h24v24H0z"/>
               <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
             </svg>
-            SVG Icon
+            <span class="mdc-button__label">SVG Icon</span>
           </button>
         </div>
         <div class="test-cell test-cell--button">
           <button class="custom-button custom-button--filled-accessible mdc-button mdc-button--raised" disabled>
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
-            Font Icon
+            <span class="mdc-button__label">Font Icon</span>
           </button>
         </div>
       </div>
diff --git a/test/screenshot/spec/mdc-button/mixins/horizontal-padding-baseline.html b/test/screenshot/spec/mdc-button/mixins/horizontal-padding-baseline.html
index 9c3408b591b..a5a325a4119 100644
--- a/test/screenshot/spec/mdc-button/mixins/horizontal-padding-baseline.html
+++ b/test/screenshot/spec/mdc-button/mixins/horizontal-padding-baseline.html
@@ -43,70 +43,95 @@
     <main class="test-viewport test-viewport--mobile">
       <div class="test-layout">
         <div class="test-cell test-cell--button">
-          <button class="custom-button--horizontal-padding mdc-button">Button</button>
+          <button class="custom-button--horizontal-padding mdc-button">
+            <span class="mdc-button__label">Button</span>
+          </button>
         </div>
         <div class="test-cell test-cell--button">
-          <button class="custom-button--horizontal-padding mdc-button mdc-button--raised">Button</button>
+          <button class="custom-button--horizontal-padding mdc-button mdc-button--raised">
+            <span class="mdc-button__label">Button</span>
+          </button>
         </div>
         <div class="test-cell test-cell--button">
-          <button class="custom-button--horizontal-padding mdc-button mdc-button--unelevated">Button</button>
+          <button class="custom-button--horizontal-padding mdc-button mdc-button--unelevated">
+            <span class="mdc-button__label">Button</span>
+          </button>
         </div>
         <div class="test-cell test-cell--button">
-          <button class="custom-button--horizontal-padding mdc-button mdc-button--outlined">Button</button>
+          <button class="custom-button--horizontal-padding mdc-button mdc-button--outlined">
+            <span class="mdc-button__label">Button</span>
+          </button>
         </div>
 
         <div class="test-cell test-cell--button">
           <button class="custom-button--horizontal-padding mdc-button">
-            <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i> Icon
+            <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
+            <span class="mdc-button__label">Icon</span>
           </button>
         </div>
         <div class="test-cell test-cell--button">
           <button class="custom-button--horizontal-padding mdc-button mdc-button--raised">
-            <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i> Icon
+            <span class="mdc-button__label">Icon</span>
+            <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
           </button>
         </div>
         <div class="test-cell test-cell--button">
           <button class="custom-button--horizontal-padding mdc-button mdc-button--unelevated">
-            <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i> Icon
+            <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
+            <span class="mdc-button__label">Icon</span>
           </button>
         </div>
         <div class="test-cell test-cell--button">
           <button class="custom-button--horizontal-padding mdc-button mdc-button--outlined">
-            <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i> Icon
+            <span class="mdc-button__label">Icon</span>
+            <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
           </button>
         </div>
 
+        <!-- Short labels to test min-width -->
         <div class="test-cell test-cell--button">
-          <button class="custom-button--horizontal-padding mdc-button">+</button><!-- test min-width -->
+          <button class="custom-button--horizontal-padding mdc-button">
+            <span class="mdc-button__label">+</span>
+          </button>
         </div>
         <div class="test-cell test-cell--button">
-          <button class="custom-button--horizontal-padding mdc-button mdc-button--raised">+</button><!-- test min-width -->
+          <button class="custom-button--horizontal-padding mdc-button mdc-button--raised">
+            <span class="mdc-button__label">+</span>
+          </button>
         </div>
         <div class="test-cell test-cell--button">
-          <button class="custom-button--horizontal-padding mdc-button mdc-button--unelevated">+</button><!-- test min-width -->
+          <button class="custom-button--horizontal-padding mdc-button mdc-button--unelevated">
+            <span class="mdc-button__label">+</span>
+          </button>
         </div>
         <div class="test-cell test-cell--button">
-          <button class="custom-button--horizontal-padding mdc-button mdc-button--outlined">+</button><!-- test min-width -->
+          <button class="custom-button--horizontal-padding mdc-button mdc-button--outlined">
+            <span class="mdc-button__label">+</span>
+          </button>
         </div>
 
         <div class="test-cell test-cell--button">
           <button class="custom-button--horizontal-padding mdc-button" disabled>
-            <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i> Disabled
+            <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
+            <span class="mdc-button__label">Disabled</span>
           </button>
         </div>
         <div class="test-cell test-cell--button">
           <button class="custom-button--horizontal-padding mdc-button mdc-button--raised" disabled>
-            <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i> Disabled
+            <span class="mdc-button__label">Disabled</span>
+            <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
           </button>
         </div>
         <div class="test-cell test-cell--button">
           <button class="custom-button--horizontal-padding mdc-button mdc-button--unelevated" disabled>
-            <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i> Disabled
+            <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
+            <span class="mdc-button__label">Disabled</span>
           </button>
         </div>
         <div class="test-cell test-cell--button">
           <button class="custom-button--horizontal-padding mdc-button mdc-button--outlined" disabled>
-            <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i> Disabled
+            <span class="mdc-button__label">Disabled</span>
+            <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
           </button>
         </div>
       </div>
diff --git a/test/screenshot/spec/mdc-button/mixins/horizontal-padding-dense.html b/test/screenshot/spec/mdc-button/mixins/horizontal-padding-dense.html
index 39e77bd3cf7..74ca14a9c35 100644
--- a/test/screenshot/spec/mdc-button/mixins/horizontal-padding-dense.html
+++ b/test/screenshot/spec/mdc-button/mixins/horizontal-padding-dense.html
@@ -43,70 +43,95 @@
     <main class="test-viewport test-viewport--mobile">
       <div class="test-layout">
         <div class="test-cell test-cell--button">
-          <button class="custom-button--horizontal-padding mdc-button mdc-button--dense">Button</button>
+          <button class="custom-button--horizontal-padding mdc-button mdc-button--dense">
+            <span class="mdc-button__label">Button</span>
+          </button>
         </div>
         <div class="test-cell test-cell--button">
-          <button class="custom-button--horizontal-padding mdc-button mdc-button--dense mdc-button--raised">Button</button>
+          <button class="custom-button--horizontal-padding mdc-button mdc-button--dense mdc-button--raised">
+            <span class="mdc-button__label">Button</span>
+          </button>
         </div>
         <div class="test-cell test-cell--button">
-          <button class="custom-button--horizontal-padding mdc-button mdc-button--dense mdc-button--unelevated">Button</button>
+          <button class="custom-button--horizontal-padding mdc-button mdc-button--dense mdc-button--unelevated">
+            <span class="mdc-button__label">Button</span>
+          </button>
         </div>
         <div class="test-cell test-cell--button">
-          <button class="custom-button--horizontal-padding mdc-button mdc-button--dense mdc-button--outlined">Button</button>
+          <button class="custom-button--horizontal-padding mdc-button mdc-button--dense mdc-button--outlined">
+            <span class="mdc-button__label">Button</span>
+          </button>
         </div>
 
         <div class="test-cell test-cell--button">
           <button class="custom-button--horizontal-padding mdc-button mdc-button--dense">
-            <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i> Icon
+            <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
+            <span class="mdc-button__label">Icon</span>
           </button>
         </div>
         <div class="test-cell test-cell--button">
           <button class="custom-button--horizontal-padding mdc-button mdc-button--dense mdc-button--raised">
-            <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i> Icon
+            <span class="mdc-button__label">Icon</span>
+            <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
           </button>
         </div>
         <div class="test-cell test-cell--button">
           <button class="custom-button--horizontal-padding mdc-button mdc-button--dense mdc-button--unelevated">
-            <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i> Icon
+            <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
+            <span class="mdc-button__label">Icon</span>
           </button>
         </div>
         <div class="test-cell test-cell--button">
           <button class="custom-button--horizontal-padding mdc-button mdc-button--dense mdc-button--outlined">
-            <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i> Icon
+            <span class="mdc-button__label">Icon</span>
+            <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
           </button>
         </div>
 
+        <!-- Short labels to test min-width -->
         <div class="test-cell test-cell--button">
-          <button class="custom-button--horizontal-padding mdc-button mdc-button--dense">+</button><!-- test min-width -->
+          <button class="custom-button--horizontal-padding mdc-button mdc-button--dense">
+            <span class="mdc-button__label">+</span>
+          </button>
         </div>
         <div class="test-cell test-cell--button">
-          <button class="custom-button--horizontal-padding mdc-button mdc-button--dense mdc-button--raised">+</button><!-- test min-width -->
+          <button class="custom-button--horizontal-padding mdc-button mdc-button--dense mdc-button--raised">
+            <span class="mdc-button__label">+</span>
+          </button>
         </div>
         <div class="test-cell test-cell--button">
-          <button class="custom-button--horizontal-padding mdc-button mdc-button--dense mdc-button--unelevated">+</button><!-- test min-width -->
+          <button class="custom-button--horizontal-padding mdc-button mdc-button--dense mdc-button--unelevated">
+            <span class="mdc-button__label">+</span>
+          </button>
         </div>
         <div class="test-cell test-cell--button">
-          <button class="custom-button--horizontal-padding mdc-button mdc-button--dense mdc-button--outlined">+</button><!-- test min-width -->
+          <button class="custom-button--horizontal-padding mdc-button mdc-button--dense mdc-button--outlined">
+            <span class="mdc-button__label">+</span>
+          </button>
         </div>
 
         <div class="test-cell test-cell--button">
           <button class="custom-button--horizontal-padding mdc-button mdc-button--dense" disabled>
-            <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i> Disabled
+            <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
+            <span class="mdc-button__label">Disabled</span>
           </button>
         </div>
         <div class="test-cell test-cell--button">
           <button class="custom-button--horizontal-padding mdc-button mdc-button--dense mdc-button--raised" disabled>
-            <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i> Disabled
+            <span class="mdc-button__label">Disabled</span>
+            <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
           </button>
         </div>
         <div class="test-cell test-cell--button">
           <button class="custom-button--horizontal-padding mdc-button mdc-button--dense mdc-button--unelevated" disabled>
-            <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i> Disabled
+            <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
+            <span class="mdc-button__label">Disabled</span>
           </button>
         </div>
         <div class="test-cell test-cell--button">
           <button class="custom-button--horizontal-padding mdc-button mdc-button--dense mdc-button--outlined" disabled>
-            <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i> Disabled
+            <span class="mdc-button__label">Disabled</span>
+            <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
           </button>
         </div>
       </div>
diff --git a/test/screenshot/spec/mdc-button/mixins/icon-color.html b/test/screenshot/spec/mdc-button/mixins/icon-color.html
index 2c0eb79d2be..16e8ad84981 100644
--- a/test/screenshot/spec/mdc-button/mixins/icon-color.html
+++ b/test/screenshot/spec/mdc-button/mixins/icon-color.html
@@ -45,7 +45,7 @@
         <div class="test-cell test-cell--button">
           <button class="custom-button custom-button--icon-color mdc-button">
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
-            Font Icon
+            <span class="mdc-button__label">Font Icon</span>
           </button>
         </div>
         <div class="test-cell test-cell--button">
@@ -54,7 +54,7 @@
               <path fill="none" d="M0 0h24v24H0z"/>
               <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
             </svg>
-            SVG Icon
+            <span class="mdc-button__label">SVG Icon</span>
           </button>
         </div>
         <div class="test-cell test-cell--button">
@@ -63,19 +63,19 @@
               <path fill="none" d="M0 0h24v24H0z"/>
               <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
             </svg>
-            SVG Icon
+            <span class="mdc-button__label">SVG Icon</span>
           </button>
         </div>
         <div class="test-cell test-cell--button">
           <button class="custom-button custom-button--icon-color mdc-button" disabled>
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
-            Font Icon
+            <span class="mdc-button__label">Font Icon</span>
           </button>
         </div>
         <div class="test-cell test-cell--button">
           <button class="custom-button custom-button--icon-color mdc-button mdc-button--raised">
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
-            Font Icon
+            <span class="mdc-button__label">Font Icon</span>
           </button>
         </div>
         <div class="test-cell test-cell--button">
@@ -84,7 +84,7 @@
               <path fill="none" d="M0 0h24v24H0z"/>
               <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
             </svg>
-            SVG Icon
+            <span class="mdc-button__label">SVG Icon</span>
           </button>
         </div>
         <div class="test-cell test-cell--button">
@@ -93,13 +93,75 @@
               <path fill="none" d="M0 0h24v24H0z"/>
               <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
             </svg>
-            SVG Icon
+            <span class="mdc-button__label">SVG Icon</span>
           </button>
         </div>
         <div class="test-cell test-cell--button">
           <button class="custom-button custom-button--icon-color mdc-button mdc-button--raised" disabled>
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
-            Font Icon
+            <span class="mdc-button__label">Font Icon</span>
+          </button>
+        </div>
+
+        <!-- Trailing icon -->
+        <div class="test-cell test-cell--button">
+          <button class="custom-button custom-button--icon-color mdc-button">
+            <span class="mdc-button__label">Font Icon</span>
+            <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
+          </button>
+        </div>
+        <div class="test-cell test-cell--button">
+          <button class="custom-button custom-button--icon-color mdc-button">
+            <span class="mdc-button__label">SVG Icon</span>
+            <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
+              <path fill="none" d="M0 0h24v24H0z"/>
+              <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
+            </svg>
+          </button>
+        </div>
+        <div class="test-cell test-cell--button">
+          <button class="custom-button custom-button--icon-color mdc-button" disabled>
+            <span class="mdc-button__label">SVG Icon</span>
+            <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
+              <path fill="none" d="M0 0h24v24H0z"/>
+              <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
+            </svg>
+          </button>
+        </div>
+        <div class="test-cell test-cell--button">
+          <button class="custom-button custom-button--icon-color mdc-button" disabled>
+            <span class="mdc-button__label">Font Icon</span>
+            <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
+          </button>
+        </div>
+        <div class="test-cell test-cell--button">
+          <button class="custom-button custom-button--icon-color mdc-button mdc-button--raised">
+            <span class="mdc-button__label">Font Icon</span>
+            <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
+          </button>
+        </div>
+        <div class="test-cell test-cell--button">
+          <button class="custom-button custom-button--icon-color mdc-button mdc-button--raised">
+            <span class="mdc-button__label">SVG Icon</span>
+            <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
+              <path fill="none" d="M0 0h24v24H0z"/>
+              <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
+            </svg>
+          </button>
+        </div>
+        <div class="test-cell test-cell--button">
+          <button class="custom-button custom-button--icon-color mdc-button mdc-button--raised" disabled>
+            <span class="mdc-button__label">SVG Icon</span>
+            <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
+              <path fill="none" d="M0 0h24v24H0z"/>
+              <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
+            </svg>
+          </button>
+        </div>
+        <div class="test-cell test-cell--button">
+          <button class="custom-button custom-button--icon-color mdc-button mdc-button--raised" disabled>
+            <span class="mdc-button__label">Font Icon</span>
+            <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
           </button>
         </div>
       </div>
diff --git a/test/screenshot/spec/mdc-button/mixins/ink-color.html b/test/screenshot/spec/mdc-button/mixins/ink-color.html
index e26baa732e1..8cefde9d9eb 100644
--- a/test/screenshot/spec/mdc-button/mixins/ink-color.html
+++ b/test/screenshot/spec/mdc-button/mixins/ink-color.html
@@ -43,15 +43,19 @@
     <main class="test-viewport test-viewport--mobile">
       <div class="test-layout">
         <div class="test-cell test-cell--button">
-          <button class="custom-button custom-button--ink-color mdc-button">Button</button>
+          <button class="custom-button custom-button--ink-color mdc-button">
+            <span class="mdc-button__label">Button</span>
+          </button>
         </div>
         <div class="test-cell test-cell--button">
-          <a class="custom-button custom-button--ink-color mdc-button" href="#">Link</a>
+          <a class="custom-button custom-button--ink-color mdc-button" href="#">
+            <span class="mdc-button__label">Link</span>
+          </a>
         </div>
         <div class="test-cell test-cell--button">
           <button class="custom-button custom-button--ink-color mdc-button">
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
-            Font Icon
+            <span class="mdc-button__label">Font Icon</span>
           </button>
         </div>
         <div class="test-cell test-cell--button">
@@ -60,13 +64,13 @@
               <path fill="none" d="M0 0h24v24H0z"/>
               <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
             </svg>
-            SVG Icon
+            <span class="mdc-button__label">SVG Icon</span>
           </button>
         </div>
         <div class="test-cell test-cell--button">
           <button class="custom-button custom-button--ink-color mdc-button" disabled>
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
-            Font Icon
+            <span class="mdc-button__label">Font Icon</span>
           </button>
         </div>
         <div class="test-cell test-cell--button">
@@ -75,19 +79,23 @@
               <path fill="none" d="M0 0h24v24H0z"/>
               <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
             </svg>
-            SVG Icon
+            <span class="mdc-button__label">SVG Icon</span>
           </button>
         </div>
         <div class="test-cell test-cell--button">
-          <button class="custom-button custom-button--ink-color mdc-button mdc-button--raised">Button</button>
+          <button class="custom-button custom-button--ink-color mdc-button mdc-button--raised">
+            <span class="mdc-button__label">Button</span>
+          </button>
         </div>
         <div class="test-cell test-cell--button">
-          <a class="custom-button custom-button--ink-color mdc-button mdc-button--raised" href="#">Link</a>
+          <a class="custom-button custom-button--ink-color mdc-button mdc-button--raised" href="#">
+            <span class="mdc-button__label">Link</span>
+          </a>
         </div>
         <div class="test-cell test-cell--button">
           <button class="custom-button custom-button--ink-color mdc-button mdc-button--raised">
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
-            Font Icon
+            <span class="mdc-button__label">Font Icon</span>
           </button>
         </div>
         <div class="test-cell test-cell--button">
@@ -96,13 +104,13 @@
               <path fill="none" d="M0 0h24v24H0z"/>
               <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
             </svg>
-            SVG Icon
+            <span class="mdc-button__label">SVG Icon</span>
           </button>
         </div>
         <div class="test-cell test-cell--button">
           <button class="custom-button custom-button--ink-color mdc-button mdc-button--raised" disabled>
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
-            Font Icon
+            <span class="mdc-button__label">Font Icon</span>
           </button>
         </div>
         <div class="test-cell test-cell--button">
@@ -111,7 +119,7 @@
               <path fill="none" d="M0 0h24v24H0z"/>
               <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
             </svg>
-            SVG Icon
+            <span class="mdc-button__label">SVG Icon</span>
           </button>
         </div>
       </div>
diff --git a/test/screenshot/spec/mdc-button/mixins/shape-radius.html b/test/screenshot/spec/mdc-button/mixins/shape-radius.html
index a61ce438a3c..e813630c6ee 100644
--- a/test/screenshot/spec/mdc-button/mixins/shape-radius.html
+++ b/test/screenshot/spec/mdc-button/mixins/shape-radius.html
@@ -43,28 +43,44 @@
     <main class="test-viewport test-viewport--mobile">
       <div class="test-layout">
         <div class="test-cell test-cell--button">
-          <button class="custom-button custom-button--shape-radius mdc-button">Button</button>
+          <button class="custom-button custom-button--shape-radius mdc-button">
+            <span class="mdc-button__label">Button</span>
+          </button>
         </div>
         <div class="test-cell test-cell--button">
-          <button class="custom-button custom-button--shape-radius mdc-button" disabled>Disabled</button>
+          <button class="custom-button custom-button--shape-radius mdc-button" disabled>
+            <span class="mdc-button__label">Disabled</span>
+          </button>
         </div>
         <div class="test-cell test-cell--button">
-          <button class="custom-button custom-button--shape-radius mdc-button mdc-button--raised">Button</button>
+          <button class="custom-button custom-button--shape-radius mdc-button mdc-button--raised">
+            <span class="mdc-button__label">Button</span>
+          </button>
         </div>
         <div class="test-cell test-cell--button">
-          <button class="custom-button custom-button--shape-radius mdc-button mdc-button--raised" disabled>Disabled</button>
+          <button class="custom-button custom-button--shape-radius mdc-button mdc-button--raised" disabled>
+            <span class="mdc-button__label">Disabled</span>
+          </button>
         </div>
         <div class="test-cell test-cell--button">
-          <button class="custom-button custom-button--shape-radius mdc-button mdc-button--unelevated">Button</button>
+          <button class="custom-button custom-button--shape-radius mdc-button mdc-button--unelevated">
+            <span class="mdc-button__label">Button</span>
+          </button>
         </div>
         <div class="test-cell test-cell--button">
-          <button class="custom-button custom-button--shape-radius mdc-button mdc-button--unelevated" disabled>Disabled</button>
+          <button class="custom-button custom-button--shape-radius mdc-button mdc-button--unelevated" disabled>
+            <span class="mdc-button__label">Disabled</span>
+          </button>
         </div>
         <div class="test-cell test-cell--button">
-          <button class="custom-button custom-button--shape-radius mdc-button mdc-button--outlined">Button</button>
+          <button class="custom-button custom-button--shape-radius mdc-button mdc-button--outlined">
+            <span class="mdc-button__label">Button</span>
+          </button>
         </div>
         <div class="test-cell test-cell--button">
-          <button class="custom-button custom-button--shape-radius mdc-button mdc-button--outlined" disabled>Disabled</button>
+          <button class="custom-button custom-button--shape-radius mdc-button mdc-button--outlined" disabled>
+            <span class="mdc-button__label">Disabled</span>
+          </button>
         </div>
       </div>
     </main>
diff --git a/test/screenshot/spec/mdc-button/mixins/stroke-color.html b/test/screenshot/spec/mdc-button/mixins/stroke-color.html
index 6ce2849a7ef..3a615ca7efc 100644
--- a/test/screenshot/spec/mdc-button/mixins/stroke-color.html
+++ b/test/screenshot/spec/mdc-button/mixins/stroke-color.html
@@ -43,13 +43,19 @@
     <main class="test-viewport test-viewport--mobile">
       <div class="test-layout">
         <div class="test-cell test-cell--button">
-          <button class="custom-button custom-button--outline-color mdc-button mdc-button--outlined">Button</button>
+          <button class="custom-button custom-button--outline-color mdc-button mdc-button--outlined">
+            <span class="mdc-button__label">Button</span>
+          </button>
         </div>
         <div class="test-cell test-cell--button">
-          <a class="custom-button custom-button--outline-color mdc-button mdc-button--outlined" href="#">Link</a>
+          <a class="custom-button custom-button--outline-color mdc-button mdc-button--outlined" href="#">
+            <span class="mdc-button__label">Link</span>
+          </a>
         </div>
         <div class="test-cell test-cell--button">
-          <button class="custom-button custom-button--outline-color mdc-button mdc-button--outlined" disabled>Disabled</button>
+          <button class="custom-button custom-button--outline-color mdc-button mdc-button--outlined" disabled>
+            <span class="mdc-button__label">Disabled</span>
+          </button>
         </div>
       </div>
     </main>
diff --git a/test/screenshot/spec/mdc-button/mixins/stroke-width.html b/test/screenshot/spec/mdc-button/mixins/stroke-width.html
index 54e244784ec..99f9a83d3be 100644
--- a/test/screenshot/spec/mdc-button/mixins/stroke-width.html
+++ b/test/screenshot/spec/mdc-button/mixins/stroke-width.html
@@ -43,24 +43,43 @@
     <main class="test-viewport test-viewport--mobile">
       <div class="test-layout">
         <div class="test-cell test-cell--button">
-          <button class="custom-button custom-button--outline-width mdc-button mdc-button--outlined">Button</button>
+          <button class="custom-button custom-button--outline-width mdc-button mdc-button--outlined">
+            <span class="mdc-button__label">Button</span>
+          </button>
+        </div>
+        <div class="test-cell test-cell--button">
+          <a class="custom-button custom-button--outline-width mdc-button mdc-button--outlined" href="#">
+            <span class="mdc-button__label">Link</span>
+          </a>
         </div>
         <div class="test-cell test-cell--button">
-          <a class="custom-button custom-button--outline-width mdc-button mdc-button--outlined" href="#">Link</a>
+          <button class="custom-button custom-button--outline-width mdc-button mdc-button--outlined">
+            <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
+            <span class="mdc-button__label">Font Icon</span>
+          </button>
+        </div>
+        <div class="test-cell test-cell--button">
+          <button class="custom-button custom-button--outline-width mdc-button mdc-button--outlined">
+            <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
+              <path fill="none" d="M0 0h24v24H0z"/>
+              <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
+            </svg>
+            <span class="mdc-button__label">SVG Icon</span>
+          </button>
         </div>
         <div class="test-cell test-cell--button">
           <button class="custom-button custom-button--outline-width mdc-button mdc-button--outlined">
+            <span class="mdc-button__label">Font Icon</span>
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
-            Font Icon
           </button>
         </div>
         <div class="test-cell test-cell--button">
           <button class="custom-button custom-button--outline-width mdc-button mdc-button--outlined">
+            <span class="mdc-button__label">SVG Icon</span>
             <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
               <path fill="none" d="M0 0h24v24H0z"/>
               <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
             </svg>
-            SVG Icon
           </button>
         </div>
         <div class="test-cell test-cell--button">
@@ -69,34 +88,53 @@
               <path fill="none" d="M0 0h24v24H0z"/>
               <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
             </svg>
-            SVG Icon
+            <span class="mdc-button__label">SVG Icon</span>
           </button>
         </div>
         <div class="test-cell test-cell--button">
           <button class="custom-button custom-button--outline-width mdc-button mdc-button--outlined" disabled>
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
-            Font Icon
+            <span class="mdc-button__label">Font Icon</span>
           </button>
         </div>
         <div class="test-cell test-cell--button">
-          <button class="custom-button custom-button--outline-width mdc-button mdc-button--outlined mdc-button--dense">Button</button>
+          <button class="custom-button custom-button--outline-width mdc-button mdc-button--outlined mdc-button--dense">
+            <span class="mdc-button__label">Button</span>
+          </button>
+        </div>
+        <div class="test-cell test-cell--button">
+          <a class="custom-button custom-button--outline-width mdc-button mdc-button--outlined mdc-button--dense" href="#">
+            <span class="mdc-button__label">Link</span>
+          </a>
         </div>
         <div class="test-cell test-cell--button">
-          <a class="custom-button custom-button--outline-width mdc-button mdc-button--outlined mdc-button--dense" href="#">Link</a>
+          <button class="custom-button custom-button--outline-width mdc-button mdc-button--outlined mdc-button--dense">
+            <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
+            <span class="mdc-button__label">Font Icon</span>
+          </button>
+        </div>
+        <div class="test-cell test-cell--button">
+          <button class="custom-button custom-button--outline-width mdc-button mdc-button--outlined mdc-button--dense">
+            <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
+              <path fill="none" d="M0 0h24v24H0z"/>
+              <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
+            </svg>
+            <span class="mdc-button__label">SVG Icon</span>
+          </button>
         </div>
         <div class="test-cell test-cell--button">
           <button class="custom-button custom-button--outline-width mdc-button mdc-button--outlined mdc-button--dense">
+            <span class="mdc-button__label">Font Icon</span>
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
-            Font Icon
           </button>
         </div>
         <div class="test-cell test-cell--button">
           <button class="custom-button custom-button--outline-width mdc-button mdc-button--outlined mdc-button--dense">
+            <span class="mdc-button__label">SVG Icon</span>
             <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
               <path fill="none" d="M0 0h24v24H0z"/>
               <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
             </svg>
-            SVG Icon
           </button>
         </div>
         <div class="test-cell test-cell--button">
@@ -105,13 +143,13 @@
               <path fill="none" d="M0 0h24v24H0z"/>
               <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
             </svg>
-            SVG Icon
+            <span class="mdc-button__label">SVG Icon</span>
           </button>
         </div>
         <div class="test-cell test-cell--button">
           <button class="custom-button custom-button--outline-width mdc-button mdc-button--outlined mdc-button--dense" disabled>
             <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
-            Font Icon
+            <span class="mdc-button__label">Font Icon</span>
           </button>
         </div>
       </div>
diff --git a/test/screenshot/spec/mdc-dialog/classes/baseline-alert-above-drawer.html b/test/screenshot/spec/mdc-dialog/classes/baseline-alert-above-drawer.html
index 6687e066ff2..5ba8b58e71a 100644
--- a/test/screenshot/spec/mdc-dialog/classes/baseline-alert-above-drawer.html
+++ b/test/screenshot/spec/mdc-dialog/classes/baseline-alert-above-drawer.html
@@ -107,10 +107,10 @@ <h6 class="mdc-list-group__subheader">Labels</h6>
                 </div>
                 <footer class="mdc-dialog__actions">
                   <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="cancel">
-                    <span class="test-font--redact-all">Cancel</span>
+                    <span class="mdc-button__label test-font--redact-all">Cancel</span>
                   </button>
                   <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="yes">
-                    <span class="test-font--redact-all">Discard</span>
+                    <span class="mdc-button__label test-font--redact-all">Discard</span>
                   </button>
                 </footer>
               </div>
diff --git a/test/screenshot/spec/mdc-dialog/classes/baseline-alert-with-title.html b/test/screenshot/spec/mdc-dialog/classes/baseline-alert-with-title.html
index 50e95787869..352f27471ce 100644
--- a/test/screenshot/spec/mdc-dialog/classes/baseline-alert-with-title.html
+++ b/test/screenshot/spec/mdc-dialog/classes/baseline-alert-with-title.html
@@ -56,10 +56,10 @@ <h2 class="mdc-dialog__title test-dialog__title" id="test-dialog__title"><!--
             </div>
             <footer class="mdc-dialog__actions">
               <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="cancel">
-                <span class="test-font--redact-all">Cancel</span>
+                <span class="mdc-button__label test-font--redact-all">Cancel</span>
               </button>
               <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="yes">
-                <span class="test-font--redact-all">Discard</span>
+                <span class="mdc-button__label test-font--redact-all">Discard</span>
               </button>
             </footer>
           </div>
diff --git a/test/screenshot/spec/mdc-dialog/classes/baseline-alert.html b/test/screenshot/spec/mdc-dialog/classes/baseline-alert.html
index 9acb0d8fe0a..cd609fe1b6f 100644
--- a/test/screenshot/spec/mdc-dialog/classes/baseline-alert.html
+++ b/test/screenshot/spec/mdc-dialog/classes/baseline-alert.html
@@ -52,10 +52,10 @@
             </div>
             <footer class="mdc-dialog__actions">
               <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="cancel">
-                <span class="test-font--redact-all">Cancel</span>
+                <span class="mdc-button__label test-font--redact-all">Cancel</span>
               </button>
               <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="yes">
-                <span class="test-font--redact-all">Discard</span>
+                <span class="mdc-button__label test-font--redact-all">Discard</span>
               </button>
             </footer>
           </div>
diff --git a/test/screenshot/spec/mdc-dialog/classes/baseline-confirmation.html b/test/screenshot/spec/mdc-dialog/classes/baseline-confirmation.html
index c1a80baefae..4ab907ced6a 100644
--- a/test/screenshot/spec/mdc-dialog/classes/baseline-confirmation.html
+++ b/test/screenshot/spec/mdc-dialog/classes/baseline-confirmation.html
@@ -96,10 +96,10 @@ <h2 class="mdc-dialog__title test-dialog__title" id="test-dialog__title">Confirm
             </div>
             <footer class="mdc-dialog__actions">
               <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="cancel">
-                <span class="test-font--redact-all">Cancel</span>
+                <span class="mdc-button__label test-font--redact-all">Cancel</span>
               </button>
               <button type="button" class="mdc-button mdc-dialog__button mdc-dialog__button--default" data-mdc-dialog-action="yes">
-                <span class="test-font--redact-all">OK</span>
+                <span class="mdc-button__label test-font--redact-all">OK</span>
               </button>
             </footer>
           </div>
diff --git a/test/screenshot/spec/mdc-dialog/classes/manual-window-resize.html b/test/screenshot/spec/mdc-dialog/classes/manual-window-resize.html
index 85fd62248cb..d4048dec655 100644
--- a/test/screenshot/spec/mdc-dialog/classes/manual-window-resize.html
+++ b/test/screenshot/spec/mdc-dialog/classes/manual-window-resize.html
@@ -71,13 +71,13 @@ <h2 class="mdc-dialog__title test-dialog__title test-dialog__title--3-line" id="
             </div>
             <footer class="mdc-dialog__actions">
               <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="other">
-                <span class="test-font--redact-all">Verbose loquacious button text</span>
+                <span class="mdc-button__label test-font--redact-all">Verbose loquacious button text</span>
               </button>
               <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="cancel">
-                <span class="test-font--redact-all">Cancel</span>
+                <span class="mdc-button__label test-font--redact-all">Cancel</span>
               </button>
               <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="yes">
-                <span class="test-font--redact-all">OK</span>
+                <span class="mdc-button__label test-font--redact-all">OK</span>
               </button>
             </footer>
           </div>
diff --git a/test/screenshot/spec/mdc-dialog/classes/overflow-accessible-font-size.html b/test/screenshot/spec/mdc-dialog/classes/overflow-accessible-font-size.html
index d4fbd3b5f32..d4a46a00008 100644
--- a/test/screenshot/spec/mdc-dialog/classes/overflow-accessible-font-size.html
+++ b/test/screenshot/spec/mdc-dialog/classes/overflow-accessible-font-size.html
@@ -276,13 +276,15 @@ <h2 class="mdc-dialog__title test-dialog__title test-dialog__title--3-line" id="
             </div>
             <footer class="mdc-dialog__actions">
               <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="other">
-                <span class="test-font--redact-all">This is a really long button for testing purposes only. Button text should be short when at all possible, but l10n can present a challenge.</span>
+                <span class="mdc-button__label test-font--redact-all">
+                  This is a really long button for testing purposes only. Button text should be short when at all possible, but l10n can present a challenge.
+                </span>
               </button>
               <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="cancel">
-                <span class="test-font--redact-all">Cancel</span>
+                <span class="mdc-button__label test-font--redact-all">Cancel</span>
               </button>
               <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="yes">
-                <span class="test-font--redact-all">OK</span>
+                <span class="mdc-button__label test-font--redact-all">OK</span>
               </button>
             </footer>
           </div>
diff --git a/test/screenshot/spec/mdc-dialog/classes/overflow-bottom.html b/test/screenshot/spec/mdc-dialog/classes/overflow-bottom.html
index 602f3327abb..d1e7a2a0521 100644
--- a/test/screenshot/spec/mdc-dialog/classes/overflow-bottom.html
+++ b/test/screenshot/spec/mdc-dialog/classes/overflow-bottom.html
@@ -276,13 +276,15 @@ <h2 class="mdc-dialog__title test-dialog__title test-dialog__title--3-line" id="
             </div>
             <footer class="mdc-dialog__actions">
               <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="other">
-                <span class="test-font--redact-all">This is a really long button for testing purposes only. Button text should be short when at all possible, but l10n can present a challenge.</span>
+                <span class="mdc-button__label test-font--redact-all">
+                  This is a really long button for testing purposes only. Button text should be short when at all possible, but l10n can present a challenge.
+                </span>
               </button>
               <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="cancel">
-                <span class="test-font--redact-all">Cancel</span>
+                <span class="mdc-button__label test-font--redact-all">Cancel</span>
               </button>
               <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="yes">
-                <span class="test-font--redact-all">OK</span>
+                <span class="mdc-button__label test-font--redact-all">OK</span>
               </button>
             </footer>
           </div>
diff --git a/test/screenshot/spec/mdc-dialog/classes/overflow-top.html b/test/screenshot/spec/mdc-dialog/classes/overflow-top.html
index 3926ef6b4ad..9489c2d8c9c 100644
--- a/test/screenshot/spec/mdc-dialog/classes/overflow-top.html
+++ b/test/screenshot/spec/mdc-dialog/classes/overflow-top.html
@@ -276,13 +276,15 @@ <h2 class="mdc-dialog__title test-dialog__title test-dialog__title--3-line" id="
             </div>
             <footer class="mdc-dialog__actions">
               <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="other">
-                <span class="test-font--redact-all">This is a really long button for testing purposes only. Button text should be short when at all possible, but l10n can present a challenge.</span>
+                <span class="mdc-button__label test-font--redact-all">
+                  This is a really long button for testing purposes only. Button text should be short when at all possible, but l10n can present a challenge.
+                </span>
               </button>
               <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="cancel">
-                <span class="test-font--redact-all">Cancel</span>
+                <span class="mdc-button__label test-font--redact-all">Cancel</span>
               </button>
               <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="yes">
-                <span class="test-font--redact-all">OK</span>
+                <span class="mdc-button__label test-font--redact-all">OK</span>
               </button>
             </footer>
           </div>
diff --git a/test/screenshot/spec/mdc-dialog/issues/3717.html b/test/screenshot/spec/mdc-dialog/issues/3717.html
index 3c2590c6913..52ba2272afb 100644
--- a/test/screenshot/spec/mdc-dialog/issues/3717.html
+++ b/test/screenshot/spec/mdc-dialog/issues/3717.html
@@ -75,10 +75,10 @@ <h2 class="mdc-dialog__title test-dialog__title test-dialog__title--3-line" id="
             </div>
             <footer class="mdc-dialog__actions">
               <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="close">
-                <span class="test-font--redact-all">Cancel</span>
+                <span class="mdc-button__label test-font--redact-all">Cancel</span>
               </button>
               <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="yes">
-                <span class="test-font--redact-all">OK</span>
+                <span class="mdc-button__label test-font--redact-all">OK</span>
               </button>
             </footer>
           </div>
diff --git a/test/screenshot/spec/mdc-dialog/mixins/container-fill-color.html b/test/screenshot/spec/mdc-dialog/mixins/container-fill-color.html
index 421db1cd0ac..df276976e41 100644
--- a/test/screenshot/spec/mdc-dialog/mixins/container-fill-color.html
+++ b/test/screenshot/spec/mdc-dialog/mixins/container-fill-color.html
@@ -71,13 +71,13 @@ <h2 class="mdc-dialog__title test-dialog__title test-dialog__title--3-line" id="
             </div>
             <footer class="mdc-dialog__actions">
               <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="other">
-                <span class="test-font--redact-all">Verbose loquacious button text</span>
+                <span class="mdc-button__label test-font--redact-all">Verbose loquacious button text</span>
               </button>
               <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="cancel">
-                <span class="test-font--redact-all">Cancel</span>
+                <span class="mdc-button__label test-font--redact-all">Cancel</span>
               </button>
               <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="yes">
-                <span class="test-font--redact-all">OK</span>
+                <span class="mdc-button__label test-font--redact-all">OK</span>
               </button>
             </footer>
           </div>
diff --git a/test/screenshot/spec/mdc-dialog/mixins/content-ink-color.html b/test/screenshot/spec/mdc-dialog/mixins/content-ink-color.html
index 100d4e1afb1..3d09efff43f 100644
--- a/test/screenshot/spec/mdc-dialog/mixins/content-ink-color.html
+++ b/test/screenshot/spec/mdc-dialog/mixins/content-ink-color.html
@@ -71,13 +71,13 @@ <h2 class="mdc-dialog__title test-dialog__title test-dialog__title--3-line" id="
             </div>
             <footer class="mdc-dialog__actions">
               <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="other">
-                <span class="test-font--redact-all">Verbose loquacious button text</span>
+                <span class="mdc-button__label test-font--redact-all">Verbose loquacious button text</span>
               </button>
               <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="cancel">
-                <span class="test-font--redact-all">Cancel</span>
+                <span class="mdc-button__label test-font--redact-all">Cancel</span>
               </button>
               <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="yes">
-                <span class="test-font--redact-all">OK</span>
+                <span class="mdc-button__label test-font--redact-all">OK</span>
               </button>
             </footer>
           </div>
diff --git a/test/screenshot/spec/mdc-dialog/mixins/max-height.html b/test/screenshot/spec/mdc-dialog/mixins/max-height.html
index 04a81f2e78b..54830c28b57 100644
--- a/test/screenshot/spec/mdc-dialog/mixins/max-height.html
+++ b/test/screenshot/spec/mdc-dialog/mixins/max-height.html
@@ -276,13 +276,15 @@ <h2 class="mdc-dialog__title test-dialog__title test-dialog__title--3-line" id="
             </div>
             <footer class="mdc-dialog__actions">
               <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="other">
-                <span class="test-font--redact-all">This is a really long button for testing purposes only. Button text should be short when at all possible, but l10n can present a challenge.</span>
+                <span class="mdc-button__label test-font--redact-all">
+                  This is a really long button for testing purposes only. Button text should be short when at all possible, but l10n can present a challenge.
+                </span>
               </button>
               <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="cancel">
-                <span class="test-font--redact-all">Cancel</span>
+                <span class="mdc-button__label test-font--redact-all">Cancel</span>
               </button>
               <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="yes">
-                <span class="test-font--redact-all">OK</span>
+                <span class="mdc-button__label test-font--redact-all">OK</span>
               </button>
             </footer>
           </div>
diff --git a/test/screenshot/spec/mdc-dialog/mixins/max-width.html b/test/screenshot/spec/mdc-dialog/mixins/max-width.html
index ef042a3a0fc..347707e739a 100644
--- a/test/screenshot/spec/mdc-dialog/mixins/max-width.html
+++ b/test/screenshot/spec/mdc-dialog/mixins/max-width.html
@@ -276,13 +276,15 @@ <h2 class="mdc-dialog__title test-dialog__title test-dialog__title--5-line" id="
             </div>
             <footer class="mdc-dialog__actions">
               <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="other">
-                <span class="test-font--redact-all">This is a really long button for testing purposes only. Button text should be short when at all possible, but l10n can present a challenge.</span>
+                <span class="mdc-button__label test-font--redact-all">
+                  This is a really long button for testing purposes only. Button text should be short when at all possible, but l10n can present a challenge.
+                </span>
               </button>
               <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="cancel">
-                <span class="test-font--redact-all">Cancel</span>
+                <span class="mdc-button__label test-font--redact-all">Cancel</span>
               </button>
               <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="yes">
-                <span class="test-font--redact-all">OK</span>
+                <span class="mdc-button__label test-font--redact-all">OK</span>
               </button>
             </footer>
           </div>
diff --git a/test/screenshot/spec/mdc-dialog/mixins/min-width.html b/test/screenshot/spec/mdc-dialog/mixins/min-width.html
index 1b3049447c1..104eb5cf706 100644
--- a/test/screenshot/spec/mdc-dialog/mixins/min-width.html
+++ b/test/screenshot/spec/mdc-dialog/mixins/min-width.html
@@ -56,7 +56,7 @@ <h2 class="mdc-dialog__title test-dialog__title" id="test-dialog__title">Title</
             </div>
             <footer class="mdc-dialog__actions">
               <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="yes">
-                <span class="test-font--redact-all">OK</span>
+                <span class="mdc-button__label test-font--redact-all">OK</span>
               </button>
             </footer>
           </div>
diff --git a/test/screenshot/spec/mdc-dialog/mixins/scrim-color.html b/test/screenshot/spec/mdc-dialog/mixins/scrim-color.html
index ceaf64fadfe..b7615161822 100644
--- a/test/screenshot/spec/mdc-dialog/mixins/scrim-color.html
+++ b/test/screenshot/spec/mdc-dialog/mixins/scrim-color.html
@@ -71,13 +71,13 @@ <h2 class="mdc-dialog__title test-dialog__title test-dialog__title--3-line" id="
             </div>
             <footer class="mdc-dialog__actions">
               <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="other">
-                <span class="test-font--redact-all">Verbose loquacious button text</span>
+                <span class="mdc-button__label test-font--redact-all">Verbose loquacious button text</span>
               </button>
               <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="cancel">
-                <span class="test-font--redact-all">Cancel</span>
+                <span class="mdc-button__label test-font--redact-all">Cancel</span>
               </button>
               <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="yes">
-                <span class="test-font--redact-all">OK</span>
+                <span class="mdc-button__label test-font--redact-all">OK</span>
               </button>
             </footer>
           </div>
diff --git a/test/screenshot/spec/mdc-dialog/mixins/scroll-divider-color.html b/test/screenshot/spec/mdc-dialog/mixins/scroll-divider-color.html
index b2579ccce99..76ad1d56c2d 100644
--- a/test/screenshot/spec/mdc-dialog/mixins/scroll-divider-color.html
+++ b/test/screenshot/spec/mdc-dialog/mixins/scroll-divider-color.html
@@ -276,13 +276,13 @@ <h2 class="mdc-dialog__title test-dialog__title test-dialog__title--3-line" id="
             </div>
             <footer class="mdc-dialog__actions">
               <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="other">
-                <span class="test-font--redact-all">Verbose loquacious button text</span>
+                <span class="mdc-button__label test-font--redact-all">Verbose loquacious button text</span>
               </button>
               <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="cancel">
-                <span class="test-font--redact-all">Cancel</span>
+                <span class="mdc-button__label test-font--redact-all">Cancel</span>
               </button>
               <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="yes">
-                <span class="test-font--redact-all">OK</span>
+                <span class="mdc-button__label test-font--redact-all">OK</span>
               </button>
             </footer>
           </div>
diff --git a/test/screenshot/spec/mdc-dialog/mixins/shape-radius.html b/test/screenshot/spec/mdc-dialog/mixins/shape-radius.html
index 34585a68e3b..5838f2df731 100644
--- a/test/screenshot/spec/mdc-dialog/mixins/shape-radius.html
+++ b/test/screenshot/spec/mdc-dialog/mixins/shape-radius.html
@@ -71,13 +71,13 @@ <h2 class="mdc-dialog__title test-dialog__title test-dialog__title--3-line" id="
             </div>
             <footer class="mdc-dialog__actions">
               <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="other">
-                <span class="test-font--redact-all">Verbose loquacious button text</span>
+                <span class="mdc-button__label test-font--redact-all">Verbose loquacious button text</span>
               </button>
               <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="cancel">
-                <span class="test-font--redact-all">Cancel</span>
+                <span class="mdc-button__label test-font--redact-all">Cancel</span>
               </button>
               <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="yes">
-                <span class="test-font--redact-all">OK</span>
+                <span class="mdc-button__label test-font--redact-all">OK</span>
               </button>
             </footer>
           </div>
diff --git a/test/screenshot/spec/mdc-dialog/mixins/title-ink-color.html b/test/screenshot/spec/mdc-dialog/mixins/title-ink-color.html
index 8df7a0a66b6..645581c9cd3 100644
--- a/test/screenshot/spec/mdc-dialog/mixins/title-ink-color.html
+++ b/test/screenshot/spec/mdc-dialog/mixins/title-ink-color.html
@@ -71,13 +71,13 @@ <h2 class="mdc-dialog__title test-dialog__title test-dialog__title--3-line" id="
             </div>
             <footer class="mdc-dialog__actions">
               <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="other">
-                <span class="test-font--redact-all">Verbose loquacious button text</span>
+                <span class="mdc-button__label test-font--redact-all">Verbose loquacious button text</span>
               </button>
               <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="cancel">
-                <span class="test-font--redact-all">Cancel</span>
+                <span class="mdc-button__label test-font--redact-all">Cancel</span>
               </button>
               <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="yes">
-                <span class="test-font--redact-all">OK</span>
+                <span class="mdc-button__label test-font--redact-all">OK</span>
               </button>
             </footer>
           </div>
diff --git a/test/unit/mdc-dialog/mdc-dialog.test.js b/test/unit/mdc-dialog/mdc-dialog.test.js
index c9ebb10d3b4..5e57f1405fa 100644
--- a/test/unit/mdc-dialog/mdc-dialog.test.js
+++ b/test/unit/mdc-dialog/mdc-dialog.test.js
@@ -48,12 +48,15 @@ function getFixture() {
               Let Google help apps determine location.
             </section>
             <footer class="mdc-dialog__actions">
-              <button class="mdc-button mdc-dialog__button" data-mdc-dialog-action="cancel"
-                      type="button">Cancel</button>
-              <button class="mdc-button mdc-dialog__button" data-mdc-dialog-action="no"
-                      type="button">No</button>
-              <button class="mdc-button mdc-dialog__button" data-mdc-dialog-action="yes"
-                      type="button">Yes</button>
+              <button class="mdc-button mdc-dialog__button" data-mdc-dialog-action="cancel" type="button">
+                <span class="mdc-button__label">Cancel</span>
+              </button>
+              <button class="mdc-button mdc-dialog__button" data-mdc-dialog-action="no" type="button">
+                <span class="mdc-button__label">No</span>
+              </button>
+              <button class="mdc-button mdc-dialog__button" data-mdc-dialog-action="yes" type="button">
+                <span class="mdc-button__label">Yes</span>
+              </button>
             </footer>
           </div>
         </div>