Icon

Description

The Icon component renders a visual glyph using either the strongly typed UIcons set or an Emoji. It is useful for reinforcing actions, labeling content, and improving scanability without writing raw HTML or CSS classes by hand.

Usage

Create icons through the Icon(...) helper overloads or by instantiating Icon directly. You can update the glyph later with SetIcon(...), style it with foreground color and text-formatting helpers, and add a tooltip with SetTitle(...).

using System;
using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var sampleComponent = new IconExample();
            document.body.style.overflow = "hidden";
            MountCenteredToBody(sampleComponent);
        }
    }

    public class IconExample : IComponent
    {
        public HTMLElement Render()
        {
            var saveIcon = Icon(UIcons.Disk, size: TextSize.Large)
                .Foreground(Theme.Primary.Background)
                .SetTitle("Save");

            var emojiIcon = Icon(Emoji.Rocket, TextSize.Large);

            return HStack().AlignItemsCenter().Children(
                saveIcon,
                TextBlock("Save action"),
                emojiIcon,
                TextBlock("Launch")
            ).Render();
        }
    }
}

Methods

• SetIcon(UIcons icon, UIconsWeight weight = UIconsWeight.Regular, TextSize size = TextSize.Small) replaces the current icon using the UIcons set.
• SetIcon(Emoji icon, TextSize size = TextSize.Medium) replaces the current icon using an emoji.
• SetTitle(string title) sets the tooltip text and returns the icon.
• Render() returns the underlying icon element.
• Transform(UIcons icon, UIconsWeight weight) converts an icon and weight into the CSS class name used internally.

Properties

• Foreground gets or sets the icon color.
• Size gets or sets the text size class.
• Weight gets or sets the text weight class.
• TextAlign gets or sets the alignment class.
• Title gets or sets the tooltip text.

See also

• UIcons
• Button
• Horizontal Separator