Уменьшите высоту переключателя мат-кнопки для соответствия кнопкам

Question

Я получил строку Angular Flex-Layout, которая содержит несколько кнопок и mat-button-toggle-group. К сожалению, mat-button-toggle-group несколько больше, чем кнопки, и я хотел бы, чтобы все они были на одной высоте / высоте строки.

Это горячо, это выглядит в настоящее время:

Пытался вмешиваться в классы css mat-button-toggle-group и другие, но только дошел до того, что уменьшил высоту кнопок, пока содержимое не изменилось.

  <div fxLayout="row wrap" fxLayoutAlign="space-between end">
    <div>
        <div fxLayout="row wrap" fxLayoutAlign="space-between end">
          <div class="control-buttons">
            <button
              mat-stroked-button
            >
              <i class="material-icons">skip_previous</i>
            </button>    
            ( more buttons )
        </div>
    </div>
    <div>
        <div fxLayout="row wrap" fxLayoutAlign="space-between end">
            <mat-button-toggle-group multiple>
                  <mat-button-toggle
                    value="random"
                  >
                    <i class="material-icons">
                      shuffle
                    </i>
                    <span class="only-on-big-screen">
                      random
                    </span>                
                  </mat-button-toggle>    
                  ( more buttons )
              </mat-button-toggle-group>
          </div>
    </div>
  </div>

Answer 1

Вы можете изменить высоту, добавив пользовательские стили. Вы должны изменить line-height класса mat-button-toggle-label-content.

.mat-button-toggle-label-content {
    line-height: 32px !important;  <-- set you height here
}