Estoy tratando de poner el ícono en el marcador de posición. Probé este código:
<md-input name="name"> <md-placeholder> <i class="material-icons app-input-icon">face</i> Name </md-placeholder> </md-input>Estaba funcionando (mostraba un ícono con marcador de posición) antes de que reinstalara el material angular y actualizara el cli angular. Para este código, el navegador está dando este error ahora: "'md-input' no es un elemento conocido".
entonces probé este código:
<md-input-container> <input mdInput placeholder="Name" name="name2"> </md-input-container>Está funcionando correctamente, pero ¿cómo puedo poner el icono de 'cara' en su marcador de posición?
Su problema no era la etiqueta md-placeholder. Tal como decía el error, md-input estaba en desuso. Angular Material recientemente cambió su etiqueta md-input a una directiva mdInput.
Pero el marcador de posición md todavía funciona (aunque no estoy seguro de si durará).
El siguiente código debería funcionar entonces:
<md-input-container> <md-placeholder> <md-icon>face</md-icon> Name </md-placeholder> <input mdInput name="name"> </md-input-container>Una alternativa es usar las directivas mdPrefix o mdSuffix para su etiqueta md-icon. Eso mostrará su ícono a la izquierda o derecha de su entrada, pero no seguirá al marcador de posición cuando haga clic en él.
Ejemplo :
<md-input-container> <md-icon mdPrefix>face</md-icon> <input mdInput placeholder="Name" name="name"> </md-input-container>Consulte la referencia de la API para obtener más información.
.example-full-width { width: 100%; } <mat-form-field class="example-full-width"> <mat-icon matPrefix>email</mat-icon> <input matInput type="email" tabindex="1" placeholder="Your Email" formControlName="email"> </mat-form-field>mat-suffix tampoco funcionó para mí. Mantenerse al día con sus documentos siempre es una tarea, pero a partir de 5.1.1 esto debería funcionar:
<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>Fuente: ejemplo de "Entrada con un botón claro" aquí: https://material.angular.io/components/input/examples