0

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.

Ooto
  • 1,117
  • 16
  • 39
  • As I read in the doc, you can set the CSS `font-variation-settings` property per element. Check the codepen example here: [Variable font with Google Fonts](https://developers.google.com/fonts/docs/material_symbols#variable_font_with_google_fonts). – Rene van der Lende Feb 16 '23 at 00:45
  • 1
    @RenevanderLende Ah I see. I missed there is a property like this.. Thanks for comment. You can post this as an answer so I can approve it. – Ooto Feb 16 '23 at 01:58

1 Answers1

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,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>
Rene van der Lende
  • 4,992
  • 2
  • 14
  • 25