Icon
a single Material Icons glyph by name. decorative by default; give it a label when it carries meaning on its own.
Example
Using it
API
Theming
a single Material Icons glyph by name. decorative by default; give it a label when it carries meaning on its own.
Example
<span class="lucent-icon lucent-icon--sm" aria-hidden="true"> <span class="material-icons lucent-icon__glyph">settings</span> </span> <span class="lucent-icon lucent-icon--md" aria-hidden="true"> <span class="material-icons lucent-icon__glyph">settings</span> </span> <span class="lucent-icon lucent-icon--lg" aria-hidden="true"> <span class="material-icons lucent-icon__glyph">settings</span> </span> <span class="lucent-icon lucent-icon--xl" aria-hidden="true"> <span class="material-icons lucent-icon__glyph">settings</span> </span>
<lucent-icon name="settings" size="lg"></lucent-icon>
Using it
| Angular | lucent-icon import { LucentIcon } from '@design-foundry/lucent-angular'; |
| Stylesheet | .lucent-icon @design-foundry/lucent-styles/core.css |
API
| Name | Kind | Type | Default | Description |
|---|---|---|---|---|
| name | input | string | widgets | Material Icons ligature. |
| size | input | xs | sm | md | lg | xl | md | glyph size. |
| ariaLabel | input | string | '' | accessible name; makes the icon a labelled image. |
Theming