Skip to content

Icon

The Icon widget displays a single character or short string (like an emoji) that can optionally respond to clicks.

Basic Usage

Use the Icon() extension method to display icons inline with other content.

csharp

Key features:

  • Display emoji, Unicode symbols, or short text
  • Automatically measures to single-character width (or emoji width)
  • Lightweight widget for decorative or indicator purposes

Clickable Icons

Attach an OnClick() handler to make icons interactive.

csharp

When a click handler is attached, the icon:

  • Responds to mouse clicks
  • Becomes focusable for keyboard navigation
  • Can be activated with Enter/Space when focused

API Reference

MethodDescription
Icon(string)Create an icon with the specified character/emoji
OnClick(handler)Handle click events (sync or async)

Common Patterns

Status Indicators

csharp
ctx.HStack(h => [
    h.Icon(status.IsOnline ? "🟢" : "🔴"),
    h.Text($" {status.Name}")
])

Action Buttons

csharp
ctx.HStack(h => [
    h.Icon("✏️").OnClick(_ => Edit()),
    h.Text(" "),
    h.Icon("🗑️").OnClick(_ => Delete())
])

With Tree Items

Icons are commonly used with Tree items to indicate file types:

csharp
t.Item("Documents").Icon("📁")
t.Item("README.md").Icon("📄")
  • Button — Full button with label and keyboard support
  • Text — Display text content
  • Tree — Tree items with icon prefixes

Released under the MIT License.