Example
Sizes
<wfc-icon small>mail</wfc-icon>
<wfc-icon>mail</wfc-icon>
<wfc-icon large>mail</wfc-icon>
<wfc-icon extra-large>mail</wfc-icon>
Variations
<wfc-icon extra-large>home</wfc-icon>
<wfc-icon extra-large rounded>home</wfc-icon>
<wfc-icon extra-large rounded bold>home</wfc-icon>
<wfc-icon extra-large filled>home</wfc-icon>
<wfc-icon extra-large rounded filled>home</wfc-icon>
Color
Theme color variables automatically adjust for light and dark modes
<wfc-icon large filled style="color: var(--wfc-primary)">favorite</wfc-icon>
Loading
You can use google icons or other font icon libraries for icons
If you are not using a variable font then wfc-fill will not work
<!--
Loading from google fonts
you can add `&text=favorite,home,mail`
to the url to load an icon subset for smaller file size.
Although the size changes are inconsistent and non-linear
-->
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
/* load font file directly */
@font-face {
font-family: 'Material Symbols Outlined';
font-style: normal;
font-weight: 100 700;
/* Using block to prevent text from showing before load */
font-display: block;
src: url(./outlined-icons.woff2) format('woff2');
}
@font-face {
font-family: 'Material Symbols Rounded';
font-style: normal;
font-weight: 100 700;
font-display: block;
src: url(./rounded-icons.woff2) format('woff2');
}