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
dotnet runKey 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
dotnet runWhen 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
| Method | Description |
|---|---|
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}")
])1
2
3
4
2
3
4
Action Buttons
csharp
ctx.HStack(h => [
h.Icon("✏️").OnClick(_ => Edit()),
h.Text(" "),
h.Icon("🗑️").OnClick(_ => Delete())
])1
2
3
4
5
2
3
4
5
With Tree Items
Icons are commonly used with Tree items to indicate file types:
csharp
t.Item("Documents").Icon("📁")
t.Item("README.md").Icon("📄")1
2
2