Angular Material change all font sizes

I'm on a project that uses Angular v9 with Angular Materials v9.

I need to create a increase/decrease all fonts sizes logic.

I thought it would be just as simple to add to the html elements style attribute a fixed font size and that all components will use it due the REM unit value.

Let's say like:

// default font size
currentFontSize: number = 16;

/// etc...

changeFontSize(type: string): void {
  this.currentFontSize = (type === 'inc') ? this.currentFontSize + 2 : this.currentFontSize - 2;
  document.getElementById('rootElement').style.fontSize  = `${ this.currentFontSize }px`;
}

Which works fine but only for elements that by default have REM unit font-size property.

Looking further at the docs there are SASS functions for that, but for each font type class.

My question is - is there some "global" way to increase all the font size components dynamically or do I need to use SASS function for each Angular Material component and rewrite it? Or is there a better way?

Thanks