Why is my google icon not filled on webkit?

Question

I use a Google Icon (Heart Icon) as a like button on my website.

I import the icon font at the beginning of my HTML Code like that:

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />

And I display the icon like that:

<i class="material-symbols-outlined">favorite</i>

I've written a JS script that toggles a class "liked" on click of the button.

The CSS for the class "liked" looks like this:

    .liked {
      cursor: pointer;
      transition: .1s;
      color: #db6860;
      font-variation-settings:
      'FILL' 1,
      'wght' 400,
      'GRAD' 0,
      'opsz' 24
    }

    .liked:hover {
        color: #b6342b;
    }

As I tested the website on my Windows machine where it worked perfectly fine (the icon turns red and fills) and it still does, whereas on any Apple device that's using safari, only the border of the icon turns red.