I would like to show mat-icon in red color but it always appear in grey color. Is there a way to show mat-icon in red color? If somebody knows the please let me know. Thank you
<mat-icon
*ngIf="form.hasError('required', 'name') && isNameSubmitted"
class="mdi mdi-24px mdi-alert-circle"
matSuffix>
</mat-icon>It can be done as follow:
.mat-form-field .mat-icon {
color: red;
}
Often the default warn colour is red when using an Angular Material Theme. In such cases you can use:
<mat-icon color="warn">icon</mat-icon>
This is often a good practice when using material components as it will affect other parts of the element you might not think to style manually.