From 63d4359fcaa2e7f2a5124ebcdf824dd2964adf66 Mon Sep 17 00:00:00 2001
From: mmalerba <mmalerba@google.com>
Date: Fri, 3 Mar 2017 18:32:02 -0800
Subject: [PATCH] fix(input): make icons in prefix/suffix the right size
 (#3342)

---
 src/demo-app/input/input-demo.html |  9 ++-------
 src/lib/input/input-container.scss | 10 +++++++++-
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/demo-app/input/input-demo.html b/src/demo-app/input/input-demo.html
index d73c0cbb0aa6..b42834fc114f 100644
--- a/src/demo-app/input/input-demo.html
+++ b/src/demo-app/input/input-demo.html
@@ -206,13 +206,8 @@ <h4>Textarea</h4>
       Both:
       <md-input-container align="end">
         <input mdInput #email placeholder="Email Address" value="angular-core">
-        <span mdPrefix>
-          <md-icon [class.primary]="email.focused" class="demo-icons demo-transform">email</md-icon>
-          &nbsp;
-        </span>
-        <span mdSuffix class="demo-transform" [class.primary]="email.focused">
-          &nbsp;@gmail.com
-        </span>
+        <span mdPrefix><md-icon [class.primary]="email.focused">email</md-icon>&nbsp;</span>
+        <span mdSuffix [class.primary]="email.focused">&nbsp;@gmail.com</span>
       </md-input-container>
     </p>
 
diff --git a/src/lib/input/input-container.scss b/src/lib/input/input-container.scss
index 4f8fc4f17659..134a05e9df1f 100644
--- a/src/lib/input/input-container.scss
+++ b/src/lib/input/input-container.scss
@@ -234,8 +234,16 @@ $mat-input-underline-disabled-background-image:
   }
 }
 
-// Prevents the prefix and suffix from stretching together with the container.
 .mat-input-prefix, .mat-input-suffix {
+  // Prevents the prefix and suffix from stretching together with the container.
   width: 0.1px;
   white-space: nowrap;
+
+  // Allow icons in a prefix/suffix to adapt to the correct size.
+  & .mat-icon {
+    width: auto;
+    height: auto;
+    font-size: 100%;
+    vertical-align: top;
+  }
 }