I've been struggling to center the MatIcon in the MatButtonToggle, trying multiple methods without success. It may seem like a minor issue, but it's causing quite a bit of trouble for me. Can someone please guide me on how to make this adjustment effectively? Your help is greatly appreciated.
https://i.sstatic.net/joGBD.png
Here is the template:
<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>
Here is the style:
@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;
}
Can someone assist me with resolving this issue?