angular material mat spinner custom style | Angular Material mat progress spinner

In this video we will see how to customize angular material spinner css. At the end of this video you will also able write angular material spinner custom style.

You can use ::ng-deep in the CSS definition of the respective component to force your style down through the child component tree into all the child component views

for example you can overwrite angular material mat-spinner css as follows:

::ng-deep .mat-progress-spinner circle, .mat-spinner circle {
stroke: orange;
}
Step 1:
Step 2:
Click On Components
Step 3:
Click on mat progress spinner
Step 4:
Click on API, and copy import path
Step 5:
Add css for perticular class from inspect element first
then copy same class name and do your customization, with ::ng-deep as prefix

Everyone should know how to change styling of angular material components

[igorpierre]

Thanks, so quick and direct to the point.
Could you please share the name of the music as well :D?

[danilo_teixeira]

Didn't work here. I'm using Angular 17 and Angular Material 16 . But this worked:

{
stroke: #fff !important;
}