How to fill only 1 icon while using material symbols outlined? [closed]

I'm creating a website for publishing recipes and I'm implementing a like system.

In order to display if a user already likes a recipe, I use a material symbols 'favorite' icon but I only use not filled icons and I want only this one to be filled. I already tried to create a css class :

font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;

But it doesn't change the icon at all.

What should I do? Thanks for your answers