Materail Design Lite - How to put inline icon in form - icons

Question

I want put in the same line of the field the face icon. The code is this:
<i class="material-icons">face</i>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="sample3">
<label class="mdl-textfield__label" for="sample3">Text...</label>
</div>
and the result is this:
How to put in the same line the icon and the field?
Thanks

Answer 1

Using Email Address / Email Icon as example.
HTML
Add the icon as a child element of the textfield
<div class=
"mdl-textfield mdl-js-textfield mdl-textfield--floating-label is-upgraded"
data-upgraded=",MaterialTextfield">
<input class="mdl-textfield__input" id="textfield-EmailAddress" type=
"email">
<label class="mdl-textfield__label" for=
"textfield-EmailAddress">Email Address</label>
<span class="mdl-textfield__error">Please Enter Valid Email Address</span>
<i class="material-icons mdl-textfield__label__icon">mail</i>
</div>
CSS
.mdl-textfield__label__icon {
position: absolute;
right: 0;
top: 20px;
}
Required Resources
You need to load both the MDL CSS and the Material Design Icons
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css">
MDL JS will help with dynamic behavior
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script defer src="https://code.getmdl.io/1.1.3/material.min.js"> </script>
For Example you can have your icon turn the same 'active' color as your input when focused
.mdl-textfield.is-focused .mdl-textfield__label__icon, .mdl-textfield.is-invalid.is-focused .mdl-textfield__label__icon {
color: rgb(63,81,181);
}
If you want the icon to be left-aligned you could adjust CSS above, but also need to adjust padding on the input to ensure that the input's text does not collide with the icon. Still possible with solution above, but with icon being right aligned its not as likely to happen

Answer 2

There's a solution by Jeremy Fily for left-aligned text-field icons.
The solution also includes js to colour the field and icon according to whether it's selected, but the part that inlines the icon to the left is this css
.mdl-textfield__icon {
width: 32px;
text-align: center;
position: absolute;
line-height: 1.5;
}
.mdl-textfield__icon ~ * {
margin-left: 48px;
width: calc(100% - 48px);
}