From bf818c80ae1ecb855e02ba561acc2af8dd7f415a Mon Sep 17 00:00:00 2001 From: Bjarne Fyrstenborg Date: Mon, 17 Nov 2025 22:47:32 +0100 Subject: [PATCH 1/2] Filter icons in modal --- .../icon-picker-modal/icon-picker-modal.element.ts | 8 ++++++++ .../icon-picker-modal/icon-picker-modal.token.ts | 1 + 2 files changed, 9 insertions(+) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icon-picker-modal/icon-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icon-picker-modal/icon-picker-modal.element.ts index ea94404e2f84..2be9d3ed4ed7 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icon-picker-modal/icon-picker-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icon-picker-modal/icon-picker-modal.element.ts @@ -39,6 +39,14 @@ export class UmbIconPickerModalElement extends UmbModalBaseElement { this.observe(context?.approvedIcons, (icons) => { this.#icons = icons; + if (this.data?.filter) { + this.#icons = this.#icons.filter((icon) => { + if (Array.isArray(this.data.filter)) { + return this.data.filter.some((f) => icon.name.toLowerCase().startsWith(f.toLowerCase())); + } + return icon.name.match(new RegExp(this.data.filter, "i")); + }); + } this.#filterIcons(); }); }); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icon-picker-modal/icon-picker-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icon-picker-modal/icon-picker-modal.token.ts index bf1aafec4735..33ed574a2699 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icon-picker-modal/icon-picker-modal.token.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icon-picker-modal/icon-picker-modal.token.ts @@ -1,6 +1,7 @@ import { UmbModalToken } from '@umbraco-cms/backoffice/modal'; export interface UmbIconPickerModalData { + filter?: string[] | string; placeholder?: string; showEmptyOption?: boolean; } From 61bf0a3a4ad8327bbfb06220373f9bdaf5f09333 Mon Sep 17 00:00:00 2001 From: Bjarne Fyrstenborg Date: Tue, 18 Nov 2025 22:07:08 +0100 Subject: [PATCH 2/2] Filter predicate --- .../icon-picker-modal/icon-picker-modal.element.ts | 7 +------ .../icon-picker-modal/icon-picker-modal.token.ts | 2 +- 2 files changed, 2 insertions(+), 7 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icon-picker-modal/icon-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icon-picker-modal/icon-picker-modal.element.ts index 2be9d3ed4ed7..cecf26afccae 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icon-picker-modal/icon-picker-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icon-picker-modal/icon-picker-modal.element.ts @@ -40,12 +40,7 @@ export class UmbIconPickerModalElement extends UmbModalBaseElement { this.#icons = icons; if (this.data?.filter) { - this.#icons = this.#icons.filter((icon) => { - if (Array.isArray(this.data.filter)) { - return this.data.filter.some((f) => icon.name.toLowerCase().startsWith(f.toLowerCase())); - } - return icon.name.match(new RegExp(this.data.filter, "i")); - }); + this.#icons = this.#icons.filter(this.data?.filter); } this.#filterIcons(); }); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icon-picker-modal/icon-picker-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icon-picker-modal/icon-picker-modal.token.ts index 33ed574a2699..e960e24a6782 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icon-picker-modal/icon-picker-modal.token.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icon-picker-modal/icon-picker-modal.token.ts @@ -1,7 +1,7 @@ import { UmbModalToken } from '@umbraco-cms/backoffice/modal'; export interface UmbIconPickerModalData { - filter?: string[] | string; + filter?: (item: UmbIconDefinition) => boolean; placeholder?: string; showEmptyOption?: boolean; }