A Tailwind CSS plugin for working with Google's Material Symbols

[savaryna]

Hey 👋,

I'm the creator of a Tailwind CSS plugin offering utility classes for Google's Material Symbols. These days I got around to updating it to the CSS first approach of Tailwind CSS v4. It still supports v3 through the legacy JS plugins, so maybe it could also serve as an insight into how you could achieve the same.

For a quick intro, what this plugin does, it allows you to use utility classes to style the Material Symbols font.

<span class="icon icon-48 icon-700 dark:icon-dark">star</span>

This example code will result in an icon with a size of 48px and a matching optical size, a 700 stroke weight and recommended grade for dark backgrounds. There is a utility for every variation offered by the symbols.

To use it, install using:

npm i -D @savaryna/tailwindcss-material-symbols

then import it in your main .css file:

@import 'tailwindcss';
@import '@savaryna/tailwindcss-material-symbols';

Alternatively you can also use:

@import '@savaryna/tailwindcss-material-symbols/css';

if your environment does not support the conditional export.

For a full set of what utilities are exposed and how you can use them with other Tailwind CSS features, like transitions and pseudo selectors, check out the demo site and repo.

I'm also interested in how useful people find something like this, so feel free to leave your feedback down below.

To me this is more of a learning experience and I could also write an article on how to approach "plugin" development for v4 if people are interested. (I might just write it anyways)

[Soundvessel]

Looks great! I might have to give this a go this weekend.

You might want to have a look at this library we are using to load the actual symbol variable font files into our project. These packages are automatically updated when Google's source updates too.

https://github.com/marella/material-symbols/tree/main/material-symbols#readme

You can scope the css import to only load the "rounded" font etc or go even further with different packages that include a single weight.

[savaryna]

Looks interesting.
When I created this I intentionally left out the font loading part out of it. I want people to be able to use whatever strategy fits best with their codebase and did not want to make assumptions on how people load their assets.
So it should play nice with this library. If for example you just need the rounded variant, you could do this:

@import 'tailwindcss';
@import '@savaryna/tailwindcss-material-symbols';
@import 'material-symbols/rounded.css';

@theme {
  --default-ms-font: var(--ms-font-rounded);
}

then in your files you won't need to keep typing .icon-rounded. You can just:

<!-- rounded by default -->
<span class="icon">star</span>

I got to say though, one reason I kinda liked using Google's API for this is their nifty &icon_names=... query, which allows you to download only the icons you are using (similar to importing individual SVGs). I like playing with the variable axes for animations so I did not want to compromise on that by having only one weight for example. But being able to choose only the icons I needed allowed me to cut down on size a lot.

I even played with the idea of having classes for every icon name and inferring that to download only required icons:

<!-- https://...&icon_names=star -->
<span class="icon icon-star" />