Icon
Renders an SVG icon from a path string
Divergence from Blok
Structural divergence from Blok for the default variant. Blok always wraps the icon in a <span> that hosts the variant/colorScheme classes; className lands on the span, not the SVG. Our implementation diverges for the Default variant only: the <svg> is the root element and ClassName lands directly on it. This is required so that rotation animations (e.g. Accordion chevron) that pass transition-transform rotate-* via ClassName animate correctly — targeting the SVG with [&>svg]:rotate-* or via ClassName both land on the same element.
For Subtle and Filled variants a <span> wrapper is rendered, matching Blok's structure exactly. ClassName goes on the span in those cases.
The ColorScheme parameter is nullable for the Default variant. When not set (the default), the icon inherits its fill color from the parent element — preserving backward compatibility with all existing usages that rely on color inheritance (Button, Alert, Checkbox, etc.). Pass ColorScheme explicitly to pin an icon's color independently of its context.
Additional Blazor-specific parameters with no Blok equivalent: Scale (SVG transform for visual tweaks), AiGradient (purple-to-red gradient fill), ResetClassName (opts out of layout defaults), and ViewBox (Blok hardcodes 0 0 24 24). The companion IconSvg static class bundles 300+ MDI path strings; the larger PINGWorks.SitecoreBlok.BlazorUI.Icons package ships 7,500+.
Examples
Default
Sizes
Color scheme
Subtle variant
Filled variant
Different scales
Various icons
API
The element family below can be composed together. Click an element to jump to its properties.
| Element | Purpose |
|---|---|
| Icon | Renders an inline <svg> from an MDI-style path string. Sized via IconSize or ClassName (size-X); visually fine-tuned via Scale. |
Icon
Renders an inline <svg> from an MDI-style path string. Sized via IconSize or ClassName (size-X); visually fine-tuned via Scale.
| Property | Type | Required | Description |
|---|---|---|---|
| Svg | string | SVG path data to render inside the <path d>. Pass a constant from IconSvg or the PINGWorks.SitecoreBlok.BlazorUI.Icons package. | |
| Variant | IconVariant | Visual tile style. Default: IconVariant.Default (no tile, svg is root element). Subtle adds a soft tinted background tile; Filled adds a solid background tile. Tile variants render a <span> wrapper. | |
| ColorScheme | IconColorScheme? | Color token applied to the icon and (for tile variants) the tile background. Default: null (inherits color from parent) for Default variant; Primary for Subtle/Filled. Values: Primary, Neutral, Success, Danger, Warning, Yellow, Teal, Cyan, Blue, Purple, Pink. | |
| IconSize | IconSize | Preset size token. Default: IconSize.Default (size-6). Other values: Sm (size-4), Md (size-5), Lg (size-7), Xl (size-9), Xxl (size-11), Custom (emits no size class — control size entirely via ClassName). | |
| Scale | double? | SVG transform="scale(n)" factor. Scales the glyph without changing the containing box — use for visual tweaks. | |
| Fill | string | Fill colour for the path. Default: "currentColor". Ignored when AiGradient is set. | |
| ViewBox | string | SVG viewBox. Default: "0 0 24 24" (MDI canvas). | |
| Title | string? | Accessible label. Rendered as a <title> element and applied to aria-label. | |
| AiGradient | AiGradient? | When set, replaces the fill with a purple-to-red linear gradient at the given palette step (e.g. G500). | |
| ResetClassName | bool | Opts out of the layout defaults (inline-block align-middle shrink-0) on the Default variant. Does NOT strip the size class. Default: false. | |
| ClassName | string? | Extra CSS classes. For Default variant appended to the <svg>; for Subtle/Filled variants appended to the outer <span>. | |
| AdditionalAttributes | Dictionary<string, object>? | Captured unmatched attributes, forwarded to the <svg> in all variants. |