Search code examples
cssangularsassmaterial-uiangular-material

Why i can't edit mat-button padding?


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 ;
    }

Solution

  • 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.