How to change color property of mat-slide-toggle/ overwrite CSS of component?

You can change the primary colour of the mat-slide-toggle with the below css in your component styles.

/deep/ .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar {
    background-color: #49c5b6;
}

/deep/ .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb {
    background-color: #49c5b6;
}

The above code is tested on angular 5+ version and which is working.

Component styles normally apply only to the HTML in the component’s
own template.

Use the /deep/ shadow-piercing descendant combinator to force a style
down through the child component tree into all the child component
views. The /deep/ combinator works to any depth of nested components,
and it applies to both the view children and content children of the
component.

You may please take time to read more about the deep selectors here.

https://angular.io/guide/component-styles#deep