Icon

Discriminator: icon
Fluent UI Blazor Component: FluentIcon

Description

The Icon component renders a Fluent UI icon by name. It supports configurable variants (Regular or Filled), sizes, and colors. Icons are resolved dynamically at runtime from the Fluent UI icon library.

Properties

Property	Type	Required	Default	Description
`component`	`string`	✅ Yes	`"icon"`	Type discriminator
`style`	`string`	No	`null`	Inline CSS style
`id`	`string`	No	`null`	Component identifier
`name`	`string`	No	`"Warning"`	Icon name from the Fluent UI icon library (e.g. `"CheckmarkCircle"`, `"Warning"`, `"DismissCircle"`, `"Info"`)
`title`	`string`	No	`null`	Accessible title/tooltip text for the icon
`variant`	`IconVariant`	No	`Regular`	Icon style variant: `Regular` (outline) or `Filled`
`size`	`IconSize`	No	`Size20`	Icon size (see values below)
`color`	`Color`	No	`null`	Predefined color theme (see shared enumerations)
`customColor`	`string`	No	`null`	Custom CSS color value (e.g. `"#FF0000"`)
`width`	`string`	No	`null`	Custom CSS width override (e.g. `"64px"`)

IconVariant Values

Value	Description
`Regular`	Outline/regular icon style
`Filled`	Filled/solid icon style

IconSize Values

Value	Pixel Size
`Size10`	10px
`Size12`	12px
`Size16`	16px
`Size20`	20px (default)
`Size24`	24px
`Size28`	28px
`Size32`	32px
`Size48`	48px

Finding Icon Names

Use the Fluent UI Blazor Icon Search to browse and search for available icon names. The name property should match the icon's class name (e.g. "CheckmarkCircle", "Warning", "DismissCircle", "ArrowClockwise").

📷 Placeholder: Insert screenshot of the Fluent UI icon search page.

Data Binding

The Icon component is a display-only component and does not provide data or validation.

JSON Example

Simple Icon

Rendering...

Icon Row

Rendering...

Filled Variant with Custom Color

Rendering...

Conigma Connect