fix(input): improve layout when md-input-container has nested md-icon.

Fixes #2452.

src/components/input/demoIcons/index.html

@@ -2,22 +2,30 @@
 
   <br/>
   <md-content layout-padding>
-    <md-input-container md-no-float>
+
+    <md-input-container class="md-icon-float" >
+      <!-- Use floating label instead of placeholder -->
+      <label>Name</label>
       <md-icon md-svg-src="/demo-partials/input/demoIcons/icons/ic_person_24px.svg" class="name"></md-icon>
-      <input ng-model="user.name" type="text" placeholder="Name">
+      <input ng-model="user.name" type="text">
     </md-input-container>
+
     <md-input-container md-no-float>
       <md-icon md-svg-src="/demo-partials/input/demoIcons/icons/ic_phone_24px.svg"></md-icon>
       <input ng-model="user.phone" type="text" placeholder="Phone Number">
     </md-input-container>
-    <md-input-container md-no-float>
+
+    <md-input-container >
+      <!-- Use floating placeholder instead of label -->
       <md-icon md-svg-src="/demo-partials/input/demoIcons/icons/ic_email_24px.svg" class="email"></md-icon>
       <input ng-model="user.email" type="email" placeholder="Email (required)" ng-required="true">
     </md-input-container>
+
     <md-input-container md-no-float>
-      <md-icon md-svg-src="/demo-partials/input/demoIcons/icons/ic_place_24px.svg"></md-icon>
-      <input ng-model="user.address" type="text" placeholder="Address">
+      <md-icon md-svg-src="/demo-partials/input/demoIcons/icons/ic_place_24px.svg" style="display:inline-block;"></md-icon>
+      <input ng-model="user.address" type="text" placeholder="Address" >
     </md-input-container>
+
   </md-content>
 
 </div>

src/components/input/input.js

@@ -330,6 +330,7 @@ function placeholderDirective() {
   return {
     restrict: 'A',
     require: '^^?mdInputContainer',
+    priority:200,
     link: postLink
   };
 
@@ -340,9 +341,11 @@ function placeholderDirective() {
     var placeholderText = attr.placeholder;
     element.removeAttr('placeholder');
 
-    var placeholder = '<div class="md-placeholder" ng-click="delegateClick()">' +
-                       placeholderText + '</div>';
-    inputContainer.element.append(placeholder);
+    var placeholder = '<label ng-click="delegateClick()">' + placeholderText + '</label>';
+
+    inputContainer.element.addClass('md-icon-float');
+    inputContainer.element.prepend(placeholder);
+
   }
 }
 

src/components/input/input.scss

@@ -15,6 +15,8 @@ $input-padding-top: 2px !default;
 $input-error-font-size: 12px !default;
 $input-error-height: 24px !default;
 
+$icon-offset : 36px !default;
+
 md-input-container {
   display: flex;
   position: relative;
@@ -29,7 +31,7 @@ md-input-container {
     top: 5px;
     left: 2px;
     + input {
-      margin-left: 28px * 2;
+          margin-left: $icon-offset;
     }
   }
 
@@ -162,8 +164,12 @@ md-input-container {
 
   &.md-input-focused,
   &.md-input-has-value {
-    label:not(.md-no-float) {
+    label:not(.md-no-float)  {
       transform: translate3d(0,$input-label-float-offset,0) scale($input-label-float-scale);
+
+      &.md-icon-float {
+        transform: translate3d(0,$input-label-float-offset,0) scale($input-label-float-scale);
+      }
     }
   }
 
@@ -186,6 +192,42 @@ md-input-container {
   }
 }
 
+md-input-container.md-icon-float {
+
+  margin-top : -16px;
+  transition : margin-top 0.5s $swift-ease-out-timing-function ;
+
+
+  > label  {
+      pointer-events:none;
+      position:absolute;
+      margin-left: $icon-offset;
+  }
+
+  > md-icon {
+    top: 26px;
+    left: 2px;
+    + input {
+          margin-left: $icon-offset;
+    }
+  }
+
+  > input {
+    padding-top : $input-line-height - $input-container-padding;
+  }
+
+  &.md-input-focused,
+  &.md-input-has-value {
+
+    margin-top:-8px;
+
+    label {
+        transform: translate3d(0,$input-label-float-offset,0) scale($input-label-float-scale);
+        transition: transform $swift-ease-out-timing-function 0.5s;
+      }
+  }
+
+}
 
 @media screen and (-ms-high-contrast: active) {
   md-input-container.md-default-theme > md-icon {