Why does Opera display Google's Material Symbols Outlined (icon font) incorrectly, how to fix?

I'm building a website and I wanted to used Google's Material Symbols (Icon Font) "Outlined".

I've added that code to my header:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" rel="stylesheet" />

Note, that those have an property "FILL" that makes them filled or not-filled. I'm using the not-filled variant with this CSS:

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48;
}
.material-icons-outlined.md-36 {
    font-size: 36px;
}
.material-symbols-outlined.mdopsz-40 {
    font-variation-settings: 'opsz' 40;
}
.material-symbols-outlined.mdwght-6 {
    font-variation-settings: 'wght' 600;
}
.my-material-icon {
    display: inline;
    vertical-align: middle;
}

Using them like

<span class="material-symbols-outlined md-36 mdopsz-40 mdwght-6 my-material-icon">favorite</span>

Everything works fine in Chrome and Firefox, even Edge. But OPERA for some miraculous reason displays the filled variant.

(Obviously comparing them at the same time running the same code :-) All Browser are up to date, especially Opera, tested on Opera 85 and 89)

I'm now looking for advice, if I'm doing sth wrong, or if Opera is buggy in this regard. I thought Icon Fonts are used widely and well supported, but I've read articles arguing their time has passed. If this is gonna be a pain all the time, I'm considering d/l and using the SVG instead. Also, sure there is also Material Icons from Google, which don't have these fancy "font-variation-settings", but why do the Symbols even exist? A feature from google like this, I expected to work.

[EDIT] A solution is to copy the font-face CSS from the google API directly into the website CSS:

/* fallback */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 100 700;
  src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v39/kJEhBvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oFsI.woff2) format('woff2');
}

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

https://localhost:7058/de-DE/autologin

Google will return different css rules depending on the detected user agent/browser.

Open the css in firefox and opera:
https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200

Even though opera supports variable fonts and most font-features, you'll get a css referencing static single weight font files.
So it's rather a bug in google browser detection lookup.

Copy the css rules served to chrome/firefox and copy them to your stylesheet like so:

/* fallback */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 100 700;
  src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v39/kJEhBvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oFsI.woff2) format('woff2');
}

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -moz-font-feature-settings: 'liga';
  -moz-osx-font-smoothing: grayscale;
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48;
}
.material-icons-outlined.md-36 {
    font-size: 36px;
}
.material-symbols-outlined.mdopsz-40 {
    font-variation-settings: 'opsz' 40;
}
.material-symbols-outlined.mdwght-6 {
    font-variation-settings: 'wght' 600;
}
.my-material-icon {
    display: inline;
    vertical-align: middle;
}

<span class="material-symbols-outlined md-36 mdopsz-40 mdwght-6 my-material-icon">favorite</span>