JSFiddle - React, Tailwind, and code Playground

by xxxvvvxxx

HTML

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

CSS

.material-symbols-outlined {
	cursor: pointer;
	color: red;
	font-variation-settings:
	'FILL' 0,
	'wght' 100,
	'GRAD' 0,
	'opsz' 48
}
.material-symbols-outlined.fill {
	font-variation-settings:
	'FILL' 1
}

JavaScript

$(".material-symbols-outlined").on("click", function(){
	$(this).toggleClass("fill");
});