Icon
Icons are visual symbols used to represent ideas, objects, or actions. They communicate messages at a glance, afford interactivity, and draw attention to important information.
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>
On this page