can I set letter-spacing globally for an angular material project

Question

Disclaimer: I'm not very good with Angular at all but am tasked with maintaining a leftover project.

After an update from angular 13 to angular 18 (with the big hump being 14>15), I find a lot of my letter spacing broken and so I'm wasting my time finding out the correct variables through the developer tools and inspect (is this even the right way), and then overwriting them in my styles.scss like so:

html {
    --mdc-list-list-item-label-text-tracking: normal;
    --mdc-text-button-label-text-tracking: normal;
    --mat-legacy-button-toggle-selected-state-text-color: black;
    --mdc-list-list-item-focus-state-layer-color: none;
    --mdc-filled-text-field-label-text-tracking: normal;
}

As you can see the text-tracking (i.e. letter-spacing) is always too wide for my liking and I want it down to normal. Do I have to do this for every component or can I set a global letter-spacing?

Answer 1

Your issue is that Angular Material has updated their configuration between the major 14/15

You need to provide the font now.

You should have some style like this :

@use '@angular/material' as mat;

$my-primary: mat.define-palette(mat.$indigo-palette, 500);
$my-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);

// The "warn" palette is optional and defaults to red if not specified.
$my-warn: mat.define-palette(mat.$red-palette);

$my-theme: mat.define-light-theme((
 color: (
   primary: $my-primary,
   accent: $my-accent,
   warn: $my-warn,
 ),
 typography: mat.define-typography-config(), // <--- THIS LINE IS REQUIRED NOW
 density: 0,
));