Customize Angular Material component dimensions

Question

I am trying to customize the sizing of Angular Material buttons (ie padding). The definition of these values comes from a variable called $mat-button-padding in _button-base.scss . However, it is directly included in the button.ts . Is there a possibility to adjust this value?

I already tried overriding it before including the material theme (as the variable is defined using !default ), but it has no effect since the styles are directly included in the button component. Are there any other options except overriding it by hand and generating duplicate styles (basically an additional css definition that overrides the button styles)?

Any idea is highly appreciated.

Answer 1

You can add own class in "mat-button" element like below and you can apply your own css.

<button mat-stroked-button 
color="primary" 
class="common-button">Button</button>

.common-button {
  border-radius: 4px;
  line-height: 2.5;
  height: 80px;
}