Angular Material mat-spinner custom color

Question

Does anyone know how can I change mat-spinner color in Angular Material? Overriding css doesn't work. I tried changing color in material files but they can only be imported, I can't change anything there. I want it to be my custom color, not color from prebiult-themes.

Answer 1

Easy Fix!

Add custom css rules inside styles.css instead of component.css file

.mat-progress-spinner circle, .mat-spinner circle {
    stroke: #2A79FF!important;
}

Answer 2

mat-spinner html code :

<mat-spinner color="accent" diameter="20" class="loading"></mat-spinner>

And now sass code :

.mat-spinner {
    ::ng-deep circle {
        stroke: #33dd82;
    }
}

Answer 3

This is best achieved by doing a custom theme.

https://material.angular.io/guide/theming

Answer 4

Sample Color, strokeWidth, diameter and title

<mat-spinner strokeWidth="24" [diameter]="85" color="warn" title="Tooltip text here"></mat-spinner>

Answer 5

use this code

<md-progress-circular md-diameter="20px"></md-progress-circular>

md-progress-circular path {
  stroke: purple;
}

Answer 6

To your .css/.scss component file style add (it will works locally - in component only)

:host ::ng-deep .mat-progress-spinner circle, .mat-spinner circle {   
    stroke: #bada55;
}