Проблема с центрированием MatIcon в MatButtonToggle на Angular

Question

Я пытаюсь настроить MatButtonToggle, но у меня проблемы с центрированием MatIcon, я пробовал дюжину или около того способов отрегулировать его, но безрезультатно, казалось бы, обыденный вопрос, и все же проблема достаточно - так плохо Пожалуйста, покажите мне, как это настроить. Заранее спасибо.

Шаблон:

<mat-toolbar class="mainToolbar">
  <mat-button-toggle-group #modeAppWorking="matButtonToggleGroup">
    <mat-button-toggle value="setup" class="mainTollbar-button">
      <mat-icon>settings_applications</mat-icon>
    </mat-button-toggle>
    <mat-button-toggle value="labor" class="mainTollbar-button">
      <mat-icon>edit</mat-icon>
    </mat-button-toggle>
    <mat-button-toggle value="study" class="mainTollbar-button">
      <mat-icon>pageview</mat-icon>
    </mat-button-toggle>
  </mat-button-toggle-group>
  My App
</mat-toolbar>
<div class="example-selected-value">Selected value: {{modeAppWorking.value}}</div>

Стиль:

@import '~@angular/material/theming';
:host {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}
.mainToolbar{
  @include mat-elevation(8);  
  padding: 7px;
  .mainTollbar-button{
    color: red;
    height: 48px;
    width: 48px;    
    mat-icon{
      font-size: 40px;
      height: 40px;
      width: 40px;
    }    
  }
}
.example-selected-value {
  margin: 15px 0;
}

Как я могу это сделать?

Answer 1

Angular материал добавляет div с классом mat-button-toggle-label-content, который содержит отступ вокруг элемента mat-icon. Чтобы преодолеть это отступление, используйте position: relative и left, чтобы переместить значок в центр.

mat-icon{
    position: relative;
    left: -8px;
    font-size: 40px;
    height: 40px;
    width: 40px;
}