Icon picker

Purpose and placement

A searchable catalog gives bookmarks and boards an optional recognizable symbol.

Anatomy

• Search input
• Absolutely positioned results list
• Result icon and name
• Selected row with removal

Contract

States and feedback

• No query: no list
• Query matches: scrollable suggestions
• Selected icon
• Cleared selection

Interaction and composition

Preserve the relationship between search field and results. Choosing an item stores its class and hides suggestions. A loaded existing record uses Selected icon as the display label instead of resolving the catalog name.

Responsive behavior

The list uses max-height 192px and scrolls. Its absolute placement can cover save actions or extend past the viewport.

Accessibility contract

Results are buttons, so tab/click work, but there are no combobox/listbox roles, active-descendant handling or arrow-key selection.

Known implementation gaps

No explicit no-icon-results feedback exists. The dashboard memo depends on query rather than the lazy-loaded catalog, so the first search may stay empty until the query changes after loading. Captures reproduce that next-keystroke interaction. Lazy loading has no loading announcement. Saved arbitrary classes may not have valid local glyphs.

Source references