Icon

Inline SVG icons from Lucide, rendered on the server.

IzzyBlazor.Icon in the IzzyBlazor.Core package, generated from the 0.1.0-alpha.17 assembly and its doc comments.

Properties (7)

NameIconData?

The icon to show, such as Lucide.House. Set this or Role.

RoleIconRole?

A purpose such as IconRole.Close, resolved through the current icon set. Set this or Name.

SizeIconSize = IconSize.Md

Size relative to the surrounding text. Defaults to the text size (1em).

ColorResponsive<Color> (computed)Responsive

Color. Defaults to the surrounding text color.

Labelstring?

Accessible name. When set, the icon is announced as an image with this label; when not, it is decorative and hidden from assistive technology.

StrokeWidthdouble?

Overrides the stroke width of outlined icons (IzzyBlazor draws Lucide at 1.5).

Spinbool = false

Rotates continuously, for loading indicators. Respects reduced-motion settings.

Plus 4 common props.

Show them here

Events (0)

No events.

Types (3)

`Color`

struct

A color: one of the theme's tokens (so it follows light and dark mode), a custom token from your own theme, or a raw CSS color.

Color members
Member	Description
`Primary`	Brand color.
`OnPrimary`	Text and icons on `Primary`.
`Success`	Success.
`OnSuccess`	Text and icons on `Success`.
`Warning`	Warning.
`OnWarning`	Text and icons on `Warning`.
`Danger`	Danger.
`OnDanger`	Text and icons on `Danger`.
`Info`	Informational.
`OnInfo`	Text and icons on `Info`.
`Neutral`	Neutral accent.
`OnNeutral`	Text and icons on `Neutral`.
`Background`	The page, behind the surfaces: a near-white in the default theme.
`Surface`	Cards, tables, fields and bars: white in light mode.
`FillSubtle`	The quietest fill inside a surface, for large areas: a filled card, a panel, a band.
`Fill`	A fill inside a surface that must show at small sizes: table heads, code, wells.
`FillStrong`	The strongest fill: selected and pressed states, chips, tracks, skeletons.
`SurfaceOverlay`	Overlays that float above the page: menus, popovers, dialogs, toasts. White like `Surface` in light mode, where a shadow sets it apart; a step lighter in dark mode.
`OnSurface`	Text on any surface.
`Muted`	Secondary text on any surface: descriptions, metadata.
`Subtle`	Tertiary text: captions, hints, placeholders. Still at least 4.5:1 on Surface and Fill.
`Disabled`	Text of disabled controls. Deliberately low contrast.
`PrimaryText`	`Primary` tuned for text and links on surfaces (at least 4.5:1).
`SuccessText`	`Success` tuned for text on surfaces (at least 4.5:1).
`WarningText`	`Warning` tuned for text on surfaces (at least 4.5:1).
`DangerText`	`Danger` tuned for text on surfaces (at least 4.5:1).
`InfoText`	`Info` tuned for text on surfaces (at least 4.5:1).
`PrimarySoft`	The accent's soft tint: soft buttons, the current page, chips. Text on it: `PrimaryText`.
`SuccessSoft`	`Success`'s soft tint, behind a success message. Text on it: `SuccessText`.
`WarningSoft`	`Warning`'s soft tint. Text on it: `WarningText`.
`DangerSoft`	`Danger`'s soft tint. Text on it: `DangerText`.
`InfoSoft`	`Info`'s soft tint. Text on it: `InfoText`.
`Focus`	The focus ring and field halo color: `--ib-color-focus`, the primary color unless the theme sets it.
`Border`	Borders and dividers. Decorative: too light to be the only edge of a control.
`Outline`	The edge of a control, such as an input or switch track: about 2:1 against `Surface`, darker than `Border` so an empty field reads as a box.
`Transparent`	Fully transparent.
`CurrentColor`	The current text color.
`Token(string name)`	A theme token by name, rendered as `var(--ib-color-{name})`. Use it for tokens your own theme adds.
`Of(string css)`	A raw CSS color such as `#ff6600` or `oklch(70% 0.1 250)`. Checked for unsafe characters.
`Css string`	The CSS value this color renders as.
`TokenName string?`	The theme token name, such as `primary`, or `null` for a raw color.
`ContrastText Color?`	The text color that pairs with this color used as a background: `OnPrimary` for `Primary`, `OnSurface` for the surfaces, `on-{name}` for a custom token (which falls back to the inherited color when the theme does not define it). `null` for raw colors and for colors that are already text colors.

`IconRole`

enum

The icons IzzyBlazor's own components use, by purpose rather than by name, so the whole library can switch icon sets in one place.

IconRole values
Value	Description
`Close`	Close a dialog, toast or alert.
`ChevronDown`	Open a menu or expand downward.
`ChevronUp`	Collapse upward.
`ChevronLeft`	Previous, or back.
`ChevronRight`	Next, or forward.
`Check`	Selected or done.
`Minus`	Remove, decrease, or indeterminate.
`Plus`	Add or increase.
`Menu`	Open the navigation menu.
`Search`	Search.
`MoreHorizontal`	More actions.
`Info`	Informational message.
`Success`	Success message.
`Warning`	Warning message.
`Error`	Error message.
`ExternalLink`	Opens in a new tab.
`Copy`	Copy to clipboard.
`Copied`	Copied.
`Calendar`	Date input.
`Clock`	Time input.
`Show`	Show password.
`Hide`	Hide password.
`Loading`	Busy or loading (spun with CSS).
`SortAscending`	Column sorted ascending.
`SortDescending`	Column sorted descending.
`Sortable`	Column sortable, not sorted.
`TrendUp`	A figure went up.
`TrendDown`	A figure went down.
`TrendFlat`	A figure didn't change.
`Filter`	Filter a column or list.
`SchemeLight`	The light color scheme.
`SchemeDark`	The dark color scheme.
`SchemeSystem`	Follow the device's color scheme.
`Person`	A person with no photo or name, such as an empty avatar.
`Play`	Play a video.
`Upload`	Upload a file.

`IconSize`

enum

Icon sizes, relative to the surrounding text so icons line up with labels.

IconSize values
Value	Description
`Xs`	0.75em.
`Sm`	0.875em.
`Md`	1em, the size of the surrounding text (the default).
`Lg`	1.25em.
`Xl`	1.5em.
`Xl2`	2em.
`Xl3`	3em.