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

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

I think the key here is that is must be in the GLOBAL styles.css file. The below solution does work if placed there (should be the CSS file affected when material was added to the project if added with ng add:

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

Of course you could also add classes to the component and specify different selectors if you want distinctly styled spinners. However, it seems the classes must be in the global CSS file.

Answer 3

In your css file mention like below:

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

Here, ::ng-deep will be used to force a style.

!important here what says is that "this is Important",you ignore all other rules and apply this rule.

Answer 4

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 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;
        }
    }
}

Answer 6

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.