Angular Material 3 button not showing azure (#005cbb) color

This is my HTML:

<button mat-button class="basic">Basic</button>


This is my scss:

.basic {
@include mat.theme((
color: (
theme-type: light,
primary: mat.$azure-palette,
tertiary: mat.$blue-palette,
),
typography: Roboto,
density: 0,
));
}


Despite this, I keep seeing black text with white background instead of azure text.

What I see:



And this is what StackBlitz has it as:

And I copied from this StackBlitz: https://stackblitz.com/edit/ibsvoqpb?file=src/example/button-overview-example.html,src/styles.scss

I do see this style in the chrome dev tools:

.mat-mdc-button:notdisabled) {
color: var(--mdc-text-button-label-text-color, var(--mat-sys-primary));
}




How can I get rid of the 'var(--mdc-text-button-label-text-color,' that is causing the text to be black?

Continue reading...