angularangular-materialangular-material2material3angular-theming

How to resize buttons in angular material m3?


I have some buttons which should be larger then the normal size. I found some code for previous versions:

$my-custom-input: mat.define-typography-level(
    $font-family: 'Roboto',
    $font-weight: 400,
    $font-size: 1rem,
    $line-height: 1,
    $letter-spacing: 'normal'
  );

  /* Merge custom configs into existing config */
  $my-typography-config: map.merge(
    mat.define-typography-config(
      /* 'button'-property will work out of the box */
      $button: $my-custom-button
    ),
  );

but define-typography-level is not defined anymore. How can I do this in the newest version without just overriding css?


Solution

  • A solution without resorting to mat-typography is to add this in your styles.scss:

    .big {
      --mdc-text-button-label-text-size: 1.5rem;
    }
    

    A button with larger text would then be styled as follows:

    <button class="big" mat-button>The Big Button</button>
    

    Good luck with your project.