Icon
Material Design 3-styled standalone icon web component (lit-material-icon) — consistent sizing and color for any icon content (SVG, emoji, image); ships no icon set of its own.
- 1.8 KB gzipped
- @lit-material/icon 0.1.1
- Renders on the server
Example
Icon
A consistent sizing/color wrapper for icon content — ships no icon set of its own.
<lit-material-icon size="medium" color="inherit">★</lit-material-icon>
Sizes
Colors
Labeled (meaningful, not decorative)
By name
Register a set once with registerIcons(), then use name.
Install
npm install @lit-material/icon @lit-material/tokensimport "@lit-material/icon";Link @lit-material/tokens/css/index.css once per page for the colour, type and shape tokens. Install guide
API
<lit-material-icon>
A consistent sizing/color wrapper for icon content — an inline <svg>,
an <img>, or an emoji/font-glyph character — ships no icon set of its
own. Distinct from lit-material-icon-button: that's a clickable button
that happens to contain an icon; this is the icon itself, usable
anywhere (inline with text, inside a card, standing alone as a status
indicator).
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
size | size | IconSize | "medium" | |
color | color | IconColor | "inherit" | |
label | label | string | "" | An accessible name — set only when the icon conveys information no nearby text already does. |
name | name | string | "" | A name registered with registerIcons(); replaces the slotted content. |
Slots
| Slot | Description |
|---|---|
| default | The icon content (an <svg>, an <img>, or a character); not used with name. |
CSS parts
| Part | Description |
|---|---|
icon | The host itself (size, color). |