fix(input): make icons in prefix/suffix the right size (angular#3342)

crisbeto · Mar 4, 2017 · 63d4359 · 63d4359
1 parent be167c9
commit 63d4359
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 8 deletions.
diff --git 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
@@ -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;
+  }
 }