How to change color of mat-error (Angular Material)?

Question

I'm using Angular Material's mat-error inside a form to show validation errors. These are by default displayed in orange. Is it possible to adjust its styling to make them red?

I tried:

mat-error{
    color: red !important;
}

With no success.

Thank you in advance!

Answer 1

try this css.

 .mat-input-invalid .mat-input-placeholder {
    color: red;
}

.mat-input-invalid .mat-input-ripple {
    background-color: red;
}

Answer 2

You can add it to :root {}

:root {
  .brand-theme .mat-error {
    color: red;
  }
}