Change color of mat-spinner

问题

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>

回答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>

回答2:

The color input accepts three values:

• primary: The primary palette of your app
• warn: The warn palette of your app
• accent: The accent palette of your app

To use hex codes, you can only do it with CSS. I suggest you use the Chrome DevTools to see which CSS classes to target. Note that you should use the !important selector as well.

回答3:

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:

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

EDIT

Place the styles in the global style sheet, view encapsulation prevents the styles from working when placed in a component style sheet.

来源：https://stackoverflow.com/questions/52700871/change-color-of-mat-spinner