Change color of mat-spinner

Question

How to change color of mat-spinner i tried this but doesn't work

Html

<mat-spinner [color]="red" ></mat-spinner>
<mat-spinner [color]="#ffffff" ></mat-spinner>

Answer 1

This code worked for me :

scss

.mat-spinner-color::ng-deep circle{
stroke: #FFFFFF !important;
}

html

<mat-spinner [diameter]="25" class="mat-spinner-color"></mat-spinner>

Answer 2

The color property only accepts the values primary, accent and warning. These are colors that correspond to the Material Design theme used in your project.

<mat-spinner color="primary"></mat-spinner>

If you want to override this with a custom color add the following css in a global style sheet:

.mat-progress-spinner circle, .mat-spinner circle {
  stroke: /* color */
}

Note

View encapsulation prevents the styles from working when placed in a component style sheet.