cssgoogle-fontsgoogle-material-icons

Is there a way to switch style in Material Symbols?


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.


Solution

  • 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.

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

    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,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>