If you are looking for sample code changes when migrating from Angular Material 17 to 18 (for both M2 and M3), checkout this project on GitHub.
Below table was created for the article: Updating to Angular Material 18: Keeping Support for Material 2 and Adding Support for Material 3
| Index | Applies to | Old | Change for M2 | Change for M3 |
|---|---|---|---|---|
| 1 | Typography | define-typography-config |
m2-define-typography-config |
Part of define-theme |
| 2 | Typography | define-typography-level |
m2-define-typography-level |
get-theme-typography |
| 3 | Color palettes | define-palette |
m2-define-palette |
SASS Map, can be generated using Material 3 Theme schematic |
| 4 | Color palettes | $indigo-palette |
$m2-indigo-palette, All Palettes |
$azure-palette, All Palettes |
| 5 | Theming | define-light-theme |
m2-define-light-theme |
define-theme |
| 6 | Theming | define-dark-theme |
m2-define-dark-theme |
define-theme |
| 7 | Reading color values | get-color-config |
Removed | Removed |
| 8 | Reading color values | get-color-from-palette |
get-theme-color |
get-theme-color, Reading tonal palette colors, Reading color roles |
| 9 | Identifying the current theme | map.get($theme, is-dark) |
get-theme-type |
get-theme-type |
| 10 | Reading typography values | font-family |
Removed | Removed |
| 11 | Reading typography values | typography-level |
get-theme-typography |
get-theme-typography |
| 12 | Reading density values | get-theme-density |
No change get-theme-density |
No change get-theme-density |