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.
Use this code for ** < mat-spinner >** add this code in your .css file
.mat-progress-spinner circle, .mat-spinner circle {
stroke: #3fb53f;
}
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.
<div class="uploader-status">
<mat-spinner></mat-spinner>
</div> .uploader-status ::ng-deep .mat-progress-spinner circle, .mat-spinner circle {
stroke: #000000;
}.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.Easy Fix!
Add custom css rules inside styles.css instead of component.css file
.mat-progress-spinner circle, .mat-spinner circle {
stroke: #2A79FF!important;
}