'Angular - change the colour of selected mat-icons within a mat-tab-group

i have several tabs with different icons each, both from angular materials. if i change the colour of the icons via ::ng-deep it works, but it does not change the colour anymore when it is selected anymore.

::ng-deep .mat-icon {
    color: var(--theme-color3);
}

::ng-deep .mat-tab-list .mat-tab-labels .mat-tab-label-active {
  color: var(--theme-color1) !important;
}

Any idea how I could change the icons colour, when selected?

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Angular - change the colour of selected mat-icons within a mat-tab-group

Sources

Related Questions