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

Answer 1

In your styles.css file, add...

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

As you might have guessed, I have just made a simple modification to Nitin Wahale's answer. I have prefixed his answer with ::ng-deep and it worked in my case as I had the same issue.

I hope this helps somebody

Answer 2

In case you guys want to customize each spinner on your webpage. You can do it this way:

svg .mat-progress-spinner circle, .mat-spinner circle {
  stroke: inherit;
}

And now on mat-spinner add class:

<mat-spinner class="custom-spinner-color"></mat-spinner>

And in css file:

.custom-spinner-color {
  stroke: #234188;
}

That was what I wanted to achieve. I suppose if you look for this question you probably want the same.

Answer 3

Use this code for ** < mat-spinner >** add this code in your .css file

.mat-progress-spinner circle, .mat-spinner circle {
stroke: #3fb53f;
}