cssangulartypescriptsassangular-material

Center text in Angular Material MatButtonToggle

I'm trying to customize the MatButtonToggle, but I have difficulties centering the label:

Enter image description here

The template:

<mat-button-toggle-group name="condition" aria-label="Condition">
  <mat-button-toggle value="and" checked>
    <div>ET</div>
  </mat-button-toggle>
  <mat-button-toggle value="or">OU</mat-button-toggle>
</mat-button-toggle-group>

The style:

.mat-button-toggle-checked {
  background-color: $secondary-color;
  color: white;
}

mat-button-toggle-group {
  height: 25px;
  border-radius: 4px;
  border: solid 1px $secondary-color;
}

mat-button-toggle {
  font-size: 15px;
  background-color: white;
  color: $secondary-color;
}

How can I do that?

Solution

  • Add this:

    .mat-button-toggle-label-content{
  line-height: 0px !important;
  padding: 12px 10px 10px 10px !important
}

    to your styles.css file of your src folder.

    And in your HTML content, remove the <div>:

    <mat-button-toggle-group name="condition" aria-label="Condition">
  <mat-button-toggle value="and" checked>ET</mat-button-toggle>
  <mat-button-toggle value="or">OU</mat-button-toggle>
</mat-button-toggle-group>

    A demo