fix(input): make all icons in input containers the correct size (#3489)

* fix(input): make all icons in input containers the correct size * docs(input): add icon prefix/suffix example
angular · Mar 10, 2017 · 359c9bb · 359c9bb
1 parent 23ee633
commit 359c9bb
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 25 deletions.
diff --git a/src/demo-app/baseline/baseline-demo.scss b/src/demo-app/baseline/baseline-demo.scss
@@ -9,13 +9,6 @@
   width: 100%;
 }
 
-.demo-icons {
-  font-size: 100%;
-  height: inherit;
-  vertical-align: top;
-  width: inherit;
-}
-
 .demo-card {
   margin: 16px;
 }
diff --git a/src/demo-app/input/input-demo.html b/src/demo-app/input/input-demo.html
@@ -40,7 +40,10 @@
         <td>
           <md-input-container class="demo-full-width">
             <input mdInput #postalCode maxLength="5" placeholder="Postal Code" value="94043">
-            <md-hint align="end">{{postalCode.value.length}} / 5</md-hint>
+            <md-hint align="end">
+              <md-icon>mode_edit</md-icon>
+              {{postalCode.value.length}} / 5
+            </md-hint>
           </md-input-container>
         </td>
       </tr></table>
@@ -51,11 +54,19 @@
 <md-card class="demo-card demo-basic">
   <md-toolbar color="primary">Prefix + Suffix</md-toolbar>
   <md-card-content>
+    <h4>Text</h4>
     <md-input-container align="end">
       <input mdInput placeholder="amount">
       <span mdPrefix>$&nbsp;</span>
       <span mdSuffix>.00</span>
     </md-input-container>
+
+    <h4>Icons</h4>
+    <md-input-container>
+      <input mdInput placeholder="amount">
+      <md-icon mdPrefix>attach_money</md-icon>
+      <md-icon mdSuffix>mode_edit</md-icon>
+    </md-input-container>
   </md-card-content>
 </md-card>
 
@@ -152,10 +163,10 @@ <h4>Textarea</h4>
       <md-input-container>
         <input mdInput>
         <md-placeholder>
-          I <md-icon class="demo-icons">favorite</md-icon> <b>bold</b> placeholder
+          I <md-icon>favorite</md-icon> <b>bold</b> placeholder
         </md-placeholder>
         <md-hint>
-          I also <md-icon class="demo-icons">home</md-icon> <i>italic</i> hint labels
+          I also <md-icon>home</md-icon> <i>italic</i> hint labels
         </md-hint>
       </md-input-container>
     </p>

diff --git a/src/demo-app/input/input-demo.scss b/src/demo-app/input/input-demo.scss
@@ -8,13 +8,6 @@
   width: 100%;
 }
 
-.demo-icons {
-  font-size: 100%;
-  height: inherit;
-  vertical-align: top;
-  width: inherit;
-}
-
 .demo-card {
   margin: 16px;
 }

diff --git a/src/lib/input/input-container.scss b/src/lib/input/input-container.scss
@@ -27,6 +27,14 @@ $mat-input-underline-disabled-background-image:
   [dir='rtl'] & {
     text-align: right;
   }
+
+  // Allow icons in a prefix/suffix/hint/etc to adapt to the correct size.
+  & .mat-icon {
+    width: auto;
+    height: auto;
+    font-size: 100%;
+    vertical-align: top;
+  }
 }
 
 // Global wrapper. We need to apply margin to the element for spacing, but
@@ -238,12 +246,4 @@ $mat-input-underline-disabled-background-image:
   // 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;
-  }
 }