Search code examples
angularangular-materialangular-material-theming

Density in Angular Material Design for single buttons only

How can I apply the density for only one button?

Defining the density in the style in my less file doesn't work:

.smallDiagramButton {
   @include mat.button-density(-3);       
}

And using it later in the html:

<button mat-raised-button color="primary" class="smallDiagramButton">Text</button>

No matter if I apply the style class the button "size" (density) doesn't change.

But using

@include mat.button-density(-3);

in the global theme.scss the density is applied to ALL buttons in my app - what I doesn't want to.

Solution

  • You need to put the density styles to the parent element, and not the button itself.

    Template:

    <div class="smallDiagramButtonContainer">
  <button mat-raised-button color="primary">Text</button>
</div>

    Styles:

    .smallDiagramButtonContainer {
   @include mat.button-density(-3);       
}