Is there a way to switch style in Material Symbols?

Question

When I use Material Icons, I can switch the style by replacing the class name. (between material-icons and material-icons-outlined)

Now I am trying to use Material Symbols. Let's say I use star icon and want to make the icon filled.

public/index.html

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,1,0" />

<span class="material-symbols-outlined">
star
</span>

For Material Symbols, the class name will be the same between filled and outlined and I am wondering if I can switch the style programaitically.

Answer 1

You can use the CSS font-variation-settings property to set the symbol style per element. Check the codepen example here: Variable font with Google Fonts.

I used example code found in Google: Material Symbols guide and modified it to create a little demo showcasing how to set the symbol style using a CSS custom property.

• define a CSS custom property --variation
• modify the custom property with Javascript to hold required font-variation-settings
• use the current custom property value in CSS to set required symbol style:
  1. unset: sets it to the Google default setting for .material-symbols-outlined
  2. thin style: font-variation-settings: 'FILL' 0, 'wght' 100, 'GRAD' 0, 'opsz' 48
  3. filled style: font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 48

snippet give the symbol font file time to load...

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

<style>
:root      { --variation: unset } /* Sets it to default Google settings */
.icons     { font-variation-settings: var(--variation) } /* Use current settings */
.icons > * { font-size: 3.5rem }
</style>

<fieldset>
    <legend>&nbsp;Icon Style&nbsp;</legend>
    <label for="outline">
        <input id="outline" class="radio" type="radio" name="group" checked
               oninput="document.documentElement.style.setProperty('--variation', `unset`);">
        outlined
    </label>
    <label for="thin">
        <input id="thin" class="radio" type="radio" name="group"
               oninput="document.documentElement.style.setProperty('--variation', `'FILL' 0, 'wght' 100, 'GRAD' 0, 'opsz' 48`);">
        thin
    </label>
    <label for="filled">
        <input id="filled" class="radio" type="radio" name="group"
               oninput="document.documentElement.style.setProperty('--variation', `'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 48`);">
        filled
    </label>

    <br><br>

    <div class="icons">
        <span class="material-symbols-outlined">search</span>
        <span class="material-symbols-outlined">home</span>
        <span class="material-symbols-outlined">settings</span>
        <span class="material-symbols-outlined">favorite</span>
    </div>
</fieldset>