docs(input): adds icon example to input demo page

Author: Robert Messerle

src/components/input/demoIcons/icons/ic_email_24px.svg

@@ -0,0 +1,23 @@
+<div ng-app="inputIconDemo" ng-controller="DemoCtrl" layout="column">
+
+  <br/>
+  <md-content class="md-padding">
+    <md-input-container md-no-float>
+      <md-icon md-svg-src="/demo-partials/input/demoIcons/icons/ic_person_24px.svg"></md-icon>
+      <input ng-model="user.name" type="text" placeholder="Name">
+    </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-icon md-svg-src="/demo-partials/input/demoIcons/icons/ic_email_24px.svg"></md-icon>
+      <input ng-model="user.email" type="email" placeholder="Email">
+    </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-input-container>
+  </md-content>
+
+</div>

src/components/input/demoIcons/icons/ic_person_24px.svg

@@ -0,0 +1,10 @@
+angular
+  .module('inputIconDemo', ['ngMaterial', 'ngMessages'])
+  .controller('DemoCtrl', function($scope) {
+    $scope.user = {
+      name: 'John Doe',
+      email: '[email protected]',
+      phone: '',
+      address: ''
+    };
+  });

src/components/input/demoIcons/icons/ic_phone_24px.svg

@@ -0,0 +1,3 @@
+.inputIconDemo {
+  min-height:48px;
+}

src/components/input/demoIcons/icons/ic_place_24px.svg

@@ -6,6 +6,10 @@ md-input-container.md-THEME_NAME-theme {
     text-shadow: '{{foreground-shadow}}';
   }
 
+  > md-icon {
+    fill: '{{foreground-1}}';
+  }
+
   label,
   .md-placeholder {
     text-shadow: '{{foreground-shadow}}';
@@ -26,6 +30,9 @@ md-input-container.md-THEME_NAME-theme {
       label {
         color: '{{primary-500}}';
       }
+      md-icon {
+        fill: '{{primary-500}}';
+      }
       &.md-accent {
         .md-input {
           border-color: '{{accent-500}}';

src/components/input/demoIcons/index.html

@@ -29,6 +29,7 @@ angular.module('material.components.input', [
  * parent is provided.
  *
  * @param md-is-error {expression=} When the given expression evaluates to true, the input container will go into error state. Defaults to erroring if the input has been touched and is invalid.
+ * @param md-no-float {boolean=} When present, placeholders will not be converted to floating labels
  *
  * @usage
  * <hljs lang="html">
@@ -319,6 +320,7 @@ function placeholderDirective() {
 
   function postLink(scope, element, attr, inputContainer) {
     if (!inputContainer) return;
+    if (angular.isDefined(inputContainer.element.attr('md-no-float'))) return;
 
     var placeholderText = attr.placeholder;
     element.removeAttr('placeholder');

src/components/input/demoIcons/script.js

@@ -24,6 +24,14 @@ md-input-container {
   padding: $input-container-padding;
   padding-bottom: $input-container-padding + $input-error-height;
 
+  > md-icon {
+    position: absolute;
+    top: 5px;
+    left: 2px;
+    + input {
+      margin-left: 28px * 2;
+    }
+  }
 
   textarea,
   input[type="text"],