如何在角材1中的輸入旁添加一個md圖標？

如何添加MD-圖標元素旁邊的輸入，比如在角材1，並從谷歌接觸這個截圖：如何在角材1中的輸入旁添加一個md圖標？

谷歌聯繫人編輯表單

我知道我可以使用mdPrefix但我更喜歡這種風格。

代碼示例：

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

輸入領域內的圖標，我想它是在它旁邊：

Icon inside input field

來源

2017-06-30 Merijn Schering

問題尋求幫助的代碼必須包括必要的**最短碼**到在問題本身**中重現問題**，最好在[Stack Sn ippet]（https://stackoverflow.blog/2014/09/16/introducing-runnable-javascript-css-and-html-code-snippets/）。請參見[如何創建最小，完整和可驗證的示例]（https://stackoverflow.com/help/mcve）。 – LGSon

使用一些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>

代碼example

來源

2017-06-30 21:28:23 Nehal

謝謝，這個CSS很好。但我希望有一個官方的方式來完成這個框架。在角材料1中，只需在md-input-container中添加一個md圖標即可完成。 –

如何在角材1中的輸入旁添加一個md圖標？

回答

相關問題