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

Author: mmalerba

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>
 

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;
+  }
 }