I'm trying to style my mat input field on an error by adding an error icon next to the clear field icon like this:
I can't find any way to add the icon. Thank you for your help in advance.
My HTML:
<button
*ngIf="value"
matPrefix
mat-icon-button
aria-label="Clear"
(click)="value = ''"
>
highlight_off
کلمه جدید
<input
class="word-input"
matInput
type="text"
[(ngModel)]="value"
id="word"
#wordInput
required
/>
error
کلمه ورودی قبلا وارد شده‌است
CSS:
::ng-deep .mat-error {
text-align: right;
font-size: 12px;
}
:host ::ng-deep .mat-form-field-appearance-outline.mat-form-field-invalid .mat-form-field-outline- thick,
:host ::ng-deep .mat-form-field.mat-form-field-invalid .mat-form-field-label,
.mat-error {
color: var(--error) !important;
}
Take a look how bootstrap make it in the docs
then, instead use as class is_invalid you can use .ng-invalid.ng-touched
NOTE: I change the rigth by left in padding and position the image
NOTE2: you can use any svg, e.g.
Update If we are working with material angular, we need take account the "floating label"
So, we can use in styles.css
See stackblitz