feat(input): Add right-side icon to input container

Fixes #4763. Closes #4808.
angular · Oct 6, 2015 · d49d8dc · d49d8dc
1 parent dd90be8
commit d49d8dc
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 2 deletions.
diff --git a/docs/app/img/icons/ic_card_giftcard_24px.svg b/docs/app/img/icons/ic_card_giftcard_24px.svg
diff --git a/docs/app/img/icons/ic_euro_24px.svg b/docs/app/img/icons/ic_euro_24px.svg
diff --git a/src/components/input/demoIcons/index.html b/src/components/input/demoIcons/index.html
@@ -3,7 +3,7 @@
   <br/>
   <md-content layout-padding class="autoScroll">
 
-    <md-input-container class="md-icon-float" >
+    <md-input-container class="md-icon-float">
       <!-- Use floating label instead of placeholder -->
       <label>Name</label>
       <md-icon md-svg-src="img/icons/ic_person_24px.svg" class="name"></md-icon>
@@ -26,6 +26,13 @@
       <input ng-model="user.address" type="text" placeholder="Address" >
     </md-input-container>
 
+    <md-input-container class="md-icon-float md-icon-right">
+      <label>Donation Amount</label>
+      <md-icon md-svg-src="img/icons/ic_card_giftcard_24px.svg"></md-icon>
+      <input ng-model="user.donation" type="number" step="0.01">
+      <md-icon md-svg-src="img/icons/ic_euro_24px.svg"></md-icon>
+    </md-input-container>
+
   </md-content>
 
 </div>
diff --git a/src/components/input/demoIcons/script.js b/src/components/input/demoIcons/script.js
@@ -5,6 +5,7 @@ angular
       name: 'John Doe',
       email: '',
       phone: '',
-      address: 'Mountain View, CA'
+      address: 'Mountain View, CA',
+      donation: 19.99
     };
   });
diff --git a/src/components/input/input.scss b/src/components/input/input.scss
@@ -308,6 +308,17 @@ md-input-container.md-icon-float {
 
 }
 
+md-input-container.md-icon-right {
+  input {
+    margin-right: $icon-offset;
+    + md-icon {
+      top: 26px;
+      right: 2px;
+      margin-right: 0;
+    }
+  }
+}
+
 @media screen and (-ms-high-contrast: active) {
   md-input-container.md-default-theme > md-icon {
     fill: #fff;