Icons: extends icon data + improved search#22436
Conversation
There was a problem hiding this comment.
Pull request overview
This PR enriches the backoffice icon registry with thesaurus-style metadata (keywords, groups, related icons) and updates the Icon Picker’s search to take advantage of that extra data via tokenized substring matching plus fuzzy matching.
Changes:
- Added Levenshtein distance/similarity utilities (with tests) and exported them via the core string utils barrel.
- Extended
UmbIconDefinitionand the generated icon registry data to includekeywords,groups, andrelated. - Implemented a new
searchIcons()function for ranked icon searching (incl. fuzzy matching + related icon expansion) and wired it into the icon picker with debounced@inputhandling.
Reviewed changes
Copilot reviewed 10 out of 12 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| src/Umbraco.Web.UI.Client/src/packages/core/utils/string/levenshtein/levenshtein.function.ts | Adds Levenshtein distance + normalized similarity utilities. |
| src/Umbraco.Web.UI.Client/src/packages/core/utils/string/levenshtein/levenshtein.function.test.ts | Unit tests for Levenshtein distance/similarity. |
| src/Umbraco.Web.UI.Client/src/packages/core/utils/string/levenshtein/index.ts | Barrel export for Levenshtein utilities. |
| src/Umbraco.Web.UI.Client/src/packages/core/utils/string/index.ts | Exposes Levenshtein utilities via string utils barrel. |
| src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/types.ts | Extends icon definition type with keywords, groups, related. |
| src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icons.ts | Populates icon registry entries with keywords/groups/related metadata. |
| src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icon-picker-modal/icon-search.function.ts | Implements ranked search (substring + fuzzy) and related icon expansion. |
| src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icon-picker-modal/icon-search.function.test.ts | Unit tests for the new icon search behavior. |
| src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icon-picker-modal/icon-picker-modal.element.ts | Switches to debounced search using searchIcons() on @input. |
| src/Umbraco.Web.UI.Client/devops/icons/todo_implement_this_data_thesaurus.json | Removes now-obsolete thesaurus TODO JSON file. |
| src/Umbraco.Web.UI.Client/devops/icons/index.js | Updates icon generation to include keywords/groups/related in generated icons.ts. |
...raco.Web.UI.Client/src/packages/core/icon-registry/icon-picker-modal/icon-search.function.ts
Outdated
Show resolved
Hide resolved
...raco.Web.UI.Client/src/packages/core/icon-registry/icon-picker-modal/icon-search.function.ts
Outdated
Show resolved
Hide resolved
...raco.Web.UI.Client/src/packages/core/icon-registry/icon-picker-modal/icon-search.function.ts
Outdated
Show resolved
Hide resolved
...raco.Web.UI.Client/src/packages/core/icon-registry/icon-picker-modal/icon-search.function.ts
Outdated
Show resolved
Hide resolved
PR ReviewTarget: Extends
Suggestions
Approved with Suggestions for improvementGood to go — solid implementation with good test coverage. The suggestions are genuinely minor; the search logic is correct and the breaking-change analysis is clean (all changes are additive). Please do a manual sanity check of the icon picker search UX before merging. |
Extended icons data
Embeds data from Lucide and Thesaurus(earlier community package. Which have been approved to get merged into the core)
Search Logic:
This improves the search logic of the Icon Picker to handle that extra data.
Result

Enables this amount of results from a Search, where previously search would only provide exact matches with the icon alias.