default padding of mat-button's, i need to subscribe the default padding (16px)
I've been trying to set the padding of a mat-button, but the component's style isn't changing. What can I do, I've already tried changing CSS properties, but none of them solve the proble
COMPONENT.HTML
<header>
<mat-toolbar class="toolbar">
<div class="example-sidenav-content">
<button type="button" mat-flat-button (click)="toogleDrawer()" class="menu-button">
<mat-icon class="menu-icon">menu</mat-icon>
</button>
</div>
<img src="../../../assets/imagens/Logotipo-header.png" alt="LOGOTIPO EUROTEXTIL" class="toolbar-logo">
<span class="toolbar-usu">{{ profile.name }}</span>
</mat-toolbar>
</header>
and the SCSS
header {
padding: 0 3%;
height: 12vh;
background: $primary-color;
border: solid 2px greenyellow;
display: flex;
align-items: center;
.toolbar {
padding: 0;
background-color: $primary-color;
display: flex;
justify-content: space-between;
align-items: center;
.menu-button {
color: $white;
background-color: rgb(86, 9, 230);
padding: !15px;
}
.menu-icon {
background-color: yellowgreen;
margin:0 auto ;
}
The answer from @Eliseo was very helpful in solving my problem, but in truth, the issue wasn't the padding. I found that the problem was with the min-width property. The mat-button comes with a default min-width set to 64px.