Angular Material Progress Bar, Using Custom Colors

I have a Angular 5 project where I’m using a material progress bar. I want to use custom colors. I’ve tried several workarounds (including previous SO questions) , but cannot b

Solution 1:

https://i.stack.imgur.com/P98jU.png

/deep/ .mat-progress-bar-fill::after {
    background-color: green;
}

/deep/ .mat-progress-bar-buffer {
    background: #E4E8EB;
}

Solution 2:

Setting the color in .ts file worked for me

<mat-progress-bar [value]="cell.value"  [color]="cell.color"></mat-progress-bar>

and in .ts file,

cell.color = 'primary'; //predefined color in default theme

I believe you can replace 'primary' with your custom color