Lumeo

IconPicker

A searchable, virtualized icon grid behind a Popover trigger — pack-agnostic, so it works with any installed Lumeo.Icons.* pack.

Installation

dotnet add package Lumeo

One-time app setup (AddLumeo(), CSS & JS) is covered in the installation guide.

Usage

@using Lumeo

<IconPicker />

When to Use

  • An admin picking a category, folder, or navigation-item icon
  • Theme/branding settings that let a user choose a glyph
  • Anywhere a value component needs to bind to one icon name out of a large set

Pack-agnostic by design

The core Lumeo package references no individual icon pack — IconPicker takes a plain IReadOnlyList<IconPickerItem> (Name + IconSource + optional Keywords). Build that list from whichever Lumeo.Icons.* pack(s) you installed with a one-time reflection pass over the pack's static class — the same technique the icon gallery on this site uses:

using System.Reflection;
using Lumeo.Icons;

private static IReadOnlyList<IconPickerItem> BuildIcons(Type packClass) =>
    packClass.GetProperties(BindingFlags.Public | BindingFlags.Static)
        .Where(p => p.PropertyType == typeof(IconSource))
        .Select(p => new IconPickerItem(p.Name, (IconSource)p.GetValue(null)!))
        .OrderBy(i => i.Name, StringComparer.Ordinal)
        .ToList();

// e.g. in OnInitialized():
_lucideIcons = BuildIcons(typeof(Lucide));

Try searching "money" or "home" — neither is an icon name, both are a Keywords entry.

The opened popover scales with the trigger's Size too — search box, grid cell/glyph size and popover width all grow or shrink alongside it.

Shown next to the category name in every list.

API Reference

Nested inside a FormField, the cascaded context wires up Label, Required, Invalid, and HelperText automatically — the same shape as ColorPicker and Combobox.

  • Popover — The underlying overlay mechanism used by IconPicker
  • Combobox — Searchable single/multi-select for text options
  • ColorPicker — The same trigger + popover shape for color values
  • Icon Packs — Browse every installed pack and copy usage snippets