Angular Material Tab Component - How to change label font size

2
votes

I'm using the Angular Material tabs component. Using an example straight from the official docs...

<mat-tab-group>
  <mat-tab label="First"> Content 1 </mat-tab>
  <mat-tab label="Second"> Content 2 </mat-tab>
  <mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>

Everything works fine except that the font size in the tab labels is smaller than I would like and I can't seem to figure out how to make it bigger. I've tried multiple things in CSS but clearly I'm missing something. If someone could help it would be greatly appreciated.

1
cssangularangular-material

1 Answers

5
votes

in styles.css (Correct by @Marshal)

.mat-tab-label{
    font-size: 10px !important;
 }

Or you can use the following in component CSS

::ng-deep .mat-tab-label .mat-tab-label-content {
    font-size: x-large;
}

In CSS we can declare style rules like! Important to make the priority on style rules that can be found before

EDITED 2021

Is better use ViewEncapsulation

import { ViewEncapsulation } from '@angular/core';
// ...
@Component({
    // ...
    encapsulation: ViewEncapsulation.None,
})

and in the .scss file.

.content { 
   .mat-tab-label{
     font-size: 10px;
   } 
}

Be careful, as Angular Material says:

Turn view encapsulation off on your component. If you do this, be sure to scope your styles appropriately, or else you may end up incidentally targeting other components elsewhere in your application.

https://material.angular.io/guide/customizing-component-styles