How to align mat-tab-group label to left

Question

I'm using angular material in my development I want to left align my tab labels.

<mat-tab-group >
  <mat-tab label="Heading 1"> Content 1 </mat-tab>
  <mat-tab label="Heading 2"> Content 2 </mat-tab>
  <mat-tab label="Heading 3"> Content 3 </mat-tab>
</mat-tab-group>

I'm expecting to see the text Heading 1, Heading 2 and Heading 3 as left aligned. Is there a way to achieve this?

https://material.angular.io/components/tabs/overview

Answer 1

In theory I wouldn't mess with the Angular Material styles too much, but if you really need to have your labels aligned to the left you can do the following (in your component stylesheet):

::ng-deep .mat-tab-label {
  padding: 0px !important; // adjust this to whatever padding you need
  justify-content: left !important;
}

Here is a stackblitz showing it in action.