如何在输入旁边添加 md 图标，如 Angular Material 1 中那样？

Question

如何在输入旁边添加md-icon元素，例如 Angular Material 1 中的内容以及来自 google 联系人的屏幕截图：

Google 通讯录编辑表单

我知道我可以使用 mdPrefix 但我更喜欢这种风格。

代码示例：

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

输入字段内的图标，我希望它位于它旁边：

Answer 1

使用一些 CSS 技巧，我能够制作出接近所提供的屏幕截图的东西。

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>

代码示例