@savaryna/
tailwindcss-material-symbols v1.3.0

Installation

Learn how to install and use the plugin on the GithHub page.

Basic usage

Choosing the font

<span class="icon icon-outlined">star</span>

<span class="icon icon-rounded">star</span>

<span class="icon icon-sharp">star</span>

Choosing the weight

<span class="icon icon-100">star</span>

<span class="icon icon-200">star</span>

<span class="icon icon-300">star</span>

<span class="icon icon-400">star</span>

<span class="icon icon-500">star</span>

<span class="icon icon-600">star</span>

<span class="icon icon-700">star</span>

Choosing the fill

<span class="icon icon-nofill">star</span>

<span class="icon icon-filled">star</span>

Choosing the grade

<span class="icon icon-dark">star</span>

<span class="icon icon-normal">star</span>

<span class="icon icon-emphasis">star</span>

Choosing the optical size

<span class="icon icon-20">star</span>

<span class="icon icon-24">star</span>

<span class="icon icon-40">star</span>

<span class="icon icon-48">star</span>

With pseudo elements

You can use the plugin with Tailwind CSS  pseudo elements  to add icons using css content.

<div class="...before:icon before:absolute before:content-["routine"]">
	<select class="...">
		...
	</select>
</div>

Animating font properties

You can use Tailwind CSS classes to animate the font properties. You can animate the weight, fill, grade, optical size and other element features. Read more about using  transitions  and  animations  in the Tailwind CSS documentation. You can also find more information on Google's  developer guide  for Material Symbols.

Here are a few examples:

icon icon-rounded group-hover:icon-700 transition-all duration-100

icon icon-rounded group-hover:icon-filled transition-all duration-100

icon icon-rounded group-hover:icon-emphasis transition-all duration-100