Icon

Icons are visual symbols used to represent ideas, objects, or actions.

Usage

Google icons are used by the wc-icon component. You can find the name from Google Icons https://fonts.google.com/icons.

Carbon icons can used by specifing `provider` value. https://carbondesignsystem.com/elements/icons/library/



  <wc-icon name="alarm"></wc-icon>
  <wc-icon src="https://icons.getbootstrap.com/assets/icons/bug.svg"></wc-icon>
  <wc-icon provider="carbon" name="logo--github"></wc-icon>

Theming

Color

You can change the color of the icon using the --icon-color CSS variable.


  <wc-icon name="alarm" style="--icon-color: var(--color-on-surface)"></wc-icon>

  <wc-icon name="alarm" style="--icon-color: var(--color-info)"></wc-icon>
  <wc-icon name="alarm" style="--icon-color: var(--color-success)"></wc-icon>
  <wc-icon name="alarm" style="--icon-color: var(--color-warning)"></wc-icon>
  <wc-icon name="alarm" style="--icon-color: var(--color-danger)"></wc-icon>

  <span style="--icon-color: pink; line-height: 0;">
  <wc-icon name="alarm"></wc-icon>
</span>

Size

Fancy larger or smaller icons? Add size attribute for additional sizes.


  <wc-icon name="alarm"></wc-icon>
  <wc-icon name="alarm" style="--icon-size: 3rem"></wc-icon>
  <wc-icon name="alarm" style="--icon-size: 100px"></wc-icon>