Icons & Emoji

Tesserae exposes a unified, strongly typed icon set through UIcons (Fluent-inspired icon set) and Emoji enums, plus helpers to render them in components.

Icon components

Use Icon(...) to render icons as standalone components:

iconography-sample.js

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
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 rocket   = Icon(UIcons.Rocket); // By default, icons render in Regular, Small size
            var settings = Icon(UIcons.Settings, UIconsWeight.Regular, TextSize.Small);
            var party    = Icon(Emoji.ConfettiBall, TextSize.Medium);
            document.body.style.overflow = "hidden";
            MountCenteredToBody(HStack().Children(rocket, settings, party));
        }
    }

}

Factory helpers and icon overloads are defined in UI.Components.cs, with dedicated Icon component support for both UIcons and Emoji.

Using icons in buttons and commands

Many components accept icons directly. For example, Button.SetIcon supports both enums:

iconography-2-sample.js

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
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 save = Button("Save").SetIcon(UIcons.Disk, color: Theme.Primary.Foreground);
            var celebrate = Button("Yay").SetIcon(Emoji.ConfettiBall);
            document.body.style.overflow = "hidden";
            MountCenteredToBody(celebrate);
        }
    }

}

Button.SetIcon overloads for UIcons and Emoji are available on the Button component.

Icon enums

UIcons is a large icon enum used throughout the component library (sidebar buttons, dropdowns, toolbars, etc.).
Emoji is an enum representing emoji glyphs for quick inline usage.

When you pick an enum value, Tesserae converts it into the appropriate CSS class or glyph at render time.

Custom Icons

For using custom icons, you can use any css class via the helper UIconHelper.AsUIcon(...). For example, if you would like to use Font Awesome icons, you could use them as follows:

iconography-3-sample.js

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
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 icon = Icon(UIconHelper.AsUIcon("fa-solid fa-rocket"));
            document.body.style.overflow = "hidden";
            MountCenteredToBody(icon);
        }
    }

}

Just don't forget to import the respective font and css files in your h5.json file.

Referenced by

index