Center text in angular material MatButtonToggle

Question

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

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 ?

Answer 1

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 you html 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>

DEMO