Angular Material components are displayed without padding

Question

I've created an Angular (12) project, added Material with "indigo-pink" theme and created a form. But all form components are rendered without any horizontal white space between each other. For testing purposes I copied a code snippet with Buttons from the Angular Material website:

  <section>
    <div class="example-label">Raised</div>
    <div class="example-button-row">
      <button mat-raised-button>Basic</button>
      <button mat-raised-button color="primary">Primary</button>
      <button mat-raised-button color="accent">Accent</button>
      <button mat-raised-button color="warn">Warn</button>
      <button mat-raised-button disabled>Disabled</button>
      <a mat-raised-button href="https://www.google.com/" target="_blank">Link</a>
    </div>
  </section>

They are rendered like this in my application:

But they should be rendered like on the Angular Material website:

The style sheets seems to be imported correctly in angular.json:

"styles": [
  "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
  "src/styles.css"
],

Other global (or local) styles were not added or modified.

How can I fix the margin?

Answer 1

Try adding this style to your component

.mat-button-base {
  margin: 8px 8px 8px 0;
}

It probably misses from the imported theme indigo-pink.css