角度素材1のように入力の横にmdアイコンを追加するにはどうすればよいですか？

Question

どのように私は1角度材料のように入力し、Googleの連絡先から、このスクリーンショットの隣にMD-アイコン要素を追加することができます：私はmdPrefixを使用することができます知っている

Googleの連絡先の編集フォーム

を私はこのスタイルがより好きです。

コード例：

<md-input-container> 
<md-icon mdPrefix>star</md-icon> 
<input placeholder="Test" mdInput /> 
</md-input-container> 

入力フィールド内のアイコンと私はそれがその横になりたい：

Answer 1

は、いくつかのCSSのトリックを使用して、私はできmakeがしました提供されたスクリーンショットに近いもの。位置アイコンに

CSS：

/deep/ .mat-icon { 
    color: grey; 
    width: 24px; 
    margin: 20px 40px 0 0; 
} 

HTML：

<div style="display: flex"> 
    <md-icon >email</md-icon> 
    <md-input-container > 
    <input mdInput placeholder="Email"> 
    </md-input-container> 
</div> 

コードコードの助けを求めるexample