Density in Angular Material Design for single buttons only

Question

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.

Answer 1

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