mat-icon appears in grey color in Angular-CodePudding

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"
    
    matSuffix>
</mat-icon>

CodePudding user response：

It can be done as follow:

.mat-form-field .mat-icon {
   color: red;
}

CodePudding user response：

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.