How to set the Angular material tab's mat-ink-bar to take the width of tab header text width

Question

I want the Angular material tab's mat-ink-bar to take the width of the tab header text's width. Currently it is larger than the tab header text width.

Following image shows how it looks now.

Following image shows how I want it to be.

Could you help me on how to make this happen?

Answer 1

I achieved this by removing min-width and padding on the .mat-tab-label class.. and adding margin as per my requirement to keep the labels apart. this worked as mat-ink-bar takes the width of mat-tab-label which was set min-width to 160px;

SCSS:

mat-tab-header {
border-bottom: none !important;
.mat-tab-label-container {
    margin-bottom: 12px;
    .mat-tab-labels {
    .mat-tab-label {
        padding: 0 0 !important;
        min-width: 10px;
        margin-left: 95px;
    }
    }
}
}