How to apply secondary or tertiary colors to Angular Material components with M3 theme?

I am currently discovering Angular Material v18+ with the M3 theming specification. Using the following schematic that I found in the documentation, I have generated a custom theme including custom color palettes.

ng generate @angular/material:m3-theme


This left me with a file that contains the following code in the m3-theme.scss file:

@use 'sass:map';
@use '@angular/material' as mat;

$_palettes: (
primary: (
// ...
),
secondary: (
// ...
),
tertiary: (
// ...
),
neutral: (
// ...
),
neutral-variant: (
// ...
),
error: (
// ...
),
);

$_rest: (
secondary: map.get($_palettes, secondary),
neutral: map.get($_palettes, neutral),
neutral-variant: map.get($_palettes, neutral-variant),
error: map.get($_palettes, error),
);
$_primary: map.merge(map.get($_palettes, primary), $_rest);
$_tertiary: map.merge(map.get($_palettes, tertiary), $_rest);

$light-theme: mat.define-theme((
color: (
theme-type: light,
primary: $_primary,
tertiary: $_tertiary,
),
));
$dark-theme: mat.define-theme((
color: (
theme-type: dark,
primary: $_primary,
tertiary: $_tertiary,
),
));


I have included the generated theme in the styles.scss file like that:

@use '@angular/material' as mat;
@use '../m3-theme.scss' as customPalette;

@include mat.core();

:root {
@include mat.all-component-themes(customPalette.$light-theme);
}


html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }


When I was building a little demo-app with some components, I have noticed that only the primary color would be used in the app - I could neither find the secondary, nor the tertiary color applied to any of my components.

Is there any way to apply the secondary or tertiary color to a Angular Material component? As for example, if i wanted to dye the background-color of this button in my secondary color:

<button mat-flat-button>
<mat-icon>favorite</mat-icon>
Hello World!
</button>


I have already tried adding the color-attribute with an according value to the HTML-Tag, as for example:

<button mat-flat-button color="tertiary">
<mat-icon>favorite</mat-icon>
Hello World!
</button>


This did, unfortunately, not change anything.

Thank you a lot in advance!

Continue reading...