Angular Material button style only gets applied in app.component

Question

I recently switched over to a custom Material theme, but it came to my attention that everything gets the right theme, except the buttons in my components.

The button works without any problems, as do the other elements in my component. Addingcolor="primary" changes the color of the text, but thats all it does. Since the mat-toggle works as supposed, I don't think it has anything to do with missing imports (MatButtonModule is imported)

Below is a picture of my button and the most important code of the html file:

html

<h3>Recent Quiz Participants ({{participants.length}})</h3>
<div class="wrapper">
  <div class="filterbar">
    <mat-icon>search</mat-icon>
    <div class="form-wrapper">
      <mat-form-field>
        <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
      </mat-form-field>
    </div>
  </div>
  <div>
    <mat-form-field>
      <mat-label>Displayed Columns</mat-label>
      <mat-select (selectionChange)="changeColumns($event)" [formControl]="columns" multiple>
        <mat-select-trigger>
          {{columns.value ? columns.value[0] : ''}}
          <span *ngIf="columns.value?.length > 1" class="additional-selection">
            (+{{columns.value.length - 1}} {{columns.value?.length === 2 ? 'other' : 'others'}})
          </span>
        </mat-select-trigger>
        <mat-option *ngFor="let column of selectedColumns" [value]="column">{{column}}</mat-option>
      </mat-select>
    </mat-form-field>
  </div>
  <div>
    <button mat-button [matMenuTriggerFor]="menu">Download</button>
    <mat-menu #menu="matMenu">
      <mat-slide-toggle (change)="completedOnly = !completedOnly" (click)="$event.stopPropagation()">Completed only
      </mat-slide-toggle>
      <button (click)="onClickCsv()" mat-menu-item>CSV</button>
      <button (click)="onClickJson()" mat-menu-item>JSON</button>
      <button (click)="onClickXlsx()" mat-menu-item>XLSX</button>
    </mat-menu>
  </div>
</div>

CSS

@import'https://fonts.googleapis.com/icon?family=Material+Icons';

.additional-selection {
  opacity: 0.75;
  font-size: 0.75em;
}

.wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.wrapper-nocontent {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.filterbar {
  display: flex;
  align-items: center;
  width: 50%;
}


.form-wrapper,
mat-form-field,
body,
html {
  width: 100%;
}

mat-table {
  margin: 5px;
  width: 100%
}

p {
  font-weight: bold;
  font-size: 150%;
}

.spinner-card {
  display: flex;
  justify-content: center;
  align-items: center
}

mat-row, mat-header-row, mat-footer-row {
  padding-left: 24px;
  padding-right: 24px;
}

mat-cell:first-child, mat-footer-cell:first-child, mat-header-cell:first-child {
  padding-left: 0;
}

mat-cell:last-child, mat-footer-cell:last-child, mat-header-cell:last-child {
  padding-right: 0;
}

mat-slide-toggle{
  margin-left: 15px;
  margin-right: 15px;
}

Theme

@import '~@angular/material/theming';

@include mat-core();

$custom-theme-primary: mat-palette($mat-orange, 700);
$custom-theme-accent: mat-palette($mat-deep-orange);
$custom-theme-warn: mat-palette($mat-red, 50);

$custom-theme: mat-light-theme($custom-theme-primary, $custom-theme-accent, $custom-theme-warn);
@include angular-material-theme($custom-theme);

Answer 1

for Toggle button you need to import "import {MatButtonToggleModule} from '@angular/material/button-toggle';" After that you can use it's futher properties. for more reference click on the following link: https://material.angular.io/components/button-toggle/api

you have used slidetoggle for that you need to import "import {MatSlideToggleModule} from '@angular/material/slide-toggle';" instead of above i have mentioned.

Answer 2

Turns out I was misinterpreting mat-button. To get the background color on a button, you need mat-flat-button or mat-raised-button.

Answer 3

mat-button and mat-menu-item are 2 different things. Here is a modified Materials example:

https://stackblitz.com/edit/angular-9kpiri

Notice that on the first element I'm trying to do what you're describing. The third element, however, is just using mat-button and is listening to the color property.