Angular 2 material tab active color customize

Question

I was looking to customize the active color for md-tab.

The classes in chrome dev console shows ==> -mat-tab-label mat-ripple mat-tab-label-active. But none has any border bottom. There was a chevron class which i tried to change, but no effect.

I tried /deep/ with almost all classes. Dint work. Also checked md-tab-header, but nowhere am seeing even that color! Any help would be appreciated :)

Solution 1

Try to it's work for me

::ng-deep .mat-ink-bar {
  background-color:#ee2925 !important;}

Solution 2

It's worked for me in Angular 6

.mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar {
    background-color: #1f29a2;
}

Solution 3

Works in Angular 7

.mat-tab-group.mat-primary .mat-ink-bar,.mat-tab-nav-bar.mat-primary .mat-ink-bar {
    background-color: #2C702A;
}