アンギュラマテリアルのプレースホルダにアイコンを挿入する方法は？

Question

私はアイコンをプレースホルダーに入れようとしています。

<md-input name="name"> 
    <md-placeholder> 
     <i class="material-icons app-input-icon">face</i> Name 
    </md-placeholder> 
</md-input> 

それは私が角度の材料を再インストールして、角度CLIを更新する前に（プレースホルダのアイコンを示していた）働いていた：私はこのコードを試してみました。 このコードブラウザでは、このエラーが発生しています： "'md-input'は既知の要素ではありません。

はその後、私はこのコードを試してみました：

<md-input-container> 
    <input mdInput placeholder="Name" name="name2"> 
</md-input-container> 

それが正常に動作しているが、どのように私はそのプレースホルダに「顔」アイコンを置くことができますか？

Answer 1

問題は、md-placeholderタグではありませんでした。エラーと同じように、それは廃止されたmd-inputでした。 Angular Materialは最近、md-inputタグをmdInputディレクティブに変更しました。

しかし、md-placeholderはまだ動作しています（ただし、それが続くかどうかはわかりません）。

次のコードは、動作するはずです：

<md-input-container> 
    <md-placeholder> 
     <md-icon>face</md-icon> Name 
    </md-placeholder> 
    <input mdInput name="name"> 
</md-input-container> 

代替は、あなたのMD-アイコンタグにmdPrefixまたはmdSuffixディレクティブを使用することです。それはあなたの入力の左または右にあなたのアイコンを表示しますが、それをクリックするとプレースホルダに追従しません。

例：

<md-input-container> 
    <md-icon mdPrefix>face</md-icon> 
    <input mdInput placeholder="Name" name="name"> 
</md-input-container> 

Check the API reference for more informations.

Answer 2

マット・サフィックスはどちらか私のために動作しませんでした。そのドキュメントに追いついて、常に面倒な作業ですが、5.1.1のように、この作業をする必要があります：

<mat-form-field class="example-form-field"> 
    <input matInput type="text" placeholder="Clearable input" [(ngModel)]="value"/> 
    <button mat-button *ngIf="value" matSuffix mat-icon-button aria-label="Clear" (click)="value=''"> 
    <mat-icon>close</mat-icon> 
    </button> 
</mat-form-field> 

出典：ここでは例「クリアボタンで入力」：https://material.angular.io/components/input/examples