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..!!

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;
}

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>