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.
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.
--variation
font-variation-settings
unset
: sets it to the Google default setting for .material-symbols-outlined
font-variation-settings: 'FILL' 0, 'wght' 100, 'GRAD' 0, 'opsz' 48
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> Icon Style </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>