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 not change anything.

I have also noticed that when using the pre-built "Cyan & Orange" theme, the orange tertiary color is being applied onto several components, such as the FAB buttons, the slide toggle or the radio buttons. However, I have not figured out yet why this happens.

I have found the solution for my problem in the documentation.

This is the code in the "app.component.html" file:

<button mat-flat-button class="primary-button">Primary</button>
<button mat-flat-button class="secondary-button">Secondary</button>
<button mat-flat-button class="tertiary-button">Tertiary</button>

To give the components their colors, I added the following code to the custom generated theme file "m3-theme.scss":

.primary-button {
  @include mat.button-color($light-theme, $color-variant: primary);
}

.secondary-button {
  @include mat.button-color($light-theme, $color-variant: secondary);
}

.tertiary-button {
  @include mat.button-color($light-theme, $color-variant: tertiary);
}