Material Design 3 with Angular

Question

I am new to material design and I am researching whether I can use Material Design 3 with Angular version 17.

I have followed the steps mentioned in Material Design 3 and successfully installed but I have no idea on how to use its components. Any help would be appreciated. Thanks..!!

Qktp

check this material.angular.io – Econometrics

@KostasNitaf - as of version 17.0.1, @angular/material is still based on on Material 2, not 3. The question asks about Material 3. There are mentions that M3 should arrive with either upcoming minor, or next major version though, with some commits already pushed to experimental branch (i.e. here). – Kip

Τhank you @TotallyNewb! It had not come to my attention. – Econometrics

Answer 1

Material 3 support for Angular has been released in v17.2.

You can now use design tokens, customization becomes scary easy !

<mat-checkbox class="scary-setting">Delete my account</mat-checkbox>

.scary-setting {
  // No need to target any internal checkbox selectors! 🎉
  - mdc-checkbox-unselected-hover-state-layer-color: red;
  - mdc-checkbox-unselected-hover-icon-color: red;
}

Gymkhana

Answer 2

The usage of design tokens, implemented as CSS variables, makes it a lot easier to customize any component. You can even, optionally, enable system-level tokens, so that all theme variables are defined as top-level CSS variables. This means that by adjusting the values of these sys- variables, you can change the whole look of the application very easily. It also means that you can fully separate your theme CSS. On top of that you can now simply use these CSS variables everywhere, instead of having to rely on the get-theme-color function of Angular Material.

theme.scss:

$theme: mat.define-theme(
  (
    color: (
      theme-type: light,
      primary: mat.$cyan-palette,
      tertiary: mat.$magenta-palette,
      use-system-variables: true,
    ),
    typography: (
      use-system-variables: true,
    ),
  )
);

html {
  @include mat.system-level-colors($theme);
  @include mat.system-level-typography($theme);
}

styles.scss:

html {
  $system-variables-theme: mat.define-theme(
    (
      color: (
        use-system-variables: true,
      ),
      typography: (
        use-system-variables: true,
      ),
    )
  );
  @include mat.all-component-themes($system-variables-theme);
}

One major issue with the Material 3 theme, is that they deprecated the use of color attributes. Every component now has a default color, and you are supposed to change the color using your own styling / classes. You can do this like this:

.primary {
  --mdc-icon-button-icon-color: var(--sys-primary);
  --mdc-outlined-button-label-text-color: var(--sys-primary);
  --mdc-text-button-label-text-color: var(--sys-primary);
}

.tertiary {
  --mdc-icon-button-icon-color: var(--sys-tertiary);
  --mdc-outlined-button-label-text-color: var(--sys-tertiary);
  --mdc-text-button-label-text-color: var(--sys-tertiary);

  --mdc-chip-elevated-container-color: var(--sys-tertiary) !important;
  --mdc-chip-label-text-color: var(--sys-on-tertiary) !important;
}

.error {
  --mdc-icon-button-icon-color: var(--sys-error);
  --mdc-outlined-button-label-text-color: var(--sys-error);
  --mdc-text-button-label-text-color: var(--sys-error);
}

.neutral {
  $neutral: #000;
  --mdc-icon-button-icon-color: #{$neutral};
  --mdc-outlined-button-label-text-color: #{$neutral};
  --mdc-text-button-label-text-color: #{$neutral};
}

.error-text {
  color: var(--sys-error);
}

Now these are not complete, but you can extend them as needed. Simply look up the needed variable names using your Browser Tools and add them.

Usage:

<button
  type="button"
  class="error"
  mat-icon-button
>
  <mat-icon>delete</mat-icon>
</button>

Cressida

Answer 3

For anyone who is lost on which is the last stable version of Angular Material that supports Material Design 2 - it's 17.1.2 "acrylic-aquarium" (2024-01-31).

Here.

Imponderable

This is not really correct. You can still use Material 2 themes with the latest Angular Material. However, you do need to update some mixin names etc. Simply prefix m2- on the names that give an error. – Cressida