From 362e08e6ea3c762d2ce9c899ee7ec1bc2fd9068b Mon Sep 17 00:00:00 2001
From: Liz Mitchell <lizmitchell@google.com>
Date: Thu, 19 Dec 2019 15:57:06 -0800
Subject: [PATCH 1/9] fix(textfield): add separate classes for leading/trailing
 icons

BREAKING_CHANGE: icons must use `.mdc-text-field__leading-icon` or `.mdc-text-field__trailing-icon` classes. `mdc-text-field-icon-color()` mixin has been split into `mdc-text-field-leading-icon-color()` and `mdc-text-field-trailing-icon-color()`.
---
 packages/mdc-textfield/_mixins.scss           | 36 ++++-----
 packages/mdc-textfield/component.ts           | 22 ++---
 packages/mdc-textfield/constants.ts           |  3 +-
 packages/mdc-textfield/icon/README.md         | 26 +++---
 packages/mdc-textfield/icon/_mixins.scss      | 81 ++++++++++++++-----
 packages/mdc-textfield/icon/constants.ts      |  3 +-
 .../icon/mdc-text-field-icon.scss             | 17 ++--
 packages/mdc-textfield/mdc-text-field.scss    |  7 +-
 .../classes/baseline-leading-icon.html        |  8 +-
 .../baseline-leading-trailing-icons.html      | 16 ++--
 .../classes/baseline-trailing-icon.html       |  8 +-
 .../baseline-without-label-with-icon.html     |  8 +-
 .../classes/disabled-leading-icon.html        |  8 +-
 .../disabled-leading-trailing-icons.html      | 16 ++--
 .../classes/disabled-trailing-icon.html       |  8 +-
 .../classes/focused-leading-icon.html         |  8 +-
 .../focused-leading-trailing-icons.html       | 16 ++--
 .../classes/focused-trailing-icon.html        |  8 +-
 .../classes/invalid-focused-leading-icon.html |  8 +-
 ...nvalid-focused-leading-trailing-icons.html | 16 ++--
 .../invalid-focused-trailing-icon.html        |  8 +-
 .../classes/invalid-leading-icon.html         |  8 +-
 .../invalid-leading-trailing-icons.html       | 16 ++--
 .../classes/invalid-trailing-icon.html        |  8 +-
 .../mixins/density-leading-icon-invalid.html  |  8 +-
 .../mixins/density-leading-icon.html          |  8 +-
 .../spec/mdc-textfield/mixins/disabled-1.html |  8 +-
 .../mdc-textfield/mdc-text-field-icon.test.js |  2 +-
 28 files changed, 206 insertions(+), 183 deletions(-)

diff --git a/packages/mdc-textfield/_mixins.scss b/packages/mdc-textfield/_mixins.scss
index be41121edbc..af41469cfa6 100644
--- a/packages/mdc-textfield/_mixins.scss
+++ b/packages/mdc-textfield/_mixins.scss
@@ -382,7 +382,8 @@
   @include mdc-text-field-label-ink-color_($mdc-text-field-disabled-label-color);
   @include mdc-text-field-helper-text-color_($mdc-text-field-disabled-helper-text-color);
   @include mdc-text-field-character-counter-color_($mdc-text-field-disabled-helper-text-color);
-  @include mdc-text-field-icon-color_($mdc-text-field-disabled-icon);
+  @include mdc-text-field-leading-icon-color_($mdc-text-field-disabled-icon);
+  @include mdc-text-field-trailing-icon-color_($mdc-text-field-disabled-icon);
   @include mdc-text-field-fill-color_($mdc-text-field-disabled-background);
 
   border-bottom: none;
@@ -400,16 +401,7 @@
   @include mdc-text-field-label-color($mdc-text-field-error);
   @include mdc-text-field-helper-text-validation-color($mdc-text-field-error);
   @include mdc-text-field-caret-color($mdc-text-field-error);
-
-  &.mdc-text-field--with-trailing-icon {
-    &:not(.mdc-text-field--with-leading-icon) {
-      @include mdc-text-field-icon-color($mdc-text-field-error);
-    }
-
-    &.mdc-text-field--with-leading-icon {
-      @include mdc-text-field-icon-color($mdc-text-field-error, /* styleSecondIcon */ true);
-    }
-  }
+  @include mdc-text-field-trailing-icon-color($mdc-text-field-error);
 
   + .mdc-text-field-helper-line .mdc-text-field-helper-text--validation-msg {
     opacity: 1;
@@ -573,7 +565,8 @@
     top: 14px;
   }
 
-  .mdc-text-field__icon {
+  .mdc-text-field__leading-icon,
+  .mdc-text-field__trailing-icon {
     top: 12px;
   }
 }
@@ -600,7 +593,8 @@
     z-index: 1;
   }
 
-  .mdc-text-field__icon {
+  .mdc-text-field__leading-icon,
+  .mdc-text-field__trailing-icon {
     z-index: 2;
   }
 
@@ -610,13 +604,9 @@
 }
 
 @mixin mdc-text-field-hover-outline-color_($color) {
-  &:not(.mdc-text-field--focused) {
-    // stylelint-disable-next-line selector-combinator-space-after
-    .mdc-text-field__input:hover ~,
-    .mdc-text-field__icon:hover ~ {
-      .mdc-notched-outline {
-        @include mdc-notched-outline-color($color);
-      }
+  &:not(.mdc-text-field--focused):hover {
+    .mdc-notched-outline {
+      @include mdc-notched-outline-color($color);
     }
   }
 }
@@ -631,6 +621,7 @@
 
 @mixin mdc-text-field-with-leading-icon_ {
   @include mdc-text-field-icon-horizontal-position_(
+    leading,
     left,
     $mdc-text-field-icon-position,
     $mdc-text-field-icon-padding,
@@ -644,6 +635,7 @@
 
 @mixin mdc-text-field-dense-with-leading-icon_ {
   @include mdc-text-field-icon-horizontal-position_(
+    leading,
     left,
     $mdc-text-field-dense-icon-position,
     $mdc-text-field-dense-icon-padding,
@@ -657,6 +649,7 @@
 
 @mixin mdc-text-field-outlined-with-leading-icon_ {
   @include mdc-text-field-icon-horizontal-position_(
+    leading,
     left,
     $mdc-text-field-icon-position,
     $mdc-text-field-icon-padding,
@@ -693,6 +686,7 @@
 
 @mixin mdc-text-field-with-trailing-icon_ {
   @include mdc-text-field-icon-horizontal-position_(
+    trailing,
     right,
     $mdc-text-field-trailing-icon-position,
     $mdc-text-field-icon-padding,
@@ -702,6 +696,7 @@
   // Outlined uses 16px for text alignment when using a trailing icon.
   &.mdc-text-field--outlined {
     @include mdc-text-field-icon-horizontal-position_(
+      trailing,
       right,
       $mdc-text-field-icon-position,
       $mdc-text-field-icon-padding,
@@ -712,6 +707,7 @@
 
 @mixin mdc-text-field-dense-with-trailing-icon_ {
   @include mdc-text-field-icon-horizontal-position_(
+    trailing,
     right,
     $mdc-text-field-dense-icon-position,
     $mdc-text-field-dense-icon-padding,
diff --git a/packages/mdc-textfield/component.ts b/packages/mdc-textfield/component.ts
index e9aed783057..8614ef8832b 100644
--- a/packages/mdc-textfield/component.ts
+++ b/packages/mdc-textfield/component.ts
@@ -113,21 +113,13 @@ export class MDCTextField extends MDCComponent<MDCTextFieldFoundation> implement
     }
     this.characterCounter_ = characterCounterEl ? characterCounterFactory(characterCounterEl) : null;
 
-    this.leadingIcon_ = null;
-    this.trailingIcon_ = null;
-    const iconElements = this.root_.querySelectorAll(strings.ICON_SELECTOR);
-    if (iconElements.length > 0) {
-      if (iconElements.length > 1) { // Has both icons.
-        this.leadingIcon_ = iconFactory(iconElements[0]);
-        this.trailingIcon_ = iconFactory(iconElements[1]);
-      } else {
-        if (this.root_.classList.contains(cssClasses.WITH_LEADING_ICON)) {
-          this.leadingIcon_ = iconFactory(iconElements[0]);
-        } else {
-          this.trailingIcon_ = iconFactory(iconElements[0]);
-        }
-      }
-    }
+    // Leading icon
+    const leadingIconEl = this.root_.querySelector(strings.LEADING_ICON_SELECTOR);
+    this.leadingIcon_ = leadingIconEl ? iconFactory(leadingIconEl) : null;
+
+    // Trailing icon
+    const trailingIconEl = this.root_.querySelector(strings.TRAILING_ICON_SELECTOR);
+    this.trailingIcon_ = trailingIconEl ? iconFactory(trailingIconEl) : null;
 
     this.ripple = this.createRipple_(rippleFactory);
   }
diff --git a/packages/mdc-textfield/constants.ts b/packages/mdc-textfield/constants.ts
index bc8b919b739..b964c7e0d91 100644
--- a/packages/mdc-textfield/constants.ts
+++ b/packages/mdc-textfield/constants.ts
@@ -23,11 +23,12 @@
 
 const strings = {
   ARIA_CONTROLS: 'aria-controls',
-  ICON_SELECTOR: '.mdc-text-field__icon',
   INPUT_SELECTOR: '.mdc-text-field__input',
   LABEL_SELECTOR: '.mdc-floating-label',
+  LEADING_ICON_SELECTOR: '.mdc-text-field__leading-icon',
   LINE_RIPPLE_SELECTOR: '.mdc-line-ripple',
   OUTLINE_SELECTOR: '.mdc-notched-outline',
+  TRAILING_ICON_SELECTOR: '.mdc-text-field__trailing-icon'
 };
 
 const cssClasses = {
diff --git a/packages/mdc-textfield/icon/README.md b/packages/mdc-textfield/icon/README.md
index 8d9ddef9cd7..ce8203e2d08 100644
--- a/packages/mdc-textfield/icon/README.md
+++ b/packages/mdc-textfield/icon/README.md
@@ -24,7 +24,7 @@ Icons describe the type of input a text field requires. They can also be interac
 ### HTML Structure
 
 ```html
-<i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
+<i class="material-icons mdc-text-field__leading-icon" tabindex="0" role="button">event</i>
 ```
 
 #### Icon Set
@@ -55,7 +55,7 @@ const icon = new MDCTextFieldIcon(document.querySelector('.mdc-text-field-icon')
 
 ## Variants
 
-Leading and trailing icons can be applied to default or `mdc-text-field--outlined` Text Fields. To add an icon, add the relevant class (`mdc-text-field--with-leading-icon` and/or `mdc-text-field--with-trailing-icon`) to the root element, add an `i` element with your preferred icon, and give it a class of `mdc-text-field__icon`. If using 2 icons at the same time, the first icon inside the `mdc-text-field` element will be interpreted as the leading icon and the second icon will be interpreted as the trailing icon.
+Leading and trailing icons can be applied to default or `mdc-text-field--outlined` Text Fields. To add an icon, add the relevant class (`mdc-text-field--with-leading-icon` and/or `mdc-text-field--with-trailing-icon`) to the root element, add an `i` element with your preferred icon, and give it a class of `mdc-text-field__leading-icon` or `mdc-text-field__trailing-icon`.
 
 > **NOTE:** if you would like to display un-clickable icons, simply omit `tabindex="0"` and `role="button"`, and the CSS will ensure the cursor is set to default, and that interacting with an icon doesn't do anything unexpected.
 
@@ -65,7 +65,7 @@ In text field:
 
 ```html
 <div class="mdc-text-field mdc-text-field--with-leading-icon">
-  <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
+  <i class="material-icons mdc-text-field__leading-icon" tabindex="0" role="button">event</i>
   <input type="text" id="my-input" class="mdc-text-field__input">
   <label for="my-input" class="mdc-floating-label">Your Name</label>
   <div class="mdc-line-ripple"></div>
@@ -76,7 +76,7 @@ In outlined text field:
 
 ```html
 <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon">
-  <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
+  <i class="material-icons mdc-text-field__leading-icon" tabindex="0" role="button">event</i>
   <input type="text" id="my-input" class="mdc-text-field__input">
   <div class="mdc-notched-outline">
     <div class="mdc-notched-outline__leading"></div>
@@ -95,8 +95,8 @@ In text field:
 ```html
 <div class="mdc-text-field mdc-text-field--with-trailing-icon">
   <input type="text" id="my-input" class="mdc-text-field__input">
+  <i class="material-icons mdc-text-field__trailing-icon" tabindex="0" role="button">event</i>
   <label for="my-input" class="mdc-floating-label">Your Name</label>
-  <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
   <div class="mdc-line-ripple"></div>
 </div>
 ```
@@ -106,7 +106,7 @@ In outlined text field:
 ```html
 <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-trailing-icon">
   <input type="text" id="my-input" class="mdc-text-field__input">
-  <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
+  <i class="material-icons mdc-text-field__trailing-icon" tabindex="0" role="button">event</i>
   <div class="mdc-notched-outline">
     <div class="mdc-notched-outline__leading"></div>
     <div class="mdc-notched-outline__notch">
@@ -123,10 +123,10 @@ In text field:
 
 ```html
 <div class="mdc-text-field mdc-text-field--with-leading-icon mdc-text-field--with-trailing-icon">
-  <i class="material-icons mdc-text-field__icon">phone</i>
+  <i class="material-icons mdc-text-field__leading-icon">phone</i>
   <input type="text" id="my-input" class="mdc-text-field__input">
+  <i class="material-icons mdc-text-field__trailing-icon" tabindex="0" role="button">event</i>
   <label for="my-input" class="mdc-floating-label">Phone Number</label>
-  <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
   <div class="mdc-line-ripple"></div>
 </div>
 ```
@@ -135,9 +135,9 @@ In outlined text field:
 
 ```html
 <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon mdc-text-field--with-trailing-icon">
-  <i class="material-icons mdc-text-field__icon">phone</i>
+  <i class="material-icons mdc-text-field__leading-icon">phone</i>
   <input type="text" id="my-input" class="mdc-text-field__input">
-  <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">clear</i>
+  <i class="material-icons mdc-text-field__trailing-icon" tabindex="0" role="button">clear</i>
   <div class="mdc-notched-outline">
    <div class="mdc-notched-outline__leading"></div>
     <div class="mdc-notched-outline__notch">
@@ -154,13 +154,15 @@ In outlined text field:
 
 CSS Class | Description
 --- | ---
-`mdc-text-field-icon` | Mandatory.
+`mdc-text-field__leading-icon` | Mandatory for leading icons.
+`mdc-text-field__trailing-icon` | Mandatory for trailing icons.
 
 ### Sass Mixins
 
 Mixin | Description
 --- | ---
-`mdc-text-field-icon-color($color, $styleSecondIcon: false)` | Customizes the color for the leading/trailing icons in an enabled text-field. If the `$styleSecondIcon` is `true` it will apply the color to only the trailing icon when used with a leading icon.
+`mdc-text-field-leading-icon-color($color)` | Customizes the color for the leading icon in an enabled text-field.
+`mdc-text-field-trailing-icon-color($color)` | Customizes the color for the trailing icon in an enabled text-field.
 `mdc-text-field-disabled-icon-color($color)` | Customizes the color for the leading/trailing icons in a disabled text-field.
 
 ## `MDCTextFieldIcon` Properties and Methods
diff --git a/packages/mdc-textfield/icon/_mixins.scss b/packages/mdc-textfield/icon/_mixins.scss
index af73d7a9c70..2e7ad6229cf 100644
--- a/packages/mdc-textfield/icon/_mixins.scss
+++ b/packages/mdc-textfield/icon/_mixins.scss
@@ -21,18 +21,28 @@
 //
 
 @import "@material/rtl/mixins";
+@import "@material/theme/variables";
+@import "@material/theme/mixins";
 
 // Public mixins
 
 ///
-/// Customizes the color for the leading/trailing icons in an enabled text-field.
+/// Customizes the color for the leading icon in an enabled text-field.
 /// @param {Color} $color - The desired icon color.
-/// @param {Boolean} $styleSecondIcon [false] - whether to apply the color to only
-///     the trailing icon when used with a leading icon
 ///
-@mixin mdc-text-field-icon-color($color, $styleSecondIcon: false) {
+@mixin mdc-text-field-leading-icon-color($color) {
   &:not(.mdc-text-field--disabled) {
-    @include mdc-text-field-icon-color_($color, $styleSecondIcon);
+    @include mdc-text-field-leading-icon-color_($color);
+  }
+}
+
+///
+/// Customizes the color for the trailing icon in an enabled text-field.
+/// @param {Color} $color - The desired icon color.
+///
+@mixin mdc-text-field-trailing-icon-color($color) {
+  &:not(.mdc-text-field--disabled) {
+    @include mdc-text-field-trailing-icon-color_($color);
   }
 }
 
@@ -42,14 +52,21 @@
 ///
 @mixin mdc-text-field-disabled-icon-color($color) {
   &.mdc-text-field--disabled {
-    @include mdc-text-field-icon-color_($color);
+    @include mdc-text-field-leading-icon-color_($color);
+    @include mdc-text-field-trailing-icon-color_($color);
   }
 }
 
 // Private mixins
 
-@mixin mdc-text-field-icon-horizontal-position_($position-property, $position, $padding, $input-padding) {
-  .mdc-text-field__icon {
+@mixin mdc-text-field-icon-horizontal-position_(
+  $icon-position,
+  $position-property,
+  $position,
+  $padding,
+  $input-padding
+) {
+  .mdc-text-field__#{$icon-position}-icon {
     @include mdc-rtl-reflexive-position($position-property, $position);
   }
 
@@ -71,12 +88,12 @@
   $position-right,
   $padding-right
 ) {
-  .mdc-text-field__icon {
+  .mdc-text-field__leading-icon {
     @include mdc-rtl-reflexive(left, $position-left, right, auto);
+  }
 
-    ~ .mdc-text-field__icon {
-      @include mdc-rtl-reflexive(right, $position-right, left, auto);
-    }
+  .mdc-text-field__trailing-icon {
+    @include mdc-rtl-reflexive(right, $position-right, left, auto);
   }
 
   // Move the input's position, to allow room for the icons.
@@ -85,15 +102,35 @@
   }
 }
 
-@mixin mdc-text-field-icon-color_($color, $styleSecondIcon: false) {
-  .mdc-text-field__icon {
-    @if ($styleSecondIcon) {
-      // Select the second instance of this class regardless of element type.
-      ~ .mdc-text-field__icon {
-        @include mdc-theme-prop(color, $color);
-      }
-    } @else {
-      @include mdc-theme-prop(color, $color);
-    }
+@mixin mdc-text-field-leading-icon_ {
+  @include mdc-text-field-icon_;
+}
+
+@mixin mdc-text-field-trailing-icon_ {
+  @include mdc-text-field-icon_;
+}
+
+@mixin mdc-text-field-icon_ {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  cursor: pointer;
+
+  &:not([tabindex]),
+  &[tabindex="-1"] {
+    cursor: default;
+    pointer-events: none;
+  }
+}
+
+@mixin mdc-text-field-leading-icon-color_($color) {
+  .mdc-text-field__leading-icon {
+    @include mdc-theme-prop(color, $color);
+  }
+}
+
+@mixin mdc-text-field-trailing-icon-color_($color) {
+  .mdc-text-field__trailing-icon {
+    @include mdc-theme-prop(color, $color);
   }
 }
diff --git a/packages/mdc-textfield/icon/constants.ts b/packages/mdc-textfield/icon/constants.ts
index 6e32a217e6e..10795e02a74 100644
--- a/packages/mdc-textfield/icon/constants.ts
+++ b/packages/mdc-textfield/icon/constants.ts
@@ -27,7 +27,8 @@ const strings = {
 };
 
 const cssClasses = {
-  ROOT: 'mdc-text-field__icon',
+  LEADING: 'mdc-text-field__leading-icon',
+  TRAILING: 'mdc-text-field__trailing-icon',
 };
 
 export {strings, cssClasses};
diff --git a/packages/mdc-textfield/icon/mdc-text-field-icon.scss b/packages/mdc-textfield/icon/mdc-text-field-icon.scss
index 63298c5ee29..7aa86fe36e0 100644
--- a/packages/mdc-textfield/icon/mdc-text-field-icon.scss
+++ b/packages/mdc-textfield/icon/mdc-text-field-icon.scss
@@ -20,19 +20,12 @@
 // THE SOFTWARE.
 //
 
-@import "@material/theme/variables";
-@import "@material/theme/mixins";
+@import "./mixins";
 
-.mdc-text-field--with-leading-icon .mdc-text-field__icon,
-.mdc-text-field--with-trailing-icon .mdc-text-field__icon {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  cursor: pointer;
+.mdc-text-field__leading-icon {
+  @include mdc-text-field-leading-icon_;
 }
 
-.mdc-text-field__icon:not([tabindex]),
-.mdc-text-field__icon[tabindex="-1"] {
-  cursor: default;
-  pointer-events: none;
+.mdc-text-field__trailing-icon {
+  @include mdc-text-field-trailing-icon_;
 }
diff --git a/packages/mdc-textfield/mdc-text-field.scss b/packages/mdc-textfield/mdc-text-field.scss
index 314c5ca00a6..bd2c6698f85 100644
--- a/packages/mdc-textfield/mdc-text-field.scss
+++ b/packages/mdc-textfield/mdc-text-field.scss
@@ -63,7 +63,8 @@
   @include mdc-text-field-line-ripple-color_(primary);
   @include mdc-text-field-helper-text-color($mdc-text-field-helper-text-color);
   @include mdc-text-field-character-counter-color($mdc-text-field-helper-text-color);
-  @include mdc-text-field-icon-color($mdc-text-field-icon-color);
+  @include mdc-text-field-leading-icon-color($mdc-text-field-icon-color);
+  @include mdc-text-field-trailing-icon-color($mdc-text-field-icon-color);
   @include mdc-text-field-fill-color($mdc-text-field-background);
 
   // Floating Label
@@ -174,8 +175,8 @@
 }
 
 // stylelint-disable plugin/selector-bem-pattern
-.mdc-text-field--with-leading-icon.mdc-text-field--dense .mdc-text-field__icon,
-.mdc-text-field--with-trailing-icon.mdc-text-field--dense .mdc-text-field__icon {
+.mdc-text-field--dense .mdc-text-field__leading-icon,
+.mdc-text-field--dense .mdc-text-field__trailing-icon {
   bottom: 16px;
   transform: scale(.8);
 }
diff --git a/test/screenshot/spec/mdc-textfield/classes/baseline-leading-icon.html b/test/screenshot/spec/mdc-textfield/classes/baseline-leading-icon.html
index a7e1889573a..ce16f19065c 100644
--- a/test/screenshot/spec/mdc-textfield/classes/baseline-leading-icon.html
+++ b/test/screenshot/spec/mdc-textfield/classes/baseline-leading-icon.html
@@ -37,7 +37,7 @@
 
       <div class="test-cell test-cell--textfield">
         <div class="mdc-text-field mdc-text-field--with-leading-icon">
-          <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
+          <i class="material-icons mdc-text-field__leading-icon" tabindex="0" role="button">event</i>
           <input type="text" id="filled-text-field" class="mdc-text-field__input test-text-field__input">
           <label class="mdc-floating-label" for="filled-text-field">Label</label>
           <div class="mdc-line-ripple"></div>
@@ -46,7 +46,7 @@
 
       <div class="test-cell test-cell--textfield">
         <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon">
-          <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
+          <i class="material-icons mdc-text-field__leading-icon" tabindex="0" role="button">event</i>
           <input type="text" id="outlined-text-field" class="mdc-text-field__input test-text-field__input">
           <div class="mdc-notched-outline">
             <div class="mdc-notched-outline__leading"></div>
@@ -60,7 +60,7 @@
 
       <div class="test-cell test-cell--textfield">
         <div class="mdc-text-field mdc-text-field--with-leading-icon">
-          <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
+          <i class="material-icons mdc-text-field__leading-icon" tabindex="0" role="button">event</i>
           <input type="text" id="filled-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value">
           <label for="filled-text-field-with-value" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
           <div class="mdc-line-ripple"></div>
@@ -69,7 +69,7 @@
 
       <div class="test-cell test-cell--textfield">
         <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon">
-          <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
+          <i class="material-icons mdc-text-field__leading-icon" tabindex="0" role="button">event</i>
           <input type="text" id="outlined-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value">
           <div class="mdc-notched-outline mdc-notched-outline--notched">
             <div class="mdc-notched-outline__leading"></div>
diff --git a/test/screenshot/spec/mdc-textfield/classes/baseline-leading-trailing-icons.html b/test/screenshot/spec/mdc-textfield/classes/baseline-leading-trailing-icons.html
index af14c92d090..99265d6db97 100644
--- a/test/screenshot/spec/mdc-textfield/classes/baseline-leading-trailing-icons.html
+++ b/test/screenshot/spec/mdc-textfield/classes/baseline-leading-trailing-icons.html
@@ -46,19 +46,19 @@
 
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--with-leading-icon mdc-text-field--with-trailing-icon">
-            <i class="material-icons mdc-text-field__icon">3d_rotation</i>
+            <i class="material-icons mdc-text-field__leading-icon">3d_rotation</i>
             <input type="text" id="filled-text-field" class="mdc-text-field__input test-text-field__input">
+            <i class="material-icons mdc-text-field__trailing-icon" tabindex="0" role="button">event</i>
             <label class="mdc-floating-label" for="filled-text-field">Label</label>
-            <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
             <div class="mdc-line-ripple"></div>
           </div>
         </div>
 
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon mdc-text-field--with-trailing-icon">
-            <i class="material-icons mdc-text-field__icon">3d_rotation</i>
+            <i class="material-icons mdc-text-field__leading-icon">3d_rotation</i>
             <input type="text" id="outlined-text-field" class="mdc-text-field__input test-text-field__input">
-            <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__trailing-icon" tabindex="0" role="button">event</i>
             <div class="mdc-notched-outline">
               <div class="mdc-notched-outline__leading"></div>
               <div class="mdc-notched-outline__notch">
@@ -71,19 +71,19 @@
 
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--with-leading-icon mdc-text-field--with-trailing-icon">
-            <i class="material-icons mdc-text-field__icon">3d_rotation</i>
+            <i class="material-icons mdc-text-field__leading-icon">3d_rotation</i>
             <input type="text" id="filled-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value">
+            <i class="material-icons mdc-text-field__trailing-icon" tabindex="0" role="button">event</i>
             <label for="filled-text-field-with-value" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
-            <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
             <div class="mdc-line-ripple"></div>
           </div>
         </div>
 
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon mdc-text-field--with-trailing-icon">
-            <i class="material-icons mdc-text-field__icon">3d_rotation</i>
+            <i class="material-icons mdc-text-field__leading-icon">3d_rotation</i>
             <input type="text" id="outlined-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value">
-            <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__trailing-icon" tabindex="0" role="button">event</i>
             <div class="mdc-notched-outline mdc-notched-outline--notched">
               <div class="mdc-notched-outline__leading"></div>
               <div class="mdc-notched-outline__notch">
diff --git a/test/screenshot/spec/mdc-textfield/classes/baseline-trailing-icon.html b/test/screenshot/spec/mdc-textfield/classes/baseline-trailing-icon.html
index 3a3b0590d9f..e48142b1610 100644
--- a/test/screenshot/spec/mdc-textfield/classes/baseline-trailing-icon.html
+++ b/test/screenshot/spec/mdc-textfield/classes/baseline-trailing-icon.html
@@ -38,8 +38,8 @@
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--with-trailing-icon">
             <input type="text" id="filled-text-field" class="mdc-text-field__input test-text-field__input">
+            <i class="material-icons mdc-text-field__trailing-icon" tabindex="0" role="button">event</i>
             <label class="mdc-floating-label" for="filled-text-field">Label</label>
-            <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
             <div class="mdc-line-ripple"></div>
           </div>
         </div>
@@ -47,7 +47,7 @@
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-trailing-icon">
             <input type="text" id="outlined-text-field" class="mdc-text-field__input test-text-field__input">
-            <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__trailing-icon" tabindex="0" role="button">event</i>
             <div class="mdc-notched-outline">
               <div class="mdc-notched-outline__leading"></div>
               <div class="mdc-notched-outline__notch">
@@ -61,8 +61,8 @@
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--with-trailing-icon">
             <input type="text" id="filled-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value">
+            <i class="material-icons mdc-text-field__trailing-icon" tabindex="0" role="button">event</i>
             <label for="filled-text-field-with-value" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
-            <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
             <div class="mdc-line-ripple"></div>
           </div>
         </div>
@@ -70,7 +70,7 @@
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-trailing-icon">
             <input type="text" id="outlined-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value">
-            <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__trailing-icon" tabindex="0" role="button">event</i>
             <div class="mdc-notched-outline mdc-notched-outline--notched">
               <div class="mdc-notched-outline__leading"></div>
               <div class="mdc-notched-outline__notch">
diff --git a/test/screenshot/spec/mdc-textfield/classes/baseline-without-label-with-icon.html b/test/screenshot/spec/mdc-textfield/classes/baseline-without-label-with-icon.html
index 8994098d465..e010442dd55 100644
--- a/test/screenshot/spec/mdc-textfield/classes/baseline-without-label-with-icon.html
+++ b/test/screenshot/spec/mdc-textfield/classes/baseline-without-label-with-icon.html
@@ -46,7 +46,7 @@
 
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--no-label mdc-text-field--with-leading-icon">
-            <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__leading-icon" tabindex="0" role="button">event</i>
             <!-- htmllint-disable -->
             <input type="text" class="mdc-text-field__input test-text-field__input" placeholder="Placeholder" aria-label="Label">
             <!-- htmllint-enable -->
@@ -56,7 +56,7 @@
 
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--no-label mdc-text-field--with-leading-icon">
-            <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__leading-icon" tabindex="0" role="button">event</i>
             <!-- htmllint-disable -->
             <input type="text" class="mdc-text-field__input test-text-field__input" placeholder="Placeholder" aria-label="Label">
             <!-- htmllint-enable -->
@@ -69,7 +69,7 @@
 
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--no-label mdc-text-field--with-leading-icon">
-            <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__leading-icon" tabindex="0" role="button">event</i>
             <!-- htmllint-disable -->
             <input type="text" class="mdc-text-field__input test-text-field__input" value="Filled value" placeholder="Placeholder" aria-label="Label">
             <!-- htmllint-enable -->
@@ -79,7 +79,7 @@
 
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--no-label mdc-text-field--outlined mdc-text-field--with-leading-icon">
-            <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__leading-icon" tabindex="0" role="button">event</i>
             <!-- htmllint-disable -->
             <input type="text" class="mdc-text-field__input test-text-field__input" value="Filled value" placeholder="Placeholder" aria-label="Label">
             <!-- htmllint-enable -->
diff --git a/test/screenshot/spec/mdc-textfield/classes/disabled-leading-icon.html b/test/screenshot/spec/mdc-textfield/classes/disabled-leading-icon.html
index 21e8e9aa6d6..6639ea5d305 100644
--- a/test/screenshot/spec/mdc-textfield/classes/disabled-leading-icon.html
+++ b/test/screenshot/spec/mdc-textfield/classes/disabled-leading-icon.html
@@ -37,7 +37,7 @@
 
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--with-leading-icon mdc-text-field--disabled">
-            <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__leading-icon" tabindex="0" role="button">event</i>
             <input type="text" id="filled-text-field" class="mdc-text-field__input test-text-field__input" disabled>
             <label class="mdc-floating-label" for="filled-text-field">Label</label>
             <div class="mdc-line-ripple"></div>
@@ -46,7 +46,7 @@
 
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon mdc-text-field--disabled">
-            <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__leading-icon" tabindex="0" role="button">event</i>
             <input type="text" id="outlined-text-field" class="mdc-text-field__input test-text-field__input" disabled>
             <div class="mdc-notched-outline">
               <div class="mdc-notched-outline__leading"></div>
@@ -60,7 +60,7 @@
 
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--with-leading-icon mdc-text-field--disabled">
-            <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__leading-icon" tabindex="0" role="button">event</i>
             <input type="text" id="filled-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" disabled>
             <label for="filled-text-field-with-value" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
             <div class="mdc-line-ripple"></div>
@@ -69,7 +69,7 @@
 
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon mdc-text-field--disabled">
-            <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__leading-icon" tabindex="0" role="button">event</i>
             <input type="text" id="outlined-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" disabled>
             <div class="mdc-notched-outline mdc-notched-outline--notched">
               <div class="mdc-notched-outline__leading"></div>
diff --git a/test/screenshot/spec/mdc-textfield/classes/disabled-leading-trailing-icons.html b/test/screenshot/spec/mdc-textfield/classes/disabled-leading-trailing-icons.html
index b524c18c3fc..2c6a8059133 100644
--- a/test/screenshot/spec/mdc-textfield/classes/disabled-leading-trailing-icons.html
+++ b/test/screenshot/spec/mdc-textfield/classes/disabled-leading-trailing-icons.html
@@ -46,19 +46,19 @@
 
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--with-leading-icon mdc-text-field--with-trailing-icon mdc-text-field--disabled">
-            <i class="material-icons mdc-text-field__icon">3d_rotation</i>
+            <i class="material-icons mdc-text-field__leading-icon">3d_rotation</i>
             <input type="text" id="filled-text-field" class="mdc-text-field__input test-text-field__input" disabled>
+            <i class="material-icons mdc-text-field__trailing-icon" tabindex="0" role="button">event</i>
             <label class="mdc-floating-label" for="filled-text-field">Label</label>
-            <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
             <div class="mdc-line-ripple"></div>
           </div>
         </div>
 
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon mdc-text-field--with-trailing-icon mdc-text-field--disabled">
-            <i class="material-icons mdc-text-field__icon">3d_rotation</i>
+            <i class="material-icons mdc-text-field__leading-icon">3d_rotation</i>
             <input type="text" id="outlined-text-field" class="mdc-text-field__input test-text-field__input" disabled>
-            <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__trailing-icon" tabindex="0" role="button">event</i>
             <div class="mdc-notched-outline">
               <div class="mdc-notched-outline__leading"></div>
               <div class="mdc-notched-outline__notch">
@@ -71,19 +71,19 @@
 
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--with-leading-icon mdc-text-field--with-trailing-icon mdc-text-field--disabled">
-            <i class="material-icons mdc-text-field__icon">3d_rotation</i>
+            <i class="material-icons mdc-text-field__leading-icon">3d_rotation</i>
             <input type="text" id="filled-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" disabled>
+            <i class="material-icons mdc-text-field__trailing-icon" tabindex="0" role="button">event</i>
             <label for="filled-text-field-with-value" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
-            <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
             <div class="mdc-line-ripple"></div>
           </div>
         </div>
 
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon mdc-text-field--with-trailing-icon mdc-text-field--disabled">
-            <i class="material-icons mdc-text-field__icon">3d_rotation</i>
+            <i class="material-icons mdc-text-field__leading-icon">3d_rotation</i>
             <input type="text" id="outlined-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" disabled>
-            <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__trailing-icon" tabindex="0" role="button">event</i>
             <div class="mdc-notched-outline mdc-notched-outline--notched">
               <div class="mdc-notched-outline__leading"></div>
               <div class="mdc-notched-outline__notch">
diff --git a/test/screenshot/spec/mdc-textfield/classes/disabled-trailing-icon.html b/test/screenshot/spec/mdc-textfield/classes/disabled-trailing-icon.html
index 8faad17151c..3b4df9127bf 100644
--- a/test/screenshot/spec/mdc-textfield/classes/disabled-trailing-icon.html
+++ b/test/screenshot/spec/mdc-textfield/classes/disabled-trailing-icon.html
@@ -38,8 +38,8 @@
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--with-trailing-icon mdc-text-field--disabled">
             <input type="text" id="filled-text-field" class="mdc-text-field__input test-text-field__input" disabled>
+            <i class="material-icons mdc-text-field__trailing-icon" tabindex="0" role="button">event</i>
             <label class="mdc-floating-label" for="filled-text-field">Label</label>
-            <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
             <div class="mdc-line-ripple"></div>
           </div>
         </div>
@@ -47,7 +47,7 @@
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-trailing-icon mdc-text-field--disabled">
             <input type="text" id="outlined-text-field" class="mdc-text-field__input test-text-field__input" disabled>
-            <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__trailing-icon" tabindex="0" role="button">event</i>
             <div class="mdc-notched-outline">
               <div class="mdc-notched-outline__leading"></div>
               <div class="mdc-notched-outline__notch">
@@ -61,8 +61,8 @@
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--with-trailing-icon mdc-text-field--disabled">
             <input type="text" id="filled-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" disabled>
+            <i class="material-icons mdc-text-field__trailing-icon" tabindex="0" role="button">event</i>
             <label for="filled-text-field-with-value" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
-            <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
             <div class="mdc-line-ripple"></div>
           </div>
         </div>
@@ -70,7 +70,7 @@
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-trailing-icon mdc-text-field--disabled">
             <input type="text" id="outlined-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" disabled>
-            <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__trailing-icon" tabindex="0" role="button">event</i>
             <div class="mdc-notched-outline mdc-notched-outline--notched">
               <div class="mdc-notched-outline__leading"></div>
               <div class="mdc-notched-outline__notch">
diff --git a/test/screenshot/spec/mdc-textfield/classes/focused-leading-icon.html b/test/screenshot/spec/mdc-textfield/classes/focused-leading-icon.html
index 611ea8261c9..095cf440e36 100644
--- a/test/screenshot/spec/mdc-textfield/classes/focused-leading-icon.html
+++ b/test/screenshot/spec/mdc-textfield/classes/focused-leading-icon.html
@@ -38,7 +38,7 @@
 
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--focused mdc-text-field--with-leading-icon">
-            <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__leading-icon" tabindex="0" role="button">event</i>
             <input type="text" id="filled-text-field" class="mdc-text-field__input test-text-field__input">
             <label class="mdc-floating-label" for="filled-text-field">Label</label>
             <div class="mdc-line-ripple mdc-line-ripple--active"></div>
@@ -47,7 +47,7 @@
 
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--focused mdc-text-field--with-leading-icon">
-            <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__leading-icon" tabindex="0" role="button">event</i>
             <!-- The single space value is to overcome an issue where the component does not draw the SVG path when created unless there is a value. -->
             <input type="text" id="outlined-text-field" class="mdc-text-field__input test-text-field__input" value=" ">
             <div class="mdc-notched-outline mdc-notched-outline--notched">
@@ -62,7 +62,7 @@
 
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--focused mdc-text-field--with-leading-icon">
-            <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__leading-icon" tabindex="0" role="button">event</i>
             <input type="text" id="filled-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value">
             <label for="filled-text-field-with-value" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
             <div class="mdc-line-ripple mdc-line-ripple--active"></div>
@@ -71,7 +71,7 @@
 
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--focused mdc-text-field--with-leading-icon">
-            <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__leading-icon" tabindex="0" role="button">event</i>
             <input type="text" id="outlined-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value">
             <div class="mdc-notched-outline mdc-notched-outline--notched">
               <div class="mdc-notched-outline__leading"></div>
diff --git a/test/screenshot/spec/mdc-textfield/classes/focused-leading-trailing-icons.html b/test/screenshot/spec/mdc-textfield/classes/focused-leading-trailing-icons.html
index 45f2b466d86..b3a1562b78d 100644
--- a/test/screenshot/spec/mdc-textfield/classes/focused-leading-trailing-icons.html
+++ b/test/screenshot/spec/mdc-textfield/classes/focused-leading-trailing-icons.html
@@ -47,10 +47,10 @@
 
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--focused mdc-text-field--with-trailing-icon mdc-text-field--with-leading-icon">
-            <i class="material-icons mdc-text-field__icon" role="button">3d_rotation</i>
+            <i class="material-icons mdc-text-field__leading-icon" role="button">3d_rotation</i>
             <input type="text" id="filled-text-field" class="mdc-text-field__input test-text-field__input">
+            <i class="material-icons mdc-text-field__trailing-icon" tabindex="0" role="button">event</i>
             <label class="mdc-floating-label" for="filled-text-field">Label</label>
-            <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
             <div class="mdc-line-ripple mdc-line-ripple--active"></div>
           </div>
         </div>
@@ -58,9 +58,9 @@
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--focused mdc-text-field--with-trailing-icon mdc-text-field--with-leading-icon">
             <!-- The single space value is to overcome an issue where the component does not draw the SVG path when created unless there is a value. -->
-            <i class="material-icons mdc-text-field__icon" role="button">3d_rotation</i>
+            <i class="material-icons mdc-text-field__leading-icon" role="button">3d_rotation</i>
             <input type="text" id="outlined-text-field" class="mdc-text-field__input test-text-field__input" value=" ">
-            <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__trailing-icon" tabindex="0" role="button">event</i>
             <div class="mdc-notched-outline mdc-notched-outline--notched">
               <div class="mdc-notched-outline__leading"></div>
               <div class="mdc-notched-outline__notch">
@@ -73,19 +73,19 @@
 
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--focused mdc-text-field--with-trailing-icon mdc-text-field--with-leading-icon">
-            <i class="material-icons mdc-text-field__icon" role="button">3d_rotation</i>
+            <i class="material-icons mdc-text-field__leading-icon" role="button">3d_rotation</i>
             <input type="text" id="filled-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value">
+            <i class="material-icons mdc-text-field__trailing-icon" tabindex="0" role="button">event</i>
             <label for="filled-text-field-with-value" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
-            <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
             <div class="mdc-line-ripple mdc-line-ripple--active"></div>
           </div>
         </div>
 
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--focused mdc-text-field--with-trailing-icon mdc-text-field--with-leading-icon">
-            <i class="material-icons mdc-text-field__icon" role="button">3d_rotation</i>
+            <i class="material-icons mdc-text-field__leading-icon" role="button">3d_rotation</i>
             <input type="text" id="outlined-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value">
-            <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__trailing-icon" tabindex="0" role="button">event</i>
             <div class="mdc-notched-outline mdc-notched-outline--notched">
               <div class="mdc-notched-outline__leading"></div>
               <div class="mdc-notched-outline__notch">
diff --git a/test/screenshot/spec/mdc-textfield/classes/focused-trailing-icon.html b/test/screenshot/spec/mdc-textfield/classes/focused-trailing-icon.html
index 9a5659df09f..6dd7571b9d8 100644
--- a/test/screenshot/spec/mdc-textfield/classes/focused-trailing-icon.html
+++ b/test/screenshot/spec/mdc-textfield/classes/focused-trailing-icon.html
@@ -39,8 +39,8 @@
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--focused mdc-text-field--with-trailing-icon">
             <input type="text" id="filled-text-field" class="mdc-text-field__input test-text-field__input">
+            <i class="material-icons mdc-text-field__trailing-icon" tabindex="0" role="button">event</i>
             <label class="mdc-floating-label" for="filled-text-field">Label</label>
-            <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
             <div class="mdc-line-ripple mdc-line-ripple--active"></div>
           </div>
         </div>
@@ -49,7 +49,7 @@
           <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--focused mdc-text-field--with-trailing-icon">
             <!-- The single space value is to overcome an issue where the component does not draw the SVG path when created unless there is a value. -->
             <input type="text" id="outlined-text-field" class="mdc-text-field__input test-text-field__input" value=" ">
-            <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__trailing-icon" tabindex="0" role="button">event</i>
             <div class="mdc-notched-outline mdc-notched-outline--notched">
               <div class="mdc-notched-outline__leading"></div>
               <div class="mdc-notched-outline__notch">
@@ -63,8 +63,8 @@
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--focused mdc-text-field--with-trailing-icon">
             <input type="text" id="filled-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value">
+            <i class="material-icons mdc-text-field__trailing-icon" tabindex="0" role="button">event</i>
             <label for="filled-text-field-with-value" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
-            <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
             <div class="mdc-line-ripple mdc-line-ripple--active"></div>
           </div>
         </div>
@@ -72,7 +72,7 @@
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--focused mdc-text-field--with-trailing-icon">
             <input type="text" id="outlined-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value">
-            <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__trailing-icon" tabindex="0" role="button">event</i>
             <div class="mdc-notched-outline mdc-notched-outline--notched">
               <div class="mdc-notched-outline__leading"></div>
               <div class="mdc-notched-outline__notch">
diff --git a/test/screenshot/spec/mdc-textfield/classes/invalid-focused-leading-icon.html b/test/screenshot/spec/mdc-textfield/classes/invalid-focused-leading-icon.html
index f331ff41e46..dcc25d99c85 100644
--- a/test/screenshot/spec/mdc-textfield/classes/invalid-focused-leading-icon.html
+++ b/test/screenshot/spec/mdc-textfield/classes/invalid-focused-leading-icon.html
@@ -38,7 +38,7 @@
 
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--invalid mdc-text-field--focused mdc-text-field--with-leading-icon">
-            <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__leading-icon" tabindex="0" role="button">event</i>
             <input type="text" id="filled-text-field" class="mdc-text-field__input test-text-field__input" value=" " required pattern=".{4,8}">
             <label class="mdc-floating-label mdc-floating-label--float-above" for="filled-text-field">Label</label>
             <div class="mdc-line-ripple mdc-line-ripple--active"></div>
@@ -47,7 +47,7 @@
 
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--invalid mdc-text-field--focused mdc-text-field--with-leading-icon">
-            <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__leading-icon" tabindex="0" role="button">event</i>
             <!-- The single space value is to overcome an issue where the component does not draw the SVG path when created unless there is a value. -->
             <input type="text" id="outlined-text-field" class="mdc-text-field__input test-text-field__input" value=" " required pattern=".{4,8}">
             <div class="mdc-notched-outline mdc-notched-outline--notched">
@@ -62,7 +62,7 @@
 
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--invalid mdc-text-field--focused mdc-text-field--with-leading-icon">
-            <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__leading-icon" tabindex="0" role="button">event</i>
             <input type="text" id="filled-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" required pattern=".{4,8}">
             <label for="filled-text-field-with-value" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
             <div class="mdc-line-ripple mdc-line-ripple--active"></div>
@@ -71,7 +71,7 @@
 
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--invalid mdc-text-field--focused mdc-text-field--with-leading-icon">
-            <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__leading-icon" tabindex="0" role="button">event</i>
             <input type="text" id="outlined-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" required pattern=".{4,8}">
             <div class="mdc-notched-outline mdc-notched-outline--notched">
               <div class="mdc-notched-outline__leading"></div>
diff --git a/test/screenshot/spec/mdc-textfield/classes/invalid-focused-leading-trailing-icons.html b/test/screenshot/spec/mdc-textfield/classes/invalid-focused-leading-trailing-icons.html
index d2fef3ff3a9..dd6faf184ae 100644
--- a/test/screenshot/spec/mdc-textfield/classes/invalid-focused-leading-trailing-icons.html
+++ b/test/screenshot/spec/mdc-textfield/classes/invalid-focused-leading-trailing-icons.html
@@ -47,10 +47,10 @@
 
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--invalid mdc-text-field--focused mdc-text-field--with-trailing-icon mdc-text-field--with-leading-icon">
-            <i class="material-icons mdc-text-field__icon" role="button">3d_rotation</i>
+            <i class="material-icons mdc-text-field__leading-icon" role="button">3d_rotation</i>
             <input type="text" id="filled-text-field" class="mdc-text-field__input test-text-field__input" value=" " required pattern=".{4,8}">
+            <i class="material-icons mdc-text-field__trailing-icon" tabindex="0" role="button">event</i>
             <label class="mdc-floating-label mdc-floating-label--float-above" for="filled-text-field">Label</label>
-            <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
             <div class="mdc-line-ripple mdc-line-ripple--active"></div>
           </div>
         </div>
@@ -58,9 +58,9 @@
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--invalid mdc-text-field--focused mdc-text-field--with-trailing-icon mdc-text-field--with-leading-icon">
             <!-- The single space value is to overcome an issue where the component does not draw the SVG path when created unless there is a value. -->
-            <i class="material-icons mdc-text-field__icon" role="button">3d_rotation</i>
+            <i class="material-icons mdc-text-field__leading-icon" role="button">3d_rotation</i>
             <input type="text" id="outlined-text-field" class="mdc-text-field__input test-text-field__input" value=" " required pattern=".{4,8}">
-            <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__trailing-icon" tabindex="0" role="button">event</i>
             <div class="mdc-notched-outline mdc-notched-outline--notched">
               <div class="mdc-notched-outline__leading"></div>
               <div class="mdc-notched-outline__notch">
@@ -73,19 +73,19 @@
 
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--invalid mdc-text-field--focused mdc-text-field--with-trailing-icon mdc-text-field--with-leading-icon">
-            <i class="material-icons mdc-text-field__icon" role="button">3d_rotation</i>
+            <i class="material-icons mdc-text-field__leading-icon" role="button">3d_rotation</i>
             <input type="text" id="filled-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" required pattern=".{4,8}">
+            <i class="material-icons mdc-text-field__trailing-icon" tabindex="0" role="button">event</i>
             <label for="filled-text-field-with-value" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
-            <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
             <div class="mdc-line-ripple mdc-line-ripple--active"></div>
           </div>
         </div>
 
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--invalid mdc-text-field--focused mdc-text-field--with-trailing-icon mdc-text-field--with-leading-icon">
-            <i class="material-icons mdc-text-field__icon" role="button">3d_rotation</i>
+            <i class="material-icons mdc-text-field__leading-icon" role="button">3d_rotation</i>
             <input type="text" id="outlined-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" required pattern=".{4,8}">
-            <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__trailing-icon" tabindex="0" role="button">event</i>
             <div class="mdc-notched-outline mdc-notched-outline--notched">
               <div class="mdc-notched-outline__leading"></div>
               <div class="mdc-notched-outline__notch">
diff --git a/test/screenshot/spec/mdc-textfield/classes/invalid-focused-trailing-icon.html b/test/screenshot/spec/mdc-textfield/classes/invalid-focused-trailing-icon.html
index 3d661d3785d..f8ca60adcf2 100644
--- a/test/screenshot/spec/mdc-textfield/classes/invalid-focused-trailing-icon.html
+++ b/test/screenshot/spec/mdc-textfield/classes/invalid-focused-trailing-icon.html
@@ -39,8 +39,8 @@
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--invalid mdc-text-field--focused mdc-text-field--with-trailing-icon">
             <input type="text" id="filled-text-field" class="mdc-text-field__input test-text-field__input" value=" " required pattern=".{4,8}">
+            <i class="material-icons mdc-text-field__trailing-icon" tabindex="0" role="button">event</i>
             <label class="mdc-floating-label mdc-floating-label--float-above" for="filled-text-field">Label</label>
-            <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
             <div class="mdc-line-ripple mdc-line-ripple--active"></div>
           </div>
         </div>
@@ -49,7 +49,7 @@
           <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--invalid mdc-text-field--focused mdc-text-field--with-trailing-icon">
             <!-- The single space value is to overcome an issue where the component does not draw the SVG path when created unless there is a value. -->
             <input type="text" id="outlined-text-field" class="mdc-text-field__input test-text-field__input" value=" " required pattern=".{4,8}">
-            <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__trailing-icon" tabindex="0" role="button">event</i>
             <div class="mdc-notched-outline">
               <div class="mdc-notched-outline__leading"></div>
               <div class="mdc-notched-outline__notch">
@@ -63,8 +63,8 @@
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--invalid mdc-text-field--focused mdc-text-field--with-trailing-icon">
             <input type="text" id="filled-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" required pattern=".{4,8}">
+            <i class="material-icons mdc-text-field__trailing-icon" tabindex="0" role="button">event</i>
             <label for="filled-text-field-with-value" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
-            <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
             <div class="mdc-line-ripple mdc-line-ripple--active"></div>
           </div>
         </div>
@@ -72,7 +72,7 @@
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--invalid mdc-text-field--focused mdc-text-field--with-trailing-icon">
             <input type="text" id="outlined-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" required pattern=".{4,8}">
-            <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__trailing-icon" tabindex="0" role="button">event</i>
             <div class="mdc-notched-outline mdc-notched-outline--notched">
               <div class="mdc-notched-outline__leading"></div>
               <div class="mdc-notched-outline__notch">
diff --git a/test/screenshot/spec/mdc-textfield/classes/invalid-leading-icon.html b/test/screenshot/spec/mdc-textfield/classes/invalid-leading-icon.html
index 34555db9100..f28ec4f6d2e 100644
--- a/test/screenshot/spec/mdc-textfield/classes/invalid-leading-icon.html
+++ b/test/screenshot/spec/mdc-textfield/classes/invalid-leading-icon.html
@@ -38,7 +38,7 @@
 
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--invalid mdc-text-field--with-leading-icon">
-            <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__leading-icon" tabindex="0" role="button">event</i>
             <input type="text" id="filled-text-field" class="mdc-text-field__input test-text-field__input" required pattern=".{4,8}">
             <label class="mdc-floating-label" for="filled-text-field">Label</label>
             <div class="mdc-line-ripple"></div>
@@ -47,7 +47,7 @@
 
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--invalid mdc-text-field--with-leading-icon">
-            <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__leading-icon" tabindex="0" role="button">event</i>
             <input type="text" id="outlined-text-field" class="mdc-text-field__input test-text-field__input" required pattern=".{4,8}">
             <div class="mdc-notched-outline">
               <div class="mdc-notched-outline__leading"></div>
@@ -61,7 +61,7 @@
 
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--invalid mdc-text-field--with-leading-icon">
-            <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__leading-icon" tabindex="0" role="button">event</i>
             <input type="text" id="filled-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" required pattern=".{4,8}">
             <label for="filled-text-field-with-value" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
             <div class="mdc-line-ripple"></div>
@@ -70,7 +70,7 @@
 
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--invalid mdc-text-field--with-leading-icon">
-            <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__leading-icon" tabindex="0" role="button">event</i>
             <input type="text" id="outlined-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" required pattern=".{4,8}">
             <div class="mdc-notched-outline mdc-notched-outline--notched">
               <div class="mdc-notched-outline__leading"></div>
diff --git a/test/screenshot/spec/mdc-textfield/classes/invalid-leading-trailing-icons.html b/test/screenshot/spec/mdc-textfield/classes/invalid-leading-trailing-icons.html
index 052a5906a55..37ff9be7bc7 100644
--- a/test/screenshot/spec/mdc-textfield/classes/invalid-leading-trailing-icons.html
+++ b/test/screenshot/spec/mdc-textfield/classes/invalid-leading-trailing-icons.html
@@ -47,19 +47,19 @@
 
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--invalid mdc-text-field--with-trailing-icon mdc-text-field--with-leading-icon">
-            <i class="material-icons mdc-text-field__icon" role="button">3d_rotation</i>
+            <i class="material-icons mdc-text-field__leading-icon" role="button">3d_rotation</i>
             <input type="text" id="filled-text-field" class="mdc-text-field__input test-text-field__input" required pattern=".{4,8}">
+            <i class="material-icons mdc-text-field__trailing-icon" tabindex="0" role="button">event</i>
             <label class="mdc-floating-label" for="filled-text-field">Label</label>
-            <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
             <div class="mdc-line-ripple"></div>
           </div>
         </div>
 
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--invalid mdc-text-field--with-trailing-icon mdc-text-field--with-leading-icon">
-            <i class="material-icons mdc-text-field__icon" role="button">3d_rotation</i>
+            <i class="material-icons mdc-text-field__leading-icon" role="button">3d_rotation</i>
             <input type="text" id="outlined-text-field" class="mdc-text-field__input test-text-field__input" required pattern=".{4,8}">
-            <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__trailing-icon" tabindex="0" role="button">event</i>
             <div class="mdc-notched-outline">
               <div class="mdc-notched-outline__leading"></div>
               <div class="mdc-notched-outline__notch">
@@ -72,19 +72,19 @@
 
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--invalid mdc-text-field--with-trailing-icon mdc-text-field--with-leading-icon">
-            <i class="material-icons mdc-text-field__icon" role="button">3d_rotation</i>
+            <i class="material-icons mdc-text-field__leading-icon" role="button">3d_rotation</i>
             <input type="text" id="filled-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" required pattern=".{4,8}">
+            <i class="material-icons mdc-text-field__trailing-icon" tabindex="0" role="button">event</i>
             <label for="filled-text-field-with-value" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
-            <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
             <div class="mdc-line-ripple"></div>
           </div>
         </div>
 
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--invalid mdc-text-field--with-trailing-icon mdc-text-field--with-leading-icon">
-            <i class="material-icons mdc-text-field__icon" role="button">3d_rotation</i>
+            <i class="material-icons mdc-text-field__leading-icon" role="button">3d_rotation</i>
             <input type="text" id="outlined-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" required pattern=".{4,8}">
-            <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__trailing-icon" tabindex="0" role="button">event</i>
             <div class="mdc-notched-outline mdc-notched-outline--notched">
               <div class="mdc-notched-outline__leading"></div>
               <div class="mdc-notched-outline__notch">
diff --git a/test/screenshot/spec/mdc-textfield/classes/invalid-trailing-icon.html b/test/screenshot/spec/mdc-textfield/classes/invalid-trailing-icon.html
index 54790c614d9..c7ee88fa9ec 100644
--- a/test/screenshot/spec/mdc-textfield/classes/invalid-trailing-icon.html
+++ b/test/screenshot/spec/mdc-textfield/classes/invalid-trailing-icon.html
@@ -39,8 +39,8 @@
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--invalid mdc-text-field--with-trailing-icon">
             <input type="text" id="filled-text-field" class="mdc-text-field__input test-text-field__input" required pattern=".{4,8}">
+            <i class="material-icons mdc-text-field__trailing-icon" tabindex="0" role="button">event</i>
             <label class="mdc-floating-label" for="filled-text-field">Label</label>
-            <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
             <div class="mdc-line-ripple"></div>
           </div>
         </div>
@@ -48,7 +48,7 @@
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--invalid mdc-text-field--with-trailing-icon">
             <input type="text" id="outlined-text-field" class="mdc-text-field__input test-text-field__input" required pattern=".{4,8}">
-            <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__trailing-icon" tabindex="0" role="button">event</i>
             <div class="mdc-notched-outline">
               <div class="mdc-notched-outline__leading"></div>
               <div class="mdc-notched-outline__notch">
@@ -62,8 +62,8 @@
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--invalid mdc-text-field--with-trailing-icon">
             <input type="text" id="filled-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" required pattern=".{4,8}">
+            <i class="material-icons mdc-text-field__trailing-icon" tabindex="0" role="button">event</i>
             <label for="filled-text-field-with-value" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
-            <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
             <div class="mdc-line-ripple"></div>
           </div>
         </div>
@@ -71,7 +71,7 @@
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--invalid mdc-text-field--with-trailing-icon">
             <input type="text" id="outlined-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" required pattern=".{4,8}">
-            <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__trailing-icon" tabindex="0" role="button">event</i>
             <div class="mdc-notched-outline mdc-notched-outline--notched">
               <div class="mdc-notched-outline__leading"></div>
               <div class="mdc-notched-outline__notch">
diff --git a/test/screenshot/spec/mdc-textfield/mixins/density-leading-icon-invalid.html b/test/screenshot/spec/mdc-textfield/mixins/density-leading-icon-invalid.html
index 292d356ae37..6d30b9c35df 100644
--- a/test/screenshot/spec/mdc-textfield/mixins/density-leading-icon-invalid.html
+++ b/test/screenshot/spec/mdc-textfield/mixins/density-leading-icon-invalid.html
@@ -37,7 +37,7 @@
 
       <div class="test-cell test-cell--light test-cell--textfield">
         <div class="mdc-text-field mdc-text-field--with-leading-icon mdc-text-field--invalid custom-density-text-field-leading-icon--default" data-native-input-validation="false">
-          <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
+          <i class="material-icons mdc-text-field__leading-icon" tabindex="0" role="button">event</i>
           <input type="text" id="filled-text-field" class="mdc-text-field__input test-text-field__input">
           <label class="mdc-floating-label" for="filled-text-field">Label</label>
           <div class="mdc-line-ripple"></div>
@@ -47,7 +47,7 @@
       <div class="test-cell test-cell--light test-cell--textfield">
         <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon mdc-text-field--invalid custom-density-text-field-leading-icon--outlined"
             data-native-input-validation="false">
-          <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
+          <i class="material-icons mdc-text-field__leading-icon" tabindex="0" role="button">event</i>
           <input type="text" id="outlined-text-field" class="mdc-text-field__input test-text-field__input">
           <div class="mdc-notched-outline">
             <div class="mdc-notched-outline__leading"></div>
@@ -61,7 +61,7 @@
 
       <div class="test-cell test-cell--light test-cell--textfield">
         <div class="mdc-text-field mdc-text-field--with-leading-icon mdc-text-field--invalid custom-density-text-field-leading-icon--default" data-native-input-validation="false">
-          <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
+          <i class="material-icons mdc-text-field__leading-icon" tabindex="0" role="button">event</i>
           <input type="text" id="filled-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value">
           <label for="filled-text-field-with-value" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
           <div class="mdc-line-ripple"></div>
@@ -71,7 +71,7 @@
       <div class="test-cell test-cell--light test-cell--textfield">
         <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon mdc-text-field--invalid custom-density-text-field-leading-icon--outlined"
             data-native-input-validation="false">
-          <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
+          <i class="material-icons mdc-text-field__leading-icon" tabindex="0" role="button">event</i>
           <input type="text" id="outlined-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value">
           <div class="mdc-notched-outline mdc-notched-outline--notched">
             <div class="mdc-notched-outline__leading"></div>
diff --git a/test/screenshot/spec/mdc-textfield/mixins/density-leading-icon.html b/test/screenshot/spec/mdc-textfield/mixins/density-leading-icon.html
index 98ee5febee7..5c7e8b99971 100644
--- a/test/screenshot/spec/mdc-textfield/mixins/density-leading-icon.html
+++ b/test/screenshot/spec/mdc-textfield/mixins/density-leading-icon.html
@@ -37,7 +37,7 @@
 
       <div class="test-cell test-cell--light test-cell--textfield">
         <div class="mdc-text-field mdc-text-field--with-leading-icon custom-density-text-field-leading-icon--default">
-          <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
+          <i class="material-icons mdc-text-field__leading-icon" tabindex="0" role="button">event</i>
           <input type="text" id="filled-text-field" class="mdc-text-field__input test-text-field__input">
           <label class="mdc-floating-label" for="filled-text-field">Label</label>
           <div class="mdc-line-ripple"></div>
@@ -46,7 +46,7 @@
 
       <div class="test-cell test-cell--light test-cell--textfield">
         <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon custom-density-text-field-leading-icon--outlined">
-          <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
+          <i class="material-icons mdc-text-field__leading-icon" tabindex="0" role="button">event</i>
           <input type="text" id="outlined-text-field" class="mdc-text-field__input test-text-field__input">
           <div class="mdc-notched-outline">
             <div class="mdc-notched-outline__leading"></div>
@@ -60,7 +60,7 @@
 
       <div class="test-cell test-cell--light test-cell--textfield">
         <div class="mdc-text-field mdc-text-field--with-leading-icon custom-density-text-field-leading-icon--default">
-          <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
+          <i class="material-icons mdc-text-field__leading-icon" tabindex="0" role="button">event</i>
           <input type="text" id="filled-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value">
           <label for="filled-text-field-with-value" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
           <div class="mdc-line-ripple"></div>
@@ -69,7 +69,7 @@
 
       <div class="test-cell test-cell--light test-cell--textfield">
         <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon custom-density-text-field-leading-icon--outlined">
-          <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
+          <i class="material-icons mdc-text-field__leading-icon" tabindex="0" role="button">event</i>
           <input type="text" id="outlined-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value">
           <div class="mdc-notched-outline mdc-notched-outline--notched">
             <div class="mdc-notched-outline__leading"></div>
diff --git a/test/screenshot/spec/mdc-textfield/mixins/disabled-1.html b/test/screenshot/spec/mdc-textfield/mixins/disabled-1.html
index dca9702f343..40f9ace4ca0 100644
--- a/test/screenshot/spec/mdc-textfield/mixins/disabled-1.html
+++ b/test/screenshot/spec/mdc-textfield/mixins/disabled-1.html
@@ -270,7 +270,7 @@
 
         <div class="test-cell test-cell--light test-cell--textfield-small">
           <div class="mdc-text-field mdc-text-field--with-leading-icon mdc-text-field--disabled custom-disabled-colors-text-field--icon-color">
-            <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__leading-icon" tabindex="0" role="button">event</i>
             <input type="text" id="filled-text-field--icon-color" class="mdc-text-field__input test-text-field__input" disabled>
             <label class="mdc-floating-label" for="filled-text-field--icon-color">Label</label>
             <div class="mdc-line-ripple"></div>
@@ -279,7 +279,7 @@
 
         <div class="test-cell test-cell--light test-cell--textfield-small">
           <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon mdc-text-field--disabled custom-disabled-colors-text-field--icon-color">
-            <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__leading-icon" tabindex="0" role="button">event</i>
             <input type="text" id="outlined-text-field--icon-color" class="mdc-text-field__input test-text-field__input" disabled>
             <div class="mdc-notched-outline">
               <div class="mdc-notched-outline__leading"></div>
@@ -293,7 +293,7 @@
 
         <div class="test-cell test-cell--light test-cell--textfield-small">
           <div class="mdc-text-field mdc-text-field--with-leading-icon mdc-text-field--disabled custom-disabled-colors-text-field--icon-color">
-            <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__leading-icon" tabindex="0" role="button">event</i>
             <input type="text" id="filled-text-field-with-value--icon-color" class="mdc-text-field__input test-text-field__input" value="Filled value" disabled>
             <label for="filled-text-field-with-value--icon-color" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
             <div class="mdc-line-ripple"></div>
@@ -302,7 +302,7 @@
 
         <div class="test-cell test-cell--light test-cell--textfield-small">
           <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon mdc-text-field--disabled custom-disabled-colors-text-field--icon-color">
-            <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__leading-icon" tabindex="0" role="button">event</i>
             <input type="text" id="outlined-text-field-with-value--icon-color" class="mdc-text-field__input test-text-field__input" value="Filled value" disabled>
             <div class="mdc-notched-outline mdc-notched-outline--notched">
               <div class="mdc-notched-outline__leading"></div>
diff --git a/test/unit/mdc-textfield/mdc-text-field-icon.test.js b/test/unit/mdc-textfield/mdc-text-field-icon.test.js
index 1e85c11697a..45781a653df 100644
--- a/test/unit/mdc-textfield/mdc-text-field-icon.test.js
+++ b/test/unit/mdc-textfield/mdc-text-field-icon.test.js
@@ -29,7 +29,7 @@ import domEvents from 'dom-events';
 import {MDCTextFieldIcon, MDCTextFieldIconFoundation} from '../../../packages/mdc-textfield/icon/index';
 
 const getFixture = () => bel`
-  <div class="mdc-text-field__icon"></div>
+  <div class="mdc-text-field__leading-icon"></div>
 `;
 
 suite('MDCTextFieldIcon');

From 705dd660f9db7011450e3a5d6570544bea62ebd4 Mon Sep 17 00:00:00 2001
From: Liz Mitchell <lizmitchell@google.com>
Date: Mon, 23 Dec 2019 10:17:57 -0800
Subject: [PATCH 2/9] chore(textfield): use --leading/trailing modifiers for
 icons

---
 packages/mdc-textfield/_mixins.scss           | 70 ++++++++++---------
 packages/mdc-textfield/constants.ts           |  4 +-
 packages/mdc-textfield/icon/README.md         | 25 +++----
 packages/mdc-textfield/icon/_mixins.scss      | 49 +++----------
 packages/mdc-textfield/icon/constants.ts      |  3 +-
 .../icon/mdc-text-field-icon.scss             |  8 +--
 packages/mdc-textfield/mdc-text-field.scss    |  3 +-
 .../classes/baseline-leading-icon.html        |  8 +--
 .../baseline-leading-trailing-icons.html      | 16 ++---
 .../classes/baseline-trailing-icon.html       |  8 +--
 .../baseline-without-label-with-icon.html     |  8 +--
 .../classes/disabled-leading-icon.html        |  8 +--
 .../disabled-leading-trailing-icons.html      | 16 ++---
 .../classes/disabled-trailing-icon.html       |  8 +--
 .../classes/focused-leading-icon.html         |  8 +--
 .../focused-leading-trailing-icons.html       | 16 ++---
 .../classes/focused-trailing-icon.html        |  8 +--
 .../classes/invalid-focused-leading-icon.html |  8 +--
 ...nvalid-focused-leading-trailing-icons.html | 16 ++---
 .../invalid-focused-trailing-icon.html        |  8 +--
 .../classes/invalid-leading-icon.html         |  8 +--
 .../invalid-leading-trailing-icons.html       | 16 ++---
 .../classes/invalid-trailing-icon.html        |  8 +--
 .../mixins/density-leading-icon-invalid.html  |  8 +--
 .../mixins/density-leading-icon.html          |  8 +--
 .../spec/mdc-textfield/mixins/disabled-1.html |  8 +--
 .../mdc-textfield/mdc-text-field-icon.test.js |  2 +-
 27 files changed, 162 insertions(+), 194 deletions(-)

diff --git a/packages/mdc-textfield/_mixins.scss b/packages/mdc-textfield/_mixins.scss
index af41469cfa6..6ff20a3df5d 100644
--- a/packages/mdc-textfield/_mixins.scss
+++ b/packages/mdc-textfield/_mixins.scss
@@ -565,8 +565,7 @@
     top: 14px;
   }
 
-  .mdc-text-field__leading-icon,
-  .mdc-text-field__trailing-icon {
+  .mdc-text-field__icon {
     top: 12px;
   }
 }
@@ -593,8 +592,7 @@
     z-index: 1;
   }
 
-  .mdc-text-field__leading-icon,
-  .mdc-text-field__trailing-icon {
+  .mdc-text-field__icon {
     z-index: 2;
   }
 
@@ -621,13 +619,14 @@
 
 @mixin mdc-text-field-with-leading-icon_ {
   @include mdc-text-field-icon-horizontal-position_(
-    leading,
     left,
-    $mdc-text-field-icon-position,
-    $mdc-text-field-icon-padding,
-    $mdc-text-field-input-padding
+    $mdc-text-field-icon-position
   );
 
+  .mdc-text-field__input {
+    @include mdc-rtl-reflexive-property(padding, $mdc-text-field-icon-padding, $mdc-text-field-input-padding);
+  }
+
   .mdc-floating-label {
     @include mdc-rtl-reflexive-position(left, $mdc-text-field-icon-padding);
   }
@@ -635,13 +634,14 @@
 
 @mixin mdc-text-field-dense-with-leading-icon_ {
   @include mdc-text-field-icon-horizontal-position_(
-    leading,
     left,
-    $mdc-text-field-dense-icon-position,
-    $mdc-text-field-dense-icon-padding,
-    $mdc-text-field-input-padding
+    $mdc-text-field-dense-icon-position
   );
 
+  .mdc-text-field__input {
+    @include mdc-rtl-reflexive-property(padding, $mdc-text-field-dense-icon-padding, $mdc-text-field-input-padding);
+  }
+
   .mdc-floating-label {
     @include mdc-rtl-reflexive-position(left, $mdc-text-field-dense-icon-padding);
   }
@@ -649,11 +649,8 @@
 
 @mixin mdc-text-field-outlined-with-leading-icon_ {
   @include mdc-text-field-icon-horizontal-position_(
-    leading,
     left,
-    $mdc-text-field-icon-position,
-    $mdc-text-field-icon-padding,
-    $mdc-text-field-input-padding
+    $mdc-text-field-icon-position
   );
   @include mdc-notched-outline-floating-label-float-position-absolute($mdc-text-field-outlined-label-position-y, 32px);
   @include mdc-floating-label-shake-animation(text-field-outlined-leading-icon);
@@ -686,51 +683,56 @@
 
 @mixin mdc-text-field-with-trailing-icon_ {
   @include mdc-text-field-icon-horizontal-position_(
-    trailing,
     right,
-    $mdc-text-field-trailing-icon-position,
-    $mdc-text-field-icon-padding,
-    $mdc-text-field-input-padding
+    $mdc-text-field-trailing-icon-position
   );
 
+  .mdc-text-field__input {
+    @include mdc-rtl-reflexive-property(padding, $mdc-text-field-input-padding, $mdc-text-field-icon-padding);
+  }
+
   // Outlined uses 16px for text alignment when using a trailing icon.
   &.mdc-text-field--outlined {
     @include mdc-text-field-icon-horizontal-position_(
-      trailing,
       right,
-      $mdc-text-field-icon-position,
-      $mdc-text-field-icon-padding,
-      $mdc-text-field-input-padding
+      $mdc-text-field-icon-position
     );
   }
 }
 
 @mixin mdc-text-field-dense-with-trailing-icon_ {
   @include mdc-text-field-icon-horizontal-position_(
-    trailing,
     right,
-    $mdc-text-field-dense-icon-position,
-    $mdc-text-field-dense-icon-padding,
-    $mdc-text-field-input-padding
+    $mdc-text-field-dense-icon-position
   );
+
+  .mdc-text-field__input {
+    @include mdc-rtl-reflexive-property(padding, $mdc-text-field-input-padding, $mdc-text-field-dense-icon-padding);
+  }
 }
 
 @mixin mdc-text-field-with-both-icons_ {
   @include mdc-text-field-icon-horizontal-position-two-icons_(
     $mdc-text-field-icon-position,
-    $mdc-text-field-icon-padding,
-    $mdc-text-field-trailing-icon-position,
-    $mdc-text-field-icon-padding
+    $mdc-text-field-trailing-icon-position
   );
+
+  .mdc-text-field__input {
+    padding-right: $mdc-text-field-icon-padding;
+    padding-left: $mdc-text-field-icon-padding;
+  }
 }
 
 @mixin mdc-text-field-dense-with-both-icons_ {
   @include mdc-text-field-icon-horizontal-position-two-icons_(
     $mdc-text-field-dense-icon-position,
-    $mdc-text-field-dense-icon-padding,
-    $mdc-text-field-dense-icon-position,
-    $mdc-text-field-dense-icon-padding
+    $mdc-text-field-dense-icon-position
   );
+
+  .mdc-text-field__input {
+    padding-right: $mdc-text-field-dense-icon-padding;
+    padding-left: $mdc-text-field-dense-icon-padding;
+  }
 }
 
 // Full Width
diff --git a/packages/mdc-textfield/constants.ts b/packages/mdc-textfield/constants.ts
index b964c7e0d91..9e66a29240b 100644
--- a/packages/mdc-textfield/constants.ts
+++ b/packages/mdc-textfield/constants.ts
@@ -25,10 +25,10 @@ const strings = {
   ARIA_CONTROLS: 'aria-controls',
   INPUT_SELECTOR: '.mdc-text-field__input',
   LABEL_SELECTOR: '.mdc-floating-label',
-  LEADING_ICON_SELECTOR: '.mdc-text-field__leading-icon',
+  LEADING_ICON_SELECTOR: '.mdc-text-field__icon--leading',
   LINE_RIPPLE_SELECTOR: '.mdc-line-ripple',
   OUTLINE_SELECTOR: '.mdc-notched-outline',
-  TRAILING_ICON_SELECTOR: '.mdc-text-field__trailing-icon'
+  TRAILING_ICON_SELECTOR: '.mdc-text-field__icon--trailing'
 };
 
 const cssClasses = {
diff --git a/packages/mdc-textfield/icon/README.md b/packages/mdc-textfield/icon/README.md
index ce8203e2d08..77fcc766721 100644
--- a/packages/mdc-textfield/icon/README.md
+++ b/packages/mdc-textfield/icon/README.md
@@ -24,7 +24,7 @@ Icons describe the type of input a text field requires. They can also be interac
 ### HTML Structure
 
 ```html
-<i class="material-icons mdc-text-field__leading-icon" tabindex="0" role="button">event</i>
+<i class="material-icons mdc-text-field__icon mdc-text-field__icon--leading" tabindex="0" role="button">event</i>
 ```
 
 #### Icon Set
@@ -55,7 +55,7 @@ const icon = new MDCTextFieldIcon(document.querySelector('.mdc-text-field-icon')
 
 ## Variants
 
-Leading and trailing icons can be applied to default or `mdc-text-field--outlined` Text Fields. To add an icon, add the relevant class (`mdc-text-field--with-leading-icon` and/or `mdc-text-field--with-trailing-icon`) to the root element, add an `i` element with your preferred icon, and give it a class of `mdc-text-field__leading-icon` or `mdc-text-field__trailing-icon`.
+Leading and trailing icons can be applied to default or `mdc-text-field--outlined` Text Fields. To add an icon, add the relevant class (`mdc-text-field--with-leading-icon` and/or `mdc-text-field--with-trailing-icon`) to the root element, add an `i` element with your preferred icon, and give it a class of `mdc-text-field__icon` with the modifier`mdc-text-field__icon--leading` or `mdc-text-field__icon--trailing`.
 
 > **NOTE:** if you would like to display un-clickable icons, simply omit `tabindex="0"` and `role="button"`, and the CSS will ensure the cursor is set to default, and that interacting with an icon doesn't do anything unexpected.
 
@@ -65,7 +65,7 @@ In text field:
 
 ```html
 <div class="mdc-text-field mdc-text-field--with-leading-icon">
-  <i class="material-icons mdc-text-field__leading-icon" tabindex="0" role="button">event</i>
+  <i class="material-icons mdc-text-field__icon mdc-text-field__icon--leading" tabindex="0" role="button">event</i>
   <input type="text" id="my-input" class="mdc-text-field__input">
   <label for="my-input" class="mdc-floating-label">Your Name</label>
   <div class="mdc-line-ripple"></div>
@@ -76,7 +76,7 @@ In outlined text field:
 
 ```html
 <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon">
-  <i class="material-icons mdc-text-field__leading-icon" tabindex="0" role="button">event</i>
+  <i class="material-icons mdc-text-field__icon mdc-text-field__icon--leading" tabindex="0" role="button">event</i>
   <input type="text" id="my-input" class="mdc-text-field__input">
   <div class="mdc-notched-outline">
     <div class="mdc-notched-outline__leading"></div>
@@ -95,7 +95,7 @@ In text field:
 ```html
 <div class="mdc-text-field mdc-text-field--with-trailing-icon">
   <input type="text" id="my-input" class="mdc-text-field__input">
-  <i class="material-icons mdc-text-field__trailing-icon" tabindex="0" role="button">event</i>
+  <i class="material-icons mdc-text-field__icon mdc-text-field__icon--trailing" tabindex="0" role="button">event</i>
   <label for="my-input" class="mdc-floating-label">Your Name</label>
   <div class="mdc-line-ripple"></div>
 </div>
@@ -106,7 +106,7 @@ In outlined text field:
 ```html
 <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-trailing-icon">
   <input type="text" id="my-input" class="mdc-text-field__input">
-  <i class="material-icons mdc-text-field__trailing-icon" tabindex="0" role="button">event</i>
+  <i class="material-icons mdc-text-field__icon mdc-text-field__icon--trailing" tabindex="0" role="button">event</i>
   <div class="mdc-notched-outline">
     <div class="mdc-notched-outline__leading"></div>
     <div class="mdc-notched-outline__notch">
@@ -123,9 +123,9 @@ In text field:
 
 ```html
 <div class="mdc-text-field mdc-text-field--with-leading-icon mdc-text-field--with-trailing-icon">
-  <i class="material-icons mdc-text-field__leading-icon">phone</i>
+  <i class="material-icons mdc-text-field__icon mdc-text-field__icon--leading">phone</i>
   <input type="text" id="my-input" class="mdc-text-field__input">
-  <i class="material-icons mdc-text-field__trailing-icon" tabindex="0" role="button">event</i>
+  <i class="material-icons mdc-text-field__icon mdc-text-field__icon--trailing" tabindex="0" role="button">event</i>
   <label for="my-input" class="mdc-floating-label">Phone Number</label>
   <div class="mdc-line-ripple"></div>
 </div>
@@ -135,9 +135,9 @@ In outlined text field:
 
 ```html
 <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon mdc-text-field--with-trailing-icon">
-  <i class="material-icons mdc-text-field__leading-icon">phone</i>
+  <i class="material-icons mdc-text-field__icon mdc-text-field__icon--leading">phone</i>
   <input type="text" id="my-input" class="mdc-text-field__input">
-  <i class="material-icons mdc-text-field__trailing-icon" tabindex="0" role="button">clear</i>
+  <i class="material-icons mdc-text-field__icon mdc-text-field__icon--trailing" tabindex="0" role="button">clear</i>
   <div class="mdc-notched-outline">
    <div class="mdc-notched-outline__leading"></div>
     <div class="mdc-notched-outline__notch">
@@ -154,8 +154,9 @@ In outlined text field:
 
 CSS Class | Description
 --- | ---
-`mdc-text-field__leading-icon` | Mandatory for leading icons.
-`mdc-text-field__trailing-icon` | Mandatory for trailing icons.
+`mdc-text-field__icon` | Mandatory.
+`mdc-text-field__icon--leading` | Mandatory for leading icons.
+`mdc-text-field__icon--trailing` | Mandatory for trailing icons.
 
 ### Sass Mixins
 
diff --git a/packages/mdc-textfield/icon/_mixins.scss b/packages/mdc-textfield/icon/_mixins.scss
index 2e7ad6229cf..c9ab1e3073c 100644
--- a/packages/mdc-textfield/icon/_mixins.scss
+++ b/packages/mdc-textfield/icon/_mixins.scss
@@ -59,55 +59,26 @@
 
 // Private mixins
 
-@mixin mdc-text-field-icon-horizontal-position_(
-  $icon-position,
-  $position-property,
-  $position,
-  $padding,
-  $input-padding
-) {
-  .mdc-text-field__#{$icon-position}-icon {
-    @include mdc-rtl-reflexive-position($position-property, $position);
-  }
-
-  // Move the input's position, to allow room for the icon
+@mixin mdc-text-field-icon-horizontal-position_($position-property, $position) {
   @if ($position-property == left) {
-    .mdc-text-field__input {
-      @include mdc-rtl-reflexive-property(padding, $padding, $input-padding);
+    .mdc-text-field__icon--leading {
+      @include mdc-rtl-reflexive-position($position-property, $position);
     }
   } @else {
-    .mdc-text-field__input {
-      @include mdc-rtl-reflexive-property(padding, $input-padding, $padding);
+    .mdc-text-field__icon--trailing {
+      @include mdc-rtl-reflexive-position($position-property, $position);
     }
   }
 }
 
-@mixin mdc-text-field-icon-horizontal-position-two-icons_(
-  $position-left,
-  $padding-left,
-  $position-right,
-  $padding-right
-) {
-  .mdc-text-field__leading-icon {
+@mixin mdc-text-field-icon-horizontal-position-two-icons_($position-left, $position-right) {
+  .mdc-text-field__icon--leading {
     @include mdc-rtl-reflexive(left, $position-left, right, auto);
   }
 
-  .mdc-text-field__trailing-icon {
+  .mdc-text-field__icon--trailing {
     @include mdc-rtl-reflexive(right, $position-right, left, auto);
   }
-
-  // Move the input's position, to allow room for the icons.
-  .mdc-text-field__input {
-    @include mdc-rtl-reflexive-property(padding, $padding-left, $padding-right);
-  }
-}
-
-@mixin mdc-text-field-leading-icon_ {
-  @include mdc-text-field-icon_;
-}
-
-@mixin mdc-text-field-trailing-icon_ {
-  @include mdc-text-field-icon_;
 }
 
 @mixin mdc-text-field-icon_ {
@@ -124,13 +95,13 @@
 }
 
 @mixin mdc-text-field-leading-icon-color_($color) {
-  .mdc-text-field__leading-icon {
+  .mdc-text-field__icon--leading {
     @include mdc-theme-prop(color, $color);
   }
 }
 
 @mixin mdc-text-field-trailing-icon-color_($color) {
-  .mdc-text-field__trailing-icon {
+  .mdc-text-field__icon--trailing {
     @include mdc-theme-prop(color, $color);
   }
 }
diff --git a/packages/mdc-textfield/icon/constants.ts b/packages/mdc-textfield/icon/constants.ts
index 10795e02a74..6e32a217e6e 100644
--- a/packages/mdc-textfield/icon/constants.ts
+++ b/packages/mdc-textfield/icon/constants.ts
@@ -27,8 +27,7 @@ const strings = {
 };
 
 const cssClasses = {
-  LEADING: 'mdc-text-field__leading-icon',
-  TRAILING: 'mdc-text-field__trailing-icon',
+  ROOT: 'mdc-text-field__icon',
 };
 
 export {strings, cssClasses};
diff --git a/packages/mdc-textfield/icon/mdc-text-field-icon.scss b/packages/mdc-textfield/icon/mdc-text-field-icon.scss
index 7aa86fe36e0..d898e3ede76 100644
--- a/packages/mdc-textfield/icon/mdc-text-field-icon.scss
+++ b/packages/mdc-textfield/icon/mdc-text-field-icon.scss
@@ -22,10 +22,6 @@
 
 @import "./mixins";
 
-.mdc-text-field__leading-icon {
-  @include mdc-text-field-leading-icon_;
-}
-
-.mdc-text-field__trailing-icon {
-  @include mdc-text-field-trailing-icon_;
+.mdc-text-field__icon {
+  @include mdc-text-field-icon_;
 }
diff --git a/packages/mdc-textfield/mdc-text-field.scss b/packages/mdc-textfield/mdc-text-field.scss
index bd2c6698f85..574e1df6f39 100644
--- a/packages/mdc-textfield/mdc-text-field.scss
+++ b/packages/mdc-textfield/mdc-text-field.scss
@@ -175,8 +175,7 @@
 }
 
 // stylelint-disable plugin/selector-bem-pattern
-.mdc-text-field--dense .mdc-text-field__leading-icon,
-.mdc-text-field--dense .mdc-text-field__trailing-icon {
+.mdc-text-field--dense .mdc-text-field__icon {
   bottom: 16px;
   transform: scale(.8);
 }
diff --git a/test/screenshot/spec/mdc-textfield/classes/baseline-leading-icon.html b/test/screenshot/spec/mdc-textfield/classes/baseline-leading-icon.html
index ce16f19065c..a9af1533cf3 100644
--- a/test/screenshot/spec/mdc-textfield/classes/baseline-leading-icon.html
+++ b/test/screenshot/spec/mdc-textfield/classes/baseline-leading-icon.html
@@ -37,7 +37,7 @@
 
       <div class="test-cell test-cell--textfield">
         <div class="mdc-text-field mdc-text-field--with-leading-icon">
-          <i class="material-icons mdc-text-field__leading-icon" tabindex="0" role="button">event</i>
+          <i class="material-icons mdc-text-field__icon mdc-text-field__icon--leading" tabindex="0" role="button">event</i>
           <input type="text" id="filled-text-field" class="mdc-text-field__input test-text-field__input">
           <label class="mdc-floating-label" for="filled-text-field">Label</label>
           <div class="mdc-line-ripple"></div>
@@ -46,7 +46,7 @@
 
       <div class="test-cell test-cell--textfield">
         <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon">
-          <i class="material-icons mdc-text-field__leading-icon" tabindex="0" role="button">event</i>
+          <i class="material-icons mdc-text-field__icon mdc-text-field__icon--leading" tabindex="0" role="button">event</i>
           <input type="text" id="outlined-text-field" class="mdc-text-field__input test-text-field__input">
           <div class="mdc-notched-outline">
             <div class="mdc-notched-outline__leading"></div>
@@ -60,7 +60,7 @@
 
       <div class="test-cell test-cell--textfield">
         <div class="mdc-text-field mdc-text-field--with-leading-icon">
-          <i class="material-icons mdc-text-field__leading-icon" tabindex="0" role="button">event</i>
+          <i class="material-icons mdc-text-field__icon mdc-text-field__icon--leading" tabindex="0" role="button">event</i>
           <input type="text" id="filled-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value">
           <label for="filled-text-field-with-value" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
           <div class="mdc-line-ripple"></div>
@@ -69,7 +69,7 @@
 
       <div class="test-cell test-cell--textfield">
         <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon">
-          <i class="material-icons mdc-text-field__leading-icon" tabindex="0" role="button">event</i>
+          <i class="material-icons mdc-text-field__icon mdc-text-field__icon--leading" tabindex="0" role="button">event</i>
           <input type="text" id="outlined-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value">
           <div class="mdc-notched-outline mdc-notched-outline--notched">
             <div class="mdc-notched-outline__leading"></div>
diff --git a/test/screenshot/spec/mdc-textfield/classes/baseline-leading-trailing-icons.html b/test/screenshot/spec/mdc-textfield/classes/baseline-leading-trailing-icons.html
index 99265d6db97..ec4c9bd32d3 100644
--- a/test/screenshot/spec/mdc-textfield/classes/baseline-leading-trailing-icons.html
+++ b/test/screenshot/spec/mdc-textfield/classes/baseline-leading-trailing-icons.html
@@ -46,9 +46,9 @@
 
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--with-leading-icon mdc-text-field--with-trailing-icon">
-            <i class="material-icons mdc-text-field__leading-icon">3d_rotation</i>
+            <i class="material-icons mdc-text-field__icon mdc-text-field__icon--leading">3d_rotation</i>
             <input type="text" id="filled-text-field" class="mdc-text-field__input test-text-field__input">
-            <i class="material-icons mdc-text-field__trailing-icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__icon mdc-text-field__icon--trailing" tabindex="0" role="button">event</i>
             <label class="mdc-floating-label" for="filled-text-field">Label</label>
             <div class="mdc-line-ripple"></div>
           </div>
@@ -56,9 +56,9 @@
 
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon mdc-text-field--with-trailing-icon">
-            <i class="material-icons mdc-text-field__leading-icon">3d_rotation</i>
+            <i class="material-icons mdc-text-field__icon mdc-text-field__icon--leading">3d_rotation</i>
             <input type="text" id="outlined-text-field" class="mdc-text-field__input test-text-field__input">
-            <i class="material-icons mdc-text-field__trailing-icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__icon mdc-text-field__icon--trailing" tabindex="0" role="button">event</i>
             <div class="mdc-notched-outline">
               <div class="mdc-notched-outline__leading"></div>
               <div class="mdc-notched-outline__notch">
@@ -71,9 +71,9 @@
 
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--with-leading-icon mdc-text-field--with-trailing-icon">
-            <i class="material-icons mdc-text-field__leading-icon">3d_rotation</i>
+            <i class="material-icons mdc-text-field__icon mdc-text-field__icon--leading">3d_rotation</i>
             <input type="text" id="filled-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value">
-            <i class="material-icons mdc-text-field__trailing-icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__icon mdc-text-field__icon--trailing" tabindex="0" role="button">event</i>
             <label for="filled-text-field-with-value" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
             <div class="mdc-line-ripple"></div>
           </div>
@@ -81,9 +81,9 @@
 
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon mdc-text-field--with-trailing-icon">
-            <i class="material-icons mdc-text-field__leading-icon">3d_rotation</i>
+            <i class="material-icons mdc-text-field__icon mdc-text-field__icon--leading">3d_rotation</i>
             <input type="text" id="outlined-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value">
-            <i class="material-icons mdc-text-field__trailing-icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__icon mdc-text-field__icon--trailing" tabindex="0" role="button">event</i>
             <div class="mdc-notched-outline mdc-notched-outline--notched">
               <div class="mdc-notched-outline__leading"></div>
               <div class="mdc-notched-outline__notch">
diff --git a/test/screenshot/spec/mdc-textfield/classes/baseline-trailing-icon.html b/test/screenshot/spec/mdc-textfield/classes/baseline-trailing-icon.html
index e48142b1610..a6ddcd66bb2 100644
--- a/test/screenshot/spec/mdc-textfield/classes/baseline-trailing-icon.html
+++ b/test/screenshot/spec/mdc-textfield/classes/baseline-trailing-icon.html
@@ -38,7 +38,7 @@
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--with-trailing-icon">
             <input type="text" id="filled-text-field" class="mdc-text-field__input test-text-field__input">
-            <i class="material-icons mdc-text-field__trailing-icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__icon mdc-text-field__icon--trailing" tabindex="0" role="button">event</i>
             <label class="mdc-floating-label" for="filled-text-field">Label</label>
             <div class="mdc-line-ripple"></div>
           </div>
@@ -47,7 +47,7 @@
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-trailing-icon">
             <input type="text" id="outlined-text-field" class="mdc-text-field__input test-text-field__input">
-            <i class="material-icons mdc-text-field__trailing-icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__icon mdc-text-field__icon--trailing" tabindex="0" role="button">event</i>
             <div class="mdc-notched-outline">
               <div class="mdc-notched-outline__leading"></div>
               <div class="mdc-notched-outline__notch">
@@ -61,7 +61,7 @@
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--with-trailing-icon">
             <input type="text" id="filled-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value">
-            <i class="material-icons mdc-text-field__trailing-icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__icon mdc-text-field__icon--trailing" tabindex="0" role="button">event</i>
             <label for="filled-text-field-with-value" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
             <div class="mdc-line-ripple"></div>
           </div>
@@ -70,7 +70,7 @@
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-trailing-icon">
             <input type="text" id="outlined-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value">
-            <i class="material-icons mdc-text-field__trailing-icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__icon mdc-text-field__icon--trailing" tabindex="0" role="button">event</i>
             <div class="mdc-notched-outline mdc-notched-outline--notched">
               <div class="mdc-notched-outline__leading"></div>
               <div class="mdc-notched-outline__notch">
diff --git a/test/screenshot/spec/mdc-textfield/classes/baseline-without-label-with-icon.html b/test/screenshot/spec/mdc-textfield/classes/baseline-without-label-with-icon.html
index e010442dd55..f385e491f8c 100644
--- a/test/screenshot/spec/mdc-textfield/classes/baseline-without-label-with-icon.html
+++ b/test/screenshot/spec/mdc-textfield/classes/baseline-without-label-with-icon.html
@@ -46,7 +46,7 @@
 
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--no-label mdc-text-field--with-leading-icon">
-            <i class="material-icons mdc-text-field__leading-icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__icon mdc-text-field__icon--leading" tabindex="0" role="button">event</i>
             <!-- htmllint-disable -->
             <input type="text" class="mdc-text-field__input test-text-field__input" placeholder="Placeholder" aria-label="Label">
             <!-- htmllint-enable -->
@@ -56,7 +56,7 @@
 
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--no-label mdc-text-field--with-leading-icon">
-            <i class="material-icons mdc-text-field__leading-icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__icon mdc-text-field__icon--leading" tabindex="0" role="button">event</i>
             <!-- htmllint-disable -->
             <input type="text" class="mdc-text-field__input test-text-field__input" placeholder="Placeholder" aria-label="Label">
             <!-- htmllint-enable -->
@@ -69,7 +69,7 @@
 
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--no-label mdc-text-field--with-leading-icon">
-            <i class="material-icons mdc-text-field__leading-icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__icon mdc-text-field__icon--leading" tabindex="0" role="button">event</i>
             <!-- htmllint-disable -->
             <input type="text" class="mdc-text-field__input test-text-field__input" value="Filled value" placeholder="Placeholder" aria-label="Label">
             <!-- htmllint-enable -->
@@ -79,7 +79,7 @@
 
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--no-label mdc-text-field--outlined mdc-text-field--with-leading-icon">
-            <i class="material-icons mdc-text-field__leading-icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__icon mdc-text-field__icon--leading" tabindex="0" role="button">event</i>
             <!-- htmllint-disable -->
             <input type="text" class="mdc-text-field__input test-text-field__input" value="Filled value" placeholder="Placeholder" aria-label="Label">
             <!-- htmllint-enable -->
diff --git a/test/screenshot/spec/mdc-textfield/classes/disabled-leading-icon.html b/test/screenshot/spec/mdc-textfield/classes/disabled-leading-icon.html
index 6639ea5d305..71d48c3a930 100644
--- a/test/screenshot/spec/mdc-textfield/classes/disabled-leading-icon.html
+++ b/test/screenshot/spec/mdc-textfield/classes/disabled-leading-icon.html
@@ -37,7 +37,7 @@
 
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--with-leading-icon mdc-text-field--disabled">
-            <i class="material-icons mdc-text-field__leading-icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__icon mdc-text-field__icon--leading" tabindex="0" role="button">event</i>
             <input type="text" id="filled-text-field" class="mdc-text-field__input test-text-field__input" disabled>
             <label class="mdc-floating-label" for="filled-text-field">Label</label>
             <div class="mdc-line-ripple"></div>
@@ -46,7 +46,7 @@
 
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon mdc-text-field--disabled">
-            <i class="material-icons mdc-text-field__leading-icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__icon mdc-text-field__icon--leading" tabindex="0" role="button">event</i>
             <input type="text" id="outlined-text-field" class="mdc-text-field__input test-text-field__input" disabled>
             <div class="mdc-notched-outline">
               <div class="mdc-notched-outline__leading"></div>
@@ -60,7 +60,7 @@
 
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--with-leading-icon mdc-text-field--disabled">
-            <i class="material-icons mdc-text-field__leading-icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__icon mdc-text-field__icon--leading" tabindex="0" role="button">event</i>
             <input type="text" id="filled-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" disabled>
             <label for="filled-text-field-with-value" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
             <div class="mdc-line-ripple"></div>
@@ -69,7 +69,7 @@
 
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon mdc-text-field--disabled">
-            <i class="material-icons mdc-text-field__leading-icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__icon mdc-text-field__icon--leading" tabindex="0" role="button">event</i>
             <input type="text" id="outlined-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" disabled>
             <div class="mdc-notched-outline mdc-notched-outline--notched">
               <div class="mdc-notched-outline__leading"></div>
diff --git a/test/screenshot/spec/mdc-textfield/classes/disabled-leading-trailing-icons.html b/test/screenshot/spec/mdc-textfield/classes/disabled-leading-trailing-icons.html
index 2c6a8059133..04395ab1dea 100644
--- a/test/screenshot/spec/mdc-textfield/classes/disabled-leading-trailing-icons.html
+++ b/test/screenshot/spec/mdc-textfield/classes/disabled-leading-trailing-icons.html
@@ -46,9 +46,9 @@
 
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--with-leading-icon mdc-text-field--with-trailing-icon mdc-text-field--disabled">
-            <i class="material-icons mdc-text-field__leading-icon">3d_rotation</i>
+            <i class="material-icons mdc-text-field__icon mdc-text-field__icon--leading">3d_rotation</i>
             <input type="text" id="filled-text-field" class="mdc-text-field__input test-text-field__input" disabled>
-            <i class="material-icons mdc-text-field__trailing-icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__icon mdc-text-field__icon--trailing" tabindex="0" role="button">event</i>
             <label class="mdc-floating-label" for="filled-text-field">Label</label>
             <div class="mdc-line-ripple"></div>
           </div>
@@ -56,9 +56,9 @@
 
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon mdc-text-field--with-trailing-icon mdc-text-field--disabled">
-            <i class="material-icons mdc-text-field__leading-icon">3d_rotation</i>
+            <i class="material-icons mdc-text-field__icon mdc-text-field__icon--leading">3d_rotation</i>
             <input type="text" id="outlined-text-field" class="mdc-text-field__input test-text-field__input" disabled>
-            <i class="material-icons mdc-text-field__trailing-icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__icon mdc-text-field__icon--trailing" tabindex="0" role="button">event</i>
             <div class="mdc-notched-outline">
               <div class="mdc-notched-outline__leading"></div>
               <div class="mdc-notched-outline__notch">
@@ -71,9 +71,9 @@
 
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--with-leading-icon mdc-text-field--with-trailing-icon mdc-text-field--disabled">
-            <i class="material-icons mdc-text-field__leading-icon">3d_rotation</i>
+            <i class="material-icons mdc-text-field__icon mdc-text-field__icon--leading">3d_rotation</i>
             <input type="text" id="filled-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" disabled>
-            <i class="material-icons mdc-text-field__trailing-icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__icon mdc-text-field__icon--trailing" tabindex="0" role="button">event</i>
             <label for="filled-text-field-with-value" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
             <div class="mdc-line-ripple"></div>
           </div>
@@ -81,9 +81,9 @@
 
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon mdc-text-field--with-trailing-icon mdc-text-field--disabled">
-            <i class="material-icons mdc-text-field__leading-icon">3d_rotation</i>
+            <i class="material-icons mdc-text-field__icon mdc-text-field__icon--leading">3d_rotation</i>
             <input type="text" id="outlined-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" disabled>
-            <i class="material-icons mdc-text-field__trailing-icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__icon mdc-text-field__icon--trailing" tabindex="0" role="button">event</i>
             <div class="mdc-notched-outline mdc-notched-outline--notched">
               <div class="mdc-notched-outline__leading"></div>
               <div class="mdc-notched-outline__notch">
diff --git a/test/screenshot/spec/mdc-textfield/classes/disabled-trailing-icon.html b/test/screenshot/spec/mdc-textfield/classes/disabled-trailing-icon.html
index 3b4df9127bf..33341752cf7 100644
--- a/test/screenshot/spec/mdc-textfield/classes/disabled-trailing-icon.html
+++ b/test/screenshot/spec/mdc-textfield/classes/disabled-trailing-icon.html
@@ -38,7 +38,7 @@
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--with-trailing-icon mdc-text-field--disabled">
             <input type="text" id="filled-text-field" class="mdc-text-field__input test-text-field__input" disabled>
-            <i class="material-icons mdc-text-field__trailing-icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__icon mdc-text-field__icon--trailing" tabindex="0" role="button">event</i>
             <label class="mdc-floating-label" for="filled-text-field">Label</label>
             <div class="mdc-line-ripple"></div>
           </div>
@@ -47,7 +47,7 @@
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-trailing-icon mdc-text-field--disabled">
             <input type="text" id="outlined-text-field" class="mdc-text-field__input test-text-field__input" disabled>
-            <i class="material-icons mdc-text-field__trailing-icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__icon mdc-text-field__icon--trailing" tabindex="0" role="button">event</i>
             <div class="mdc-notched-outline">
               <div class="mdc-notched-outline__leading"></div>
               <div class="mdc-notched-outline__notch">
@@ -61,7 +61,7 @@
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--with-trailing-icon mdc-text-field--disabled">
             <input type="text" id="filled-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" disabled>
-            <i class="material-icons mdc-text-field__trailing-icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__icon mdc-text-field__icon--trailing" tabindex="0" role="button">event</i>
             <label for="filled-text-field-with-value" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
             <div class="mdc-line-ripple"></div>
           </div>
@@ -70,7 +70,7 @@
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-trailing-icon mdc-text-field--disabled">
             <input type="text" id="outlined-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" disabled>
-            <i class="material-icons mdc-text-field__trailing-icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__icon mdc-text-field__icon--trailing" tabindex="0" role="button">event</i>
             <div class="mdc-notched-outline mdc-notched-outline--notched">
               <div class="mdc-notched-outline__leading"></div>
               <div class="mdc-notched-outline__notch">
diff --git a/test/screenshot/spec/mdc-textfield/classes/focused-leading-icon.html b/test/screenshot/spec/mdc-textfield/classes/focused-leading-icon.html
index 095cf440e36..e4556c9b4d5 100644
--- a/test/screenshot/spec/mdc-textfield/classes/focused-leading-icon.html
+++ b/test/screenshot/spec/mdc-textfield/classes/focused-leading-icon.html
@@ -38,7 +38,7 @@
 
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--focused mdc-text-field--with-leading-icon">
-            <i class="material-icons mdc-text-field__leading-icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__icon mdc-text-field__icon--leading" tabindex="0" role="button">event</i>
             <input type="text" id="filled-text-field" class="mdc-text-field__input test-text-field__input">
             <label class="mdc-floating-label" for="filled-text-field">Label</label>
             <div class="mdc-line-ripple mdc-line-ripple--active"></div>
@@ -47,7 +47,7 @@
 
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--focused mdc-text-field--with-leading-icon">
-            <i class="material-icons mdc-text-field__leading-icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__icon mdc-text-field__icon--leading" tabindex="0" role="button">event</i>
             <!-- The single space value is to overcome an issue where the component does not draw the SVG path when created unless there is a value. -->
             <input type="text" id="outlined-text-field" class="mdc-text-field__input test-text-field__input" value=" ">
             <div class="mdc-notched-outline mdc-notched-outline--notched">
@@ -62,7 +62,7 @@
 
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--focused mdc-text-field--with-leading-icon">
-            <i class="material-icons mdc-text-field__leading-icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__icon mdc-text-field__icon--leading" tabindex="0" role="button">event</i>
             <input type="text" id="filled-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value">
             <label for="filled-text-field-with-value" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
             <div class="mdc-line-ripple mdc-line-ripple--active"></div>
@@ -71,7 +71,7 @@
 
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--focused mdc-text-field--with-leading-icon">
-            <i class="material-icons mdc-text-field__leading-icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__icon mdc-text-field__icon--leading" tabindex="0" role="button">event</i>
             <input type="text" id="outlined-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value">
             <div class="mdc-notched-outline mdc-notched-outline--notched">
               <div class="mdc-notched-outline__leading"></div>
diff --git a/test/screenshot/spec/mdc-textfield/classes/focused-leading-trailing-icons.html b/test/screenshot/spec/mdc-textfield/classes/focused-leading-trailing-icons.html
index b3a1562b78d..aca695efa9f 100644
--- a/test/screenshot/spec/mdc-textfield/classes/focused-leading-trailing-icons.html
+++ b/test/screenshot/spec/mdc-textfield/classes/focused-leading-trailing-icons.html
@@ -47,9 +47,9 @@
 
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--focused mdc-text-field--with-trailing-icon mdc-text-field--with-leading-icon">
-            <i class="material-icons mdc-text-field__leading-icon" role="button">3d_rotation</i>
+            <i class="material-icons mdc-text-field__icon mdc-text-field__icon--leading" role="button">3d_rotation</i>
             <input type="text" id="filled-text-field" class="mdc-text-field__input test-text-field__input">
-            <i class="material-icons mdc-text-field__trailing-icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__icon mdc-text-field__icon--trailing" tabindex="0" role="button">event</i>
             <label class="mdc-floating-label" for="filled-text-field">Label</label>
             <div class="mdc-line-ripple mdc-line-ripple--active"></div>
           </div>
@@ -58,9 +58,9 @@
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--focused mdc-text-field--with-trailing-icon mdc-text-field--with-leading-icon">
             <!-- The single space value is to overcome an issue where the component does not draw the SVG path when created unless there is a value. -->
-            <i class="material-icons mdc-text-field__leading-icon" role="button">3d_rotation</i>
+            <i class="material-icons mdc-text-field__icon mdc-text-field__icon--leading" role="button">3d_rotation</i>
             <input type="text" id="outlined-text-field" class="mdc-text-field__input test-text-field__input" value=" ">
-            <i class="material-icons mdc-text-field__trailing-icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__icon mdc-text-field__icon--trailing" tabindex="0" role="button">event</i>
             <div class="mdc-notched-outline mdc-notched-outline--notched">
               <div class="mdc-notched-outline__leading"></div>
               <div class="mdc-notched-outline__notch">
@@ -73,9 +73,9 @@
 
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--focused mdc-text-field--with-trailing-icon mdc-text-field--with-leading-icon">
-            <i class="material-icons mdc-text-field__leading-icon" role="button">3d_rotation</i>
+            <i class="material-icons mdc-text-field__icon mdc-text-field__icon--leading" role="button">3d_rotation</i>
             <input type="text" id="filled-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value">
-            <i class="material-icons mdc-text-field__trailing-icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__icon mdc-text-field__icon--trailing" tabindex="0" role="button">event</i>
             <label for="filled-text-field-with-value" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
             <div class="mdc-line-ripple mdc-line-ripple--active"></div>
           </div>
@@ -83,9 +83,9 @@
 
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--focused mdc-text-field--with-trailing-icon mdc-text-field--with-leading-icon">
-            <i class="material-icons mdc-text-field__leading-icon" role="button">3d_rotation</i>
+            <i class="material-icons mdc-text-field__icon mdc-text-field__icon--leading" role="button">3d_rotation</i>
             <input type="text" id="outlined-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value">
-            <i class="material-icons mdc-text-field__trailing-icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__icon mdc-text-field__icon--trailing" tabindex="0" role="button">event</i>
             <div class="mdc-notched-outline mdc-notched-outline--notched">
               <div class="mdc-notched-outline__leading"></div>
               <div class="mdc-notched-outline__notch">
diff --git a/test/screenshot/spec/mdc-textfield/classes/focused-trailing-icon.html b/test/screenshot/spec/mdc-textfield/classes/focused-trailing-icon.html
index 6dd7571b9d8..d20425351b8 100644
--- a/test/screenshot/spec/mdc-textfield/classes/focused-trailing-icon.html
+++ b/test/screenshot/spec/mdc-textfield/classes/focused-trailing-icon.html
@@ -39,7 +39,7 @@
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--focused mdc-text-field--with-trailing-icon">
             <input type="text" id="filled-text-field" class="mdc-text-field__input test-text-field__input">
-            <i class="material-icons mdc-text-field__trailing-icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__icon mdc-text-field__icon--trailing" tabindex="0" role="button">event</i>
             <label class="mdc-floating-label" for="filled-text-field">Label</label>
             <div class="mdc-line-ripple mdc-line-ripple--active"></div>
           </div>
@@ -49,7 +49,7 @@
           <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--focused mdc-text-field--with-trailing-icon">
             <!-- The single space value is to overcome an issue where the component does not draw the SVG path when created unless there is a value. -->
             <input type="text" id="outlined-text-field" class="mdc-text-field__input test-text-field__input" value=" ">
-            <i class="material-icons mdc-text-field__trailing-icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__icon mdc-text-field__icon--trailing" tabindex="0" role="button">event</i>
             <div class="mdc-notched-outline mdc-notched-outline--notched">
               <div class="mdc-notched-outline__leading"></div>
               <div class="mdc-notched-outline__notch">
@@ -63,7 +63,7 @@
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--focused mdc-text-field--with-trailing-icon">
             <input type="text" id="filled-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value">
-            <i class="material-icons mdc-text-field__trailing-icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__icon mdc-text-field__icon--trailing" tabindex="0" role="button">event</i>
             <label for="filled-text-field-with-value" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
             <div class="mdc-line-ripple mdc-line-ripple--active"></div>
           </div>
@@ -72,7 +72,7 @@
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--focused mdc-text-field--with-trailing-icon">
             <input type="text" id="outlined-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value">
-            <i class="material-icons mdc-text-field__trailing-icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__icon mdc-text-field__icon--trailing" tabindex="0" role="button">event</i>
             <div class="mdc-notched-outline mdc-notched-outline--notched">
               <div class="mdc-notched-outline__leading"></div>
               <div class="mdc-notched-outline__notch">
diff --git a/test/screenshot/spec/mdc-textfield/classes/invalid-focused-leading-icon.html b/test/screenshot/spec/mdc-textfield/classes/invalid-focused-leading-icon.html
index dcc25d99c85..9d6cef948e3 100644
--- a/test/screenshot/spec/mdc-textfield/classes/invalid-focused-leading-icon.html
+++ b/test/screenshot/spec/mdc-textfield/classes/invalid-focused-leading-icon.html
@@ -38,7 +38,7 @@
 
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--invalid mdc-text-field--focused mdc-text-field--with-leading-icon">
-            <i class="material-icons mdc-text-field__leading-icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__icon mdc-text-field__icon--leading" tabindex="0" role="button">event</i>
             <input type="text" id="filled-text-field" class="mdc-text-field__input test-text-field__input" value=" " required pattern=".{4,8}">
             <label class="mdc-floating-label mdc-floating-label--float-above" for="filled-text-field">Label</label>
             <div class="mdc-line-ripple mdc-line-ripple--active"></div>
@@ -47,7 +47,7 @@
 
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--invalid mdc-text-field--focused mdc-text-field--with-leading-icon">
-            <i class="material-icons mdc-text-field__leading-icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__icon mdc-text-field__icon--leading" tabindex="0" role="button">event</i>
             <!-- The single space value is to overcome an issue where the component does not draw the SVG path when created unless there is a value. -->
             <input type="text" id="outlined-text-field" class="mdc-text-field__input test-text-field__input" value=" " required pattern=".{4,8}">
             <div class="mdc-notched-outline mdc-notched-outline--notched">
@@ -62,7 +62,7 @@
 
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--invalid mdc-text-field--focused mdc-text-field--with-leading-icon">
-            <i class="material-icons mdc-text-field__leading-icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__icon mdc-text-field__icon--leading" tabindex="0" role="button">event</i>
             <input type="text" id="filled-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" required pattern=".{4,8}">
             <label for="filled-text-field-with-value" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
             <div class="mdc-line-ripple mdc-line-ripple--active"></div>
@@ -71,7 +71,7 @@
 
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--invalid mdc-text-field--focused mdc-text-field--with-leading-icon">
-            <i class="material-icons mdc-text-field__leading-icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__icon mdc-text-field__icon--leading" tabindex="0" role="button">event</i>
             <input type="text" id="outlined-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" required pattern=".{4,8}">
             <div class="mdc-notched-outline mdc-notched-outline--notched">
               <div class="mdc-notched-outline__leading"></div>
diff --git a/test/screenshot/spec/mdc-textfield/classes/invalid-focused-leading-trailing-icons.html b/test/screenshot/spec/mdc-textfield/classes/invalid-focused-leading-trailing-icons.html
index dd6faf184ae..cfeccdc2c7d 100644
--- a/test/screenshot/spec/mdc-textfield/classes/invalid-focused-leading-trailing-icons.html
+++ b/test/screenshot/spec/mdc-textfield/classes/invalid-focused-leading-trailing-icons.html
@@ -47,9 +47,9 @@
 
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--invalid mdc-text-field--focused mdc-text-field--with-trailing-icon mdc-text-field--with-leading-icon">
-            <i class="material-icons mdc-text-field__leading-icon" role="button">3d_rotation</i>
+            <i class="material-icons mdc-text-field__icon mdc-text-field__icon--leading" role="button">3d_rotation</i>
             <input type="text" id="filled-text-field" class="mdc-text-field__input test-text-field__input" value=" " required pattern=".{4,8}">
-            <i class="material-icons mdc-text-field__trailing-icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__icon mdc-text-field__icon--trailing" tabindex="0" role="button">event</i>
             <label class="mdc-floating-label mdc-floating-label--float-above" for="filled-text-field">Label</label>
             <div class="mdc-line-ripple mdc-line-ripple--active"></div>
           </div>
@@ -58,9 +58,9 @@
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--invalid mdc-text-field--focused mdc-text-field--with-trailing-icon mdc-text-field--with-leading-icon">
             <!-- The single space value is to overcome an issue where the component does not draw the SVG path when created unless there is a value. -->
-            <i class="material-icons mdc-text-field__leading-icon" role="button">3d_rotation</i>
+            <i class="material-icons mdc-text-field__icon mdc-text-field__icon--leading" role="button">3d_rotation</i>
             <input type="text" id="outlined-text-field" class="mdc-text-field__input test-text-field__input" value=" " required pattern=".{4,8}">
-            <i class="material-icons mdc-text-field__trailing-icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__icon mdc-text-field__icon--trailing" tabindex="0" role="button">event</i>
             <div class="mdc-notched-outline mdc-notched-outline--notched">
               <div class="mdc-notched-outline__leading"></div>
               <div class="mdc-notched-outline__notch">
@@ -73,9 +73,9 @@
 
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--invalid mdc-text-field--focused mdc-text-field--with-trailing-icon mdc-text-field--with-leading-icon">
-            <i class="material-icons mdc-text-field__leading-icon" role="button">3d_rotation</i>
+            <i class="material-icons mdc-text-field__icon mdc-text-field__icon--leading" role="button">3d_rotation</i>
             <input type="text" id="filled-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" required pattern=".{4,8}">
-            <i class="material-icons mdc-text-field__trailing-icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__icon mdc-text-field__icon--trailing" tabindex="0" role="button">event</i>
             <label for="filled-text-field-with-value" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
             <div class="mdc-line-ripple mdc-line-ripple--active"></div>
           </div>
@@ -83,9 +83,9 @@
 
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--invalid mdc-text-field--focused mdc-text-field--with-trailing-icon mdc-text-field--with-leading-icon">
-            <i class="material-icons mdc-text-field__leading-icon" role="button">3d_rotation</i>
+            <i class="material-icons mdc-text-field__icon mdc-text-field__icon--leading" role="button">3d_rotation</i>
             <input type="text" id="outlined-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" required pattern=".{4,8}">
-            <i class="material-icons mdc-text-field__trailing-icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__icon mdc-text-field__icon--trailing" tabindex="0" role="button">event</i>
             <div class="mdc-notched-outline mdc-notched-outline--notched">
               <div class="mdc-notched-outline__leading"></div>
               <div class="mdc-notched-outline__notch">
diff --git a/test/screenshot/spec/mdc-textfield/classes/invalid-focused-trailing-icon.html b/test/screenshot/spec/mdc-textfield/classes/invalid-focused-trailing-icon.html
index f8ca60adcf2..e8215cbd007 100644
--- a/test/screenshot/spec/mdc-textfield/classes/invalid-focused-trailing-icon.html
+++ b/test/screenshot/spec/mdc-textfield/classes/invalid-focused-trailing-icon.html
@@ -39,7 +39,7 @@
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--invalid mdc-text-field--focused mdc-text-field--with-trailing-icon">
             <input type="text" id="filled-text-field" class="mdc-text-field__input test-text-field__input" value=" " required pattern=".{4,8}">
-            <i class="material-icons mdc-text-field__trailing-icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__icon mdc-text-field__icon--trailing" tabindex="0" role="button">event</i>
             <label class="mdc-floating-label mdc-floating-label--float-above" for="filled-text-field">Label</label>
             <div class="mdc-line-ripple mdc-line-ripple--active"></div>
           </div>
@@ -49,7 +49,7 @@
           <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--invalid mdc-text-field--focused mdc-text-field--with-trailing-icon">
             <!-- The single space value is to overcome an issue where the component does not draw the SVG path when created unless there is a value. -->
             <input type="text" id="outlined-text-field" class="mdc-text-field__input test-text-field__input" value=" " required pattern=".{4,8}">
-            <i class="material-icons mdc-text-field__trailing-icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__icon mdc-text-field__icon--trailing" tabindex="0" role="button">event</i>
             <div class="mdc-notched-outline">
               <div class="mdc-notched-outline__leading"></div>
               <div class="mdc-notched-outline__notch">
@@ -63,7 +63,7 @@
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--invalid mdc-text-field--focused mdc-text-field--with-trailing-icon">
             <input type="text" id="filled-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" required pattern=".{4,8}">
-            <i class="material-icons mdc-text-field__trailing-icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__icon mdc-text-field__icon--trailing" tabindex="0" role="button">event</i>
             <label for="filled-text-field-with-value" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
             <div class="mdc-line-ripple mdc-line-ripple--active"></div>
           </div>
@@ -72,7 +72,7 @@
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--invalid mdc-text-field--focused mdc-text-field--with-trailing-icon">
             <input type="text" id="outlined-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" required pattern=".{4,8}">
-            <i class="material-icons mdc-text-field__trailing-icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__icon mdc-text-field__icon--trailing" tabindex="0" role="button">event</i>
             <div class="mdc-notched-outline mdc-notched-outline--notched">
               <div class="mdc-notched-outline__leading"></div>
               <div class="mdc-notched-outline__notch">
diff --git a/test/screenshot/spec/mdc-textfield/classes/invalid-leading-icon.html b/test/screenshot/spec/mdc-textfield/classes/invalid-leading-icon.html
index f28ec4f6d2e..39bd9463c91 100644
--- a/test/screenshot/spec/mdc-textfield/classes/invalid-leading-icon.html
+++ b/test/screenshot/spec/mdc-textfield/classes/invalid-leading-icon.html
@@ -38,7 +38,7 @@
 
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--invalid mdc-text-field--with-leading-icon">
-            <i class="material-icons mdc-text-field__leading-icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__icon mdc-text-field__icon--leading" tabindex="0" role="button">event</i>
             <input type="text" id="filled-text-field" class="mdc-text-field__input test-text-field__input" required pattern=".{4,8}">
             <label class="mdc-floating-label" for="filled-text-field">Label</label>
             <div class="mdc-line-ripple"></div>
@@ -47,7 +47,7 @@
 
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--invalid mdc-text-field--with-leading-icon">
-            <i class="material-icons mdc-text-field__leading-icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__icon mdc-text-field__icon--leading" tabindex="0" role="button">event</i>
             <input type="text" id="outlined-text-field" class="mdc-text-field__input test-text-field__input" required pattern=".{4,8}">
             <div class="mdc-notched-outline">
               <div class="mdc-notched-outline__leading"></div>
@@ -61,7 +61,7 @@
 
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--invalid mdc-text-field--with-leading-icon">
-            <i class="material-icons mdc-text-field__leading-icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__icon mdc-text-field__icon--leading" tabindex="0" role="button">event</i>
             <input type="text" id="filled-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" required pattern=".{4,8}">
             <label for="filled-text-field-with-value" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
             <div class="mdc-line-ripple"></div>
@@ -70,7 +70,7 @@
 
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--invalid mdc-text-field--with-leading-icon">
-            <i class="material-icons mdc-text-field__leading-icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__icon mdc-text-field__icon--leading" tabindex="0" role="button">event</i>
             <input type="text" id="outlined-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" required pattern=".{4,8}">
             <div class="mdc-notched-outline mdc-notched-outline--notched">
               <div class="mdc-notched-outline__leading"></div>
diff --git a/test/screenshot/spec/mdc-textfield/classes/invalid-leading-trailing-icons.html b/test/screenshot/spec/mdc-textfield/classes/invalid-leading-trailing-icons.html
index 37ff9be7bc7..e6379e6226f 100644
--- a/test/screenshot/spec/mdc-textfield/classes/invalid-leading-trailing-icons.html
+++ b/test/screenshot/spec/mdc-textfield/classes/invalid-leading-trailing-icons.html
@@ -47,9 +47,9 @@
 
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--invalid mdc-text-field--with-trailing-icon mdc-text-field--with-leading-icon">
-            <i class="material-icons mdc-text-field__leading-icon" role="button">3d_rotation</i>
+            <i class="material-icons mdc-text-field__icon mdc-text-field__icon--leading" role="button">3d_rotation</i>
             <input type="text" id="filled-text-field" class="mdc-text-field__input test-text-field__input" required pattern=".{4,8}">
-            <i class="material-icons mdc-text-field__trailing-icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__icon mdc-text-field__icon--trailing" tabindex="0" role="button">event</i>
             <label class="mdc-floating-label" for="filled-text-field">Label</label>
             <div class="mdc-line-ripple"></div>
           </div>
@@ -57,9 +57,9 @@
 
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--invalid mdc-text-field--with-trailing-icon mdc-text-field--with-leading-icon">
-            <i class="material-icons mdc-text-field__leading-icon" role="button">3d_rotation</i>
+            <i class="material-icons mdc-text-field__icon mdc-text-field__icon--leading" role="button">3d_rotation</i>
             <input type="text" id="outlined-text-field" class="mdc-text-field__input test-text-field__input" required pattern=".{4,8}">
-            <i class="material-icons mdc-text-field__trailing-icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__icon mdc-text-field__icon--trailing" tabindex="0" role="button">event</i>
             <div class="mdc-notched-outline">
               <div class="mdc-notched-outline__leading"></div>
               <div class="mdc-notched-outline__notch">
@@ -72,9 +72,9 @@
 
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--invalid mdc-text-field--with-trailing-icon mdc-text-field--with-leading-icon">
-            <i class="material-icons mdc-text-field__leading-icon" role="button">3d_rotation</i>
+            <i class="material-icons mdc-text-field__icon mdc-text-field__icon--leading" role="button">3d_rotation</i>
             <input type="text" id="filled-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" required pattern=".{4,8}">
-            <i class="material-icons mdc-text-field__trailing-icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__icon mdc-text-field__icon--trailing" tabindex="0" role="button">event</i>
             <label for="filled-text-field-with-value" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
             <div class="mdc-line-ripple"></div>
           </div>
@@ -82,9 +82,9 @@
 
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--invalid mdc-text-field--with-trailing-icon mdc-text-field--with-leading-icon">
-            <i class="material-icons mdc-text-field__leading-icon" role="button">3d_rotation</i>
+            <i class="material-icons mdc-text-field__icon mdc-text-field__icon--leading" role="button">3d_rotation</i>
             <input type="text" id="outlined-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" required pattern=".{4,8}">
-            <i class="material-icons mdc-text-field__trailing-icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__icon mdc-text-field__icon--trailing" tabindex="0" role="button">event</i>
             <div class="mdc-notched-outline mdc-notched-outline--notched">
               <div class="mdc-notched-outline__leading"></div>
               <div class="mdc-notched-outline__notch">
diff --git a/test/screenshot/spec/mdc-textfield/classes/invalid-trailing-icon.html b/test/screenshot/spec/mdc-textfield/classes/invalid-trailing-icon.html
index c7ee88fa9ec..e520fc48e10 100644
--- a/test/screenshot/spec/mdc-textfield/classes/invalid-trailing-icon.html
+++ b/test/screenshot/spec/mdc-textfield/classes/invalid-trailing-icon.html
@@ -39,7 +39,7 @@
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--invalid mdc-text-field--with-trailing-icon">
             <input type="text" id="filled-text-field" class="mdc-text-field__input test-text-field__input" required pattern=".{4,8}">
-            <i class="material-icons mdc-text-field__trailing-icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__icon mdc-text-field__icon--trailing" tabindex="0" role="button">event</i>
             <label class="mdc-floating-label" for="filled-text-field">Label</label>
             <div class="mdc-line-ripple"></div>
           </div>
@@ -48,7 +48,7 @@
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--invalid mdc-text-field--with-trailing-icon">
             <input type="text" id="outlined-text-field" class="mdc-text-field__input test-text-field__input" required pattern=".{4,8}">
-            <i class="material-icons mdc-text-field__trailing-icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__icon mdc-text-field__icon--trailing" tabindex="0" role="button">event</i>
             <div class="mdc-notched-outline">
               <div class="mdc-notched-outline__leading"></div>
               <div class="mdc-notched-outline__notch">
@@ -62,7 +62,7 @@
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--invalid mdc-text-field--with-trailing-icon">
             <input type="text" id="filled-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" required pattern=".{4,8}">
-            <i class="material-icons mdc-text-field__trailing-icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__icon mdc-text-field__icon--trailing" tabindex="0" role="button">event</i>
             <label for="filled-text-field-with-value" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
             <div class="mdc-line-ripple"></div>
           </div>
@@ -71,7 +71,7 @@
         <div class="test-cell test-cell--textfield">
           <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--invalid mdc-text-field--with-trailing-icon">
             <input type="text" id="outlined-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" required pattern=".{4,8}">
-            <i class="material-icons mdc-text-field__trailing-icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__icon mdc-text-field__icon--trailing" tabindex="0" role="button">event</i>
             <div class="mdc-notched-outline mdc-notched-outline--notched">
               <div class="mdc-notched-outline__leading"></div>
               <div class="mdc-notched-outline__notch">
diff --git a/test/screenshot/spec/mdc-textfield/mixins/density-leading-icon-invalid.html b/test/screenshot/spec/mdc-textfield/mixins/density-leading-icon-invalid.html
index 6d30b9c35df..d706caeb898 100644
--- a/test/screenshot/spec/mdc-textfield/mixins/density-leading-icon-invalid.html
+++ b/test/screenshot/spec/mdc-textfield/mixins/density-leading-icon-invalid.html
@@ -37,7 +37,7 @@
 
       <div class="test-cell test-cell--light test-cell--textfield">
         <div class="mdc-text-field mdc-text-field--with-leading-icon mdc-text-field--invalid custom-density-text-field-leading-icon--default" data-native-input-validation="false">
-          <i class="material-icons mdc-text-field__leading-icon" tabindex="0" role="button">event</i>
+          <i class="material-icons mdc-text-field__icon mdc-text-field__icon--leading" tabindex="0" role="button">event</i>
           <input type="text" id="filled-text-field" class="mdc-text-field__input test-text-field__input">
           <label class="mdc-floating-label" for="filled-text-field">Label</label>
           <div class="mdc-line-ripple"></div>
@@ -47,7 +47,7 @@
       <div class="test-cell test-cell--light test-cell--textfield">
         <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon mdc-text-field--invalid custom-density-text-field-leading-icon--outlined"
             data-native-input-validation="false">
-          <i class="material-icons mdc-text-field__leading-icon" tabindex="0" role="button">event</i>
+          <i class="material-icons mdc-text-field__icon mdc-text-field__icon--leading" tabindex="0" role="button">event</i>
           <input type="text" id="outlined-text-field" class="mdc-text-field__input test-text-field__input">
           <div class="mdc-notched-outline">
             <div class="mdc-notched-outline__leading"></div>
@@ -61,7 +61,7 @@
 
       <div class="test-cell test-cell--light test-cell--textfield">
         <div class="mdc-text-field mdc-text-field--with-leading-icon mdc-text-field--invalid custom-density-text-field-leading-icon--default" data-native-input-validation="false">
-          <i class="material-icons mdc-text-field__leading-icon" tabindex="0" role="button">event</i>
+          <i class="material-icons mdc-text-field__icon mdc-text-field__icon--leading" tabindex="0" role="button">event</i>
           <input type="text" id="filled-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value">
           <label for="filled-text-field-with-value" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
           <div class="mdc-line-ripple"></div>
@@ -71,7 +71,7 @@
       <div class="test-cell test-cell--light test-cell--textfield">
         <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon mdc-text-field--invalid custom-density-text-field-leading-icon--outlined"
             data-native-input-validation="false">
-          <i class="material-icons mdc-text-field__leading-icon" tabindex="0" role="button">event</i>
+          <i class="material-icons mdc-text-field__icon mdc-text-field__icon--leading" tabindex="0" role="button">event</i>
           <input type="text" id="outlined-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value">
           <div class="mdc-notched-outline mdc-notched-outline--notched">
             <div class="mdc-notched-outline__leading"></div>
diff --git a/test/screenshot/spec/mdc-textfield/mixins/density-leading-icon.html b/test/screenshot/spec/mdc-textfield/mixins/density-leading-icon.html
index 5c7e8b99971..67bd9734c2e 100644
--- a/test/screenshot/spec/mdc-textfield/mixins/density-leading-icon.html
+++ b/test/screenshot/spec/mdc-textfield/mixins/density-leading-icon.html
@@ -37,7 +37,7 @@
 
       <div class="test-cell test-cell--light test-cell--textfield">
         <div class="mdc-text-field mdc-text-field--with-leading-icon custom-density-text-field-leading-icon--default">
-          <i class="material-icons mdc-text-field__leading-icon" tabindex="0" role="button">event</i>
+          <i class="material-icons mdc-text-field__icon mdc-text-field__icon--leading" tabindex="0" role="button">event</i>
           <input type="text" id="filled-text-field" class="mdc-text-field__input test-text-field__input">
           <label class="mdc-floating-label" for="filled-text-field">Label</label>
           <div class="mdc-line-ripple"></div>
@@ -46,7 +46,7 @@
 
       <div class="test-cell test-cell--light test-cell--textfield">
         <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon custom-density-text-field-leading-icon--outlined">
-          <i class="material-icons mdc-text-field__leading-icon" tabindex="0" role="button">event</i>
+          <i class="material-icons mdc-text-field__icon mdc-text-field__icon--leading" tabindex="0" role="button">event</i>
           <input type="text" id="outlined-text-field" class="mdc-text-field__input test-text-field__input">
           <div class="mdc-notched-outline">
             <div class="mdc-notched-outline__leading"></div>
@@ -60,7 +60,7 @@
 
       <div class="test-cell test-cell--light test-cell--textfield">
         <div class="mdc-text-field mdc-text-field--with-leading-icon custom-density-text-field-leading-icon--default">
-          <i class="material-icons mdc-text-field__leading-icon" tabindex="0" role="button">event</i>
+          <i class="material-icons mdc-text-field__icon mdc-text-field__icon--leading" tabindex="0" role="button">event</i>
           <input type="text" id="filled-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value">
           <label for="filled-text-field-with-value" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
           <div class="mdc-line-ripple"></div>
@@ -69,7 +69,7 @@
 
       <div class="test-cell test-cell--light test-cell--textfield">
         <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon custom-density-text-field-leading-icon--outlined">
-          <i class="material-icons mdc-text-field__leading-icon" tabindex="0" role="button">event</i>
+          <i class="material-icons mdc-text-field__icon mdc-text-field__icon--leading" tabindex="0" role="button">event</i>
           <input type="text" id="outlined-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value">
           <div class="mdc-notched-outline mdc-notched-outline--notched">
             <div class="mdc-notched-outline__leading"></div>
diff --git a/test/screenshot/spec/mdc-textfield/mixins/disabled-1.html b/test/screenshot/spec/mdc-textfield/mixins/disabled-1.html
index 40f9ace4ca0..775e1f0b6ae 100644
--- a/test/screenshot/spec/mdc-textfield/mixins/disabled-1.html
+++ b/test/screenshot/spec/mdc-textfield/mixins/disabled-1.html
@@ -270,7 +270,7 @@
 
         <div class="test-cell test-cell--light test-cell--textfield-small">
           <div class="mdc-text-field mdc-text-field--with-leading-icon mdc-text-field--disabled custom-disabled-colors-text-field--icon-color">
-            <i class="material-icons mdc-text-field__leading-icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__icon mdc-text-field__icon--leading" tabindex="0" role="button">event</i>
             <input type="text" id="filled-text-field--icon-color" class="mdc-text-field__input test-text-field__input" disabled>
             <label class="mdc-floating-label" for="filled-text-field--icon-color">Label</label>
             <div class="mdc-line-ripple"></div>
@@ -279,7 +279,7 @@
 
         <div class="test-cell test-cell--light test-cell--textfield-small">
           <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon mdc-text-field--disabled custom-disabled-colors-text-field--icon-color">
-            <i class="material-icons mdc-text-field__leading-icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__icon mdc-text-field__icon--leading" tabindex="0" role="button">event</i>
             <input type="text" id="outlined-text-field--icon-color" class="mdc-text-field__input test-text-field__input" disabled>
             <div class="mdc-notched-outline">
               <div class="mdc-notched-outline__leading"></div>
@@ -293,7 +293,7 @@
 
         <div class="test-cell test-cell--light test-cell--textfield-small">
           <div class="mdc-text-field mdc-text-field--with-leading-icon mdc-text-field--disabled custom-disabled-colors-text-field--icon-color">
-            <i class="material-icons mdc-text-field__leading-icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__icon mdc-text-field__icon--leading" tabindex="0" role="button">event</i>
             <input type="text" id="filled-text-field-with-value--icon-color" class="mdc-text-field__input test-text-field__input" value="Filled value" disabled>
             <label for="filled-text-field-with-value--icon-color" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
             <div class="mdc-line-ripple"></div>
@@ -302,7 +302,7 @@
 
         <div class="test-cell test-cell--light test-cell--textfield-small">
           <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon mdc-text-field--disabled custom-disabled-colors-text-field--icon-color">
-            <i class="material-icons mdc-text-field__leading-icon" tabindex="0" role="button">event</i>
+            <i class="material-icons mdc-text-field__icon mdc-text-field__icon--leading" tabindex="0" role="button">event</i>
             <input type="text" id="outlined-text-field-with-value--icon-color" class="mdc-text-field__input test-text-field__input" value="Filled value" disabled>
             <div class="mdc-notched-outline mdc-notched-outline--notched">
               <div class="mdc-notched-outline__leading"></div>
diff --git a/test/unit/mdc-textfield/mdc-text-field-icon.test.js b/test/unit/mdc-textfield/mdc-text-field-icon.test.js
index 45781a653df..617545bcff4 100644
--- a/test/unit/mdc-textfield/mdc-text-field-icon.test.js
+++ b/test/unit/mdc-textfield/mdc-text-field-icon.test.js
@@ -29,7 +29,7 @@ import domEvents from 'dom-events';
 import {MDCTextFieldIcon, MDCTextFieldIconFoundation} from '../../../packages/mdc-textfield/icon/index';
 
 const getFixture = () => bel`
-  <div class="mdc-text-field__leading-icon"></div>
+  <div class="mdc-text-field__icon mdc-text-field__icon--leading"></div>
 `;
 
 suite('MDCTextFieldIcon');

From 3cf74a5e9c1a3b70211bcc451885d59c1c29dd0f Mon Sep 17 00:00:00 2001
From: Liz Mitchell <lizmitchell@google.com>
Date: Mon, 23 Dec 2019 10:22:15 -0800
Subject: [PATCH 3/9] chore(textfield): docs typo

---
 packages/mdc-textfield/icon/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mdc-textfield/icon/README.md b/packages/mdc-textfield/icon/README.md
index 77fcc766721..617724ef8de 100644
--- a/packages/mdc-textfield/icon/README.md
+++ b/packages/mdc-textfield/icon/README.md
@@ -55,7 +55,7 @@ const icon = new MDCTextFieldIcon(document.querySelector('.mdc-text-field-icon')
 
 ## Variants
 
-Leading and trailing icons can be applied to default or `mdc-text-field--outlined` Text Fields. To add an icon, add the relevant class (`mdc-text-field--with-leading-icon` and/or `mdc-text-field--with-trailing-icon`) to the root element, add an `i` element with your preferred icon, and give it a class of `mdc-text-field__icon` with the modifier`mdc-text-field__icon--leading` or `mdc-text-field__icon--trailing`.
+Leading and trailing icons can be applied to default or `mdc-text-field--outlined` Text Fields. To add an icon, add the relevant class (`mdc-text-field--with-leading-icon` and/or `mdc-text-field--with-trailing-icon`) to the root element, add an `i` element with your preferred icon, and give it a class of `mdc-text-field__icon` with the modifier `mdc-text-field__icon--leading` or `mdc-text-field__icon--trailing`.
 
 > **NOTE:** if you would like to display un-clickable icons, simply omit `tabindex="0"` and `role="button"`, and the CSS will ensure the cursor is set to default, and that interacting with an icon doesn't do anything unexpected.
 

From f9f135beb567201d68d6186d46be07d2a3ee1154 Mon Sep 17 00:00:00 2001
From: Liz Mitchell <lizmitchell@google.com>
Date: Mon, 6 Jan 2020 09:31:08 -0600
Subject: [PATCH 4/9] chore(textfield): revert hover fix

---
 packages/mdc-textfield/_mixins.scss | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/mdc-textfield/_mixins.scss b/packages/mdc-textfield/_mixins.scss
index 6ff20a3df5d..0ea0256040d 100644
--- a/packages/mdc-textfield/_mixins.scss
+++ b/packages/mdc-textfield/_mixins.scss
@@ -602,10 +602,13 @@
 }
 
 @mixin mdc-text-field-hover-outline-color_($color) {
-  &:not(.mdc-text-field--focused):hover {
-    .mdc-notched-outline {
-      @include mdc-notched-outline-color($color);
-    }
+  &:not(.mdc-text-field--focused) {
+    // stylelint-disable-next-line selector-combinator-space-after
+    .mdc-text-field__input:hover ~,
+    .mdc-text-field__icon:hover ~ {
+      .mdc-notched-outline {
+        @include mdc-notched-outline-color($color);
+      }
   }
 }
 

From 32b91d7ab57e5afce758f382f1178c5e0442bc4b Mon Sep 17 00:00:00 2001
From: Liz Mitchell <lizmitchell@google.com>
Date: Mon, 6 Jan 2020 09:40:16 -0600
Subject: [PATCH 5/9] chore(textfield): fix unclosed css block

---
 packages/mdc-textfield/_mixins.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/mdc-textfield/_mixins.scss b/packages/mdc-textfield/_mixins.scss
index 0ea0256040d..a8bf2a46e7f 100644
--- a/packages/mdc-textfield/_mixins.scss
+++ b/packages/mdc-textfield/_mixins.scss
@@ -609,6 +609,7 @@
       .mdc-notched-outline {
         @include mdc-notched-outline-color($color);
       }
+    }
   }
 }
 

From 4b5969ad4d2212c006700511913185f8caed73c0 Mon Sep 17 00:00:00 2001
From: Liz Mitchell <lizmitchell@google.com>
Date: Mon, 6 Jan 2020 10:54:53 -0600
Subject: [PATCH 6/9] chore(textfield): separate position mixins for
 leading/trailing icons

---
 packages/mdc-textfield/_mixins.scss      | 40 ++++--------------------
 packages/mdc-textfield/icon/_mixins.scss | 20 +++---------
 2 files changed, 11 insertions(+), 49 deletions(-)

diff --git a/packages/mdc-textfield/_mixins.scss b/packages/mdc-textfield/_mixins.scss
index a8bf2a46e7f..c90a008edcc 100644
--- a/packages/mdc-textfield/_mixins.scss
+++ b/packages/mdc-textfield/_mixins.scss
@@ -622,10 +622,7 @@
 // Icons
 
 @mixin mdc-text-field-with-leading-icon_ {
-  @include mdc-text-field-icon-horizontal-position_(
-    left,
-    $mdc-text-field-icon-position
-  );
+  @include mdc-text-field-leading-icon-horizontal-position_($mdc-text-field-icon-position);
 
   .mdc-text-field__input {
     @include mdc-rtl-reflexive-property(padding, $mdc-text-field-icon-padding, $mdc-text-field-input-padding);
@@ -637,10 +634,7 @@
 }
 
 @mixin mdc-text-field-dense-with-leading-icon_ {
-  @include mdc-text-field-icon-horizontal-position_(
-    left,
-    $mdc-text-field-dense-icon-position
-  );
+  @include mdc-text-field-leading-icon-horizontal-position_($mdc-text-field-dense-icon-position);
 
   .mdc-text-field__input {
     @include mdc-rtl-reflexive-property(padding, $mdc-text-field-dense-icon-padding, $mdc-text-field-input-padding);
@@ -652,10 +646,7 @@
 }
 
 @mixin mdc-text-field-outlined-with-leading-icon_ {
-  @include mdc-text-field-icon-horizontal-position_(
-    left,
-    $mdc-text-field-icon-position
-  );
+  @include mdc-text-field-leading-icon-horizontal-position_($mdc-text-field-icon-position);
   @include mdc-notched-outline-floating-label-float-position-absolute($mdc-text-field-outlined-label-position-y, 32px);
   @include mdc-floating-label-shake-animation(text-field-outlined-leading-icon);
 
@@ -686,10 +677,7 @@
 }
 
 @mixin mdc-text-field-with-trailing-icon_ {
-  @include mdc-text-field-icon-horizontal-position_(
-    right,
-    $mdc-text-field-trailing-icon-position
-  );
+  @include mdc-text-field-trailing-icon-horizontal-position_($mdc-text-field-trailing-icon-position);
 
   .mdc-text-field__input {
     @include mdc-rtl-reflexive-property(padding, $mdc-text-field-input-padding, $mdc-text-field-icon-padding);
@@ -697,18 +685,12 @@
 
   // Outlined uses 16px for text alignment when using a trailing icon.
   &.mdc-text-field--outlined {
-    @include mdc-text-field-icon-horizontal-position_(
-      right,
-      $mdc-text-field-icon-position
-    );
+    @include mdc-text-field-trailing-icon-horizontal-position_($mdc-text-field-icon-position);
   }
 }
 
 @mixin mdc-text-field-dense-with-trailing-icon_ {
-  @include mdc-text-field-icon-horizontal-position_(
-    right,
-    $mdc-text-field-dense-icon-position
-  );
+  @include mdc-text-field-trailing-icon-horizontal-position_($mdc-text-field-dense-icon-position);
 
   .mdc-text-field__input {
     @include mdc-rtl-reflexive-property(padding, $mdc-text-field-input-padding, $mdc-text-field-dense-icon-padding);
@@ -716,11 +698,6 @@
 }
 
 @mixin mdc-text-field-with-both-icons_ {
-  @include mdc-text-field-icon-horizontal-position-two-icons_(
-    $mdc-text-field-icon-position,
-    $mdc-text-field-trailing-icon-position
-  );
-
   .mdc-text-field__input {
     padding-right: $mdc-text-field-icon-padding;
     padding-left: $mdc-text-field-icon-padding;
@@ -728,11 +705,6 @@
 }
 
 @mixin mdc-text-field-dense-with-both-icons_ {
-  @include mdc-text-field-icon-horizontal-position-two-icons_(
-    $mdc-text-field-dense-icon-position,
-    $mdc-text-field-dense-icon-position
-  );
-
   .mdc-text-field__input {
     padding-right: $mdc-text-field-dense-icon-padding;
     padding-left: $mdc-text-field-dense-icon-padding;
diff --git a/packages/mdc-textfield/icon/_mixins.scss b/packages/mdc-textfield/icon/_mixins.scss
index c9ab1e3073c..1c052341556 100644
--- a/packages/mdc-textfield/icon/_mixins.scss
+++ b/packages/mdc-textfield/icon/_mixins.scss
@@ -59,25 +59,15 @@
 
 // Private mixins
 
-@mixin mdc-text-field-icon-horizontal-position_($position-property, $position) {
-  @if ($position-property == left) {
-    .mdc-text-field__icon--leading {
-      @include mdc-rtl-reflexive-position($position-property, $position);
-    }
-  } @else {
-    .mdc-text-field__icon--trailing {
-      @include mdc-rtl-reflexive-position($position-property, $position);
-    }
-  }
-}
-
-@mixin mdc-text-field-icon-horizontal-position-two-icons_($position-left, $position-right) {
+@mixin mdc-text-field-leading-icon-horizontal-position_($position) {
   .mdc-text-field__icon--leading {
-    @include mdc-rtl-reflexive(left, $position-left, right, auto);
+    @include mdc-rtl-reflexive-position(left, $position);
   }
+}
 
+@mixin mdc-text-field-trailing-icon-horizontal-position_($position) {
   .mdc-text-field__icon--trailing {
-    @include mdc-rtl-reflexive(right, $position-right, left, auto);
+    @include mdc-rtl-reflexive-position(right, $position);
   }
 }
 

From 1988a4af4844682ae9d04112225cade2b96a4749 Mon Sep 17 00:00:00 2001
From: Liz Mitchell <lizmitchell@google.com>
Date: Mon, 6 Jan 2020 14:07:11 -0600
Subject: [PATCH 7/9] chore(textfield): restore two-icons position mixin

---
 packages/mdc-textfield/_mixins.scss      | 10 ++++++++++
 packages/mdc-textfield/icon/_mixins.scss |  5 +++++
 2 files changed, 15 insertions(+)

diff --git a/packages/mdc-textfield/_mixins.scss b/packages/mdc-textfield/_mixins.scss
index c90a008edcc..fefa3121db5 100644
--- a/packages/mdc-textfield/_mixins.scss
+++ b/packages/mdc-textfield/_mixins.scss
@@ -698,6 +698,11 @@
 }
 
 @mixin mdc-text-field-with-both-icons_ {
+  @include mdc-text-field-icon-horizontal-position-two-icons_(
+    $mdc-text-field-icon-position,
+    $mdc-text-field-trailing-icon-position
+  );
+
   .mdc-text-field__input {
     padding-right: $mdc-text-field-icon-padding;
     padding-left: $mdc-text-field-icon-padding;
@@ -705,6 +710,11 @@
 }
 
 @mixin mdc-text-field-dense-with-both-icons_ {
+  @include mdc-text-field-icon-horizontal-position-two-icons_(
+    $mdc-text-field-dense-icon-position,
+    $mdc-text-field-dense-icon-position
+  );
+
   .mdc-text-field__input {
     padding-right: $mdc-text-field-dense-icon-padding;
     padding-left: $mdc-text-field-dense-icon-padding;
diff --git a/packages/mdc-textfield/icon/_mixins.scss b/packages/mdc-textfield/icon/_mixins.scss
index 1c052341556..52fd6128553 100644
--- a/packages/mdc-textfield/icon/_mixins.scss
+++ b/packages/mdc-textfield/icon/_mixins.scss
@@ -71,6 +71,11 @@
   }
 }
 
+@mixin mdc-text-field-icon-horizontal-position-two-icons_($position-left, $position-right) {
+  @include mdc-text-field-leading-icon-horizontal-position_($position-left);
+  @include mdc-text-field-trailing-icon-horizontal-position_($position-right);
+}
+
 @mixin mdc-text-field-icon_ {
   position: absolute;
   top: 50%;

From a3c5534e8d20b170ad1cfa607451fff59c7cf55c Mon Sep 17 00:00:00 2001
From: Liz Mitchell <lizmitchell@google.com>
Date: Wed, 8 Jan 2020 13:59:34 -0600
Subject: [PATCH 8/9] chore(textfield): update component test with icon classes

---
 packages/mdc-textfield/test/component.test.ts | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/packages/mdc-textfield/test/component.test.ts b/packages/mdc-textfield/test/component.test.ts
index 38ed69926d2..1b4bb932efc 100644
--- a/packages/mdc-textfield/test/component.test.ts
+++ b/packages/mdc-textfield/test/component.test.ts
@@ -37,7 +37,7 @@ const getFixture = () => {
   const wrapper = document.createElement('div');
   wrapper.innerHTML = `
     <div class="mdc-text-field mdc-text-field--with-leading-icon">
-      <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
+      <i class="material-icons mdc-text-field__icon mdc-text-field__icon--leading" tabindex="0" role="button">event</i>
       <input type="text" class="mdc-text-field__input" id="my-text-field">
       <label class="mdc-floating-label" for="my-text-field">My Label</label>
       <div class="mdc-line-ripple"></div>
@@ -220,7 +220,7 @@ describe('MDCTextField', () => {
 
        const wrapper = document.createElement('div');
        wrapper.innerHTML =
-           `<i class="mdc-text-field__icon material-icons">3d_rotations</i>`;
+           `<i class="mdc-text-field__icon mdc-text-field__icon--trailing material-icons">3d_rotations</i>`;
        const el = wrapper.firstElementChild as HTMLElement;
        wrapper.removeChild(el);
        root.appendChild(el);
@@ -232,9 +232,13 @@ describe('MDCTextField', () => {
 
   it('#constructor instantiates a trailing icon if the icon is present', () => {
     const root = getFixture();
-    const icon = root.querySelector('.mdc-text-field__icon');
-    root.removeChild(icon as HTMLElement);
-    root.appendChild(icon as HTMLElement);
+    const leadingIcon = root.querySelector('.mdc-text-field__icon');
+    root.removeChild(leadingIcon as HTMLElement);
+    const wrapper = document.createElement('div');
+    wrapper.innerHTML =
+        `<i class="mdc-text-field__icon mdc-text-field__icon--trailing material-icons">3d_rotations</i>`;
+    const trailingIcon = wrapper.firstElementChild as HTMLElement;
+    root.appendChild(trailingIcon);
     root.classList.add('mdc-text-field--with-trailing-icon');
     root.classList.remove('mdc-text-field--with-leading-icon');
     const component = new MDCTextField(root);
@@ -444,7 +448,7 @@ describe('MDCTextField', () => {
 
     const wrapper = document.createElement('div');
     wrapper.innerHTML =
-        `<i class="mdc-text-field__icon material-icons">3d_rotations</i>`;
+        `<i class="mdc-text-field__icon mdc-text-field__icon--trailing material-icons">3d_rotations</i>`;
     const child = wrapper.firstElementChild as HTMLElement;
     wrapper.removeChild(child);
     root.appendChild(child);

From e761a87c53f588ed5b9d628d24a3bda7e375d884 Mon Sep 17 00:00:00 2001
From: Liz Mitchell <lizmitchell@google.com>
Date: Wed, 8 Jan 2020 14:01:40 -0600
Subject: [PATCH 9/9] chore(textfield): update foundation test for
 preventDefault error

---
 packages/mdc-textfield/icon/test/foundation.test.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/mdc-textfield/icon/test/foundation.test.ts b/packages/mdc-textfield/icon/test/foundation.test.ts
index d6a99844f9a..5dfcac1c494 100644
--- a/packages/mdc-textfield/icon/test/foundation.test.ts
+++ b/packages/mdc-textfield/icon/test/foundation.test.ts
@@ -148,6 +148,7 @@ describe('MDCTextFieldIconFoundation', () => {
     const evt = {
       target: {},
       type: 'click',
+      preventDefault: () => {}
     };
     let click: Function|undefined;