Angular - Material: Progressbar Custom Color?
Answer : You can use ::ng-deep selector to achieve what you want, this answer has some info on it. How I did it: CSS ::ng-deep .mat-progress-bar-fill::after { background-color: #1E457C; } ::ng-deep .mat-progress-bar-buffer { background: #E4E8EB; } ::ng-deep .mat-progress-bar { border-radius: 2px; } HTML <mat-progress-bar mode="determinate" value="{{progress}}"></mat-progress-bar> And the result is this: EDIT: I found a way to avoid using ::ng-deep as it will be removed from angular soon. It seems that if you move your style from your component.css file to the global styles.css file it will work without ::ng-deep . So, a style defined above can change in mat-progress-bar .mat-progress-bar-buffer { background: #E4E8EB; } Move it to styles.css and it will be applied like this: LATER EDIT As an explanation why setting styles in the global style sheet works: For components the default is that angul...