I made the switch to a custom Material theme recently, and I've noticed that everything adopts the new theme except for the buttons in my components.
The buttons are functional, as are other elements within the component. Adding color="primary" changes the text color, but doesn't affect the button itself. Since the mat-toggle is working correctly, I don't believe it's due to any missing imports (MatButtonModule has been imported).
Below is an image of the button and the key code from the HTML file:
https://i.sstatic.net/865Rg.png
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);