Icons

Example

favorite

Sizes

mail

<mc-icon small>mail</mc-icon>
<mc-icon>mail</mc-icon>
<mc-icon large>mail</mc-icon>
<mc-icon extra-large>mail</mc-icon>

Variations

home

<mc-icon extra-large>home</mc-icon>
<mc-icon extra-large rounded>home</mc-icon>
<mc-icon bold extra-large rounded>home</mc-icon>
<mc-icon extra-large filled>home</mc-icon>
<mc-icon extra-large filled rounded>home</mc-icon>

Color

Theme color variables automatically adjust for light and dark modes

favorite

<mc-icon style="color: var(--mc-primary)" filled large>favorite</mc-icon>

Loading

You can use google icons or other font icon libraries for icons

If you are not using a variable font then mc-fill will not work


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

/* 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');
}