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

Color is build in.

Theming The color of a progress-spinner can be changed by using the color property. By default, progress-spinners use the theme's primary color. This can be changed to 'accent' or 'warn'.

https://material.angular.io/components/progress-spinner/overview

example

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

Answer 2

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

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

Answer 3

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:

.withdraw-deposit-modal-spinner{
  stroke: #234188;
}

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

Answer 4

This answer will work for those who're looking for a flexible solution in Angular 4 / 6 / 7. If you wan't to change the color of a mat-spinner at a component level, you'll need to use the ::ng-deep selector. Knowing this, the solution is quite easy.

• In your html file:

    <div class="uploader-status">
        <mat-spinner></mat-spinner>
    </div>

• In your css / scss file:

    .uploader-status ::ng-deep .mat-progress-spinner circle, .mat-spinner circle {
        stroke: #000000;
    }

Notice that the .uploader-status css class encapsulates the component. You could just use ::ng-deep without using a class but then whatever changes you're doing to the mat-spinner will appear in other areas of the application. Check this to learn more.

Answer 5

Late to the game, but this worked well in my .scss file today...

.parent-element-class {
    ::ng-deep 
    .mat-progress-spinner,
    .mat-spinner {
        circle {
            stroke: white;
        }
    }
}