@umbraco-cms/backoffice 14.0.0--preview004-46945657 → 14.0.0--preview004-d64318b7

package/dist-cms/css/umb-css.css

@@ -1,7 +1,4 @@
 :root {
-	/* TODO: Consulidate with this green color suggestion, align UUI:*/
-	--uui-color-positive: #1c874c;
-	--uui-color-positive-emphasis: #1a7f47;
 	--umb-footer-layout-height: 54px;
 	--umb-header-layout-height: 70px;
 	--umb-section-sidebar-width: 300px;

package/dist-cms/custom-elements.json

@@ -454,7 +454,7 @@
         {
           "name": "actions",
           "type": "TooltipMenuItem[]",
-          "default": "[{\"label\":\"File\",\"icon\":\"umb:document\"},{\"label\":\"Folder\",\"icon\":\"umb:folder\"}]"
+          "default": "[{\"label\":\"File\",\"icon\":\"icon-document\"},{\"label\":\"Folder\",\"icon\":\"icon-folder\"}]"
         },
         {
           "name": "useSearch",
@@ -467,7 +467,7 @@
           "name": "actions",
           "attribute": "actions",
           "type": "TooltipMenuItem[]",
-          "default": "[{\"label\":\"File\",\"icon\":\"umb:document\"},{\"label\":\"Folder\",\"icon\":\"umb:folder\"}]"
+          "default": "[{\"label\":\"File\",\"icon\":\"icon-document\"},{\"label\":\"Folder\",\"icon\":\"icon-folder\"}]"
         },
         {
           "name": "useSearch",

package/dist-cms/mocks/data/document-blueprint.data.js

@@ -4,7 +4,7 @@ export const data = [
         name: 'Document Blueprint 1',
         type: 'document-blueprint',
         id: '3fa85f64-5717-4562-b3fc-2c963f66afa6',
-        icon: 'umb:blueprint',
+        icon: 'icon-blueprint',
         documentTypeKey: 'd81c7957-153c-4b5a-aa6f-b434a4964624',
         properties: [],
         data: [],
@@ -13,7 +13,7 @@ export const data = [
         name: 'Document Blueprint 2',
         type: 'document-blueprint',
         id: '3fa85f64-5717-4562-b3qc-2c963f66afa6',
-        icon: 'umb:blueprint',
+        icon: 'icon-blueprint',
         documentTypeKey: 'a99e4018-3ffc-486b-aa76-eecea9593d17',
         properties: [],
         data: [],

package/dist-cms/mocks/data/document-type.data.js

@@ -9,7 +9,7 @@ export const data = [
         alias: 'blogPost',
         name: 'All property editors document type',
         description: null,
-        icon: 'umb:item-arrangement',
+        icon: 'icon-item-arrangement',
         allowedAsRoot: true,
         variesByCulture: true,
         variesBySegment: false,
@@ -610,7 +610,7 @@ export const data = [
         alias: 'blogPost',
         name: 'Page Document Type',
         description: null,
-        icon: 'umb:document',
+        icon: 'icon-document',
         allowedAsRoot: true,
         variesByCulture: true,
         variesBySegment: false,
@@ -771,7 +771,7 @@ export const data = [
         alias: 'masterPage',
         name: 'Master Page',
         description: null,
-        icon: 'umb:document',
+        icon: 'icon-document',
         allowedAsRoot: false,
         variesByCulture: false,
         variesBySegment: false,
@@ -821,7 +821,7 @@ export const data = [
         alias: 'baseElementType',
         name: 'Base Element Type',
         description: null,
-        icon: 'umb:science',
+        icon: 'icon-science',
         allowedAsRoot: false,
         variesByCulture: false,
         variesBySegment: false,
@@ -875,7 +875,7 @@ export const data = [
         alias: 'simpleDocumentType',
         name: 'Simple Document Type',
         description: null,
-        icon: 'umb:document',
+        icon: 'icon-document',
         allowedAsRoot: true,
         variesByCulture: false,
         variesBySegment: false,
@@ -928,7 +928,7 @@ export const data = [
         alias: 'simpleDocumentType2',
         name: 'Simple Document Type 2',
         description: null,
-        icon: 'umb:document',
+        icon: 'icon-document',
         allowedAsRoot: true,
         variesByCulture: false,
         variesBySegment: false,
@@ -1008,7 +1008,7 @@ export const treeData = [
         id: '29643452-cff9-47f2-98cd-7de4b6807681',
         isContainer: false,
         parentId: null,
-        icon: 'umb:document',
+        icon: 'icon-document',
     },
     {
         name: 'Page Document Type Compositional',
@@ -1017,7 +1017,7 @@ export const treeData = [
         id: '5035d7d9-0a63-415c-9e75-ee2cf931db92',
         isContainer: false,
         parentId: null,
-        icon: 'umb:document',
+        icon: 'icon-document',
     },
     {
         name: 'Page Document Type Inherited',
@@ -1026,7 +1026,7 @@ export const treeData = [
         id: '8f68ba66-6fb2-4778-83b8-6ab4ca3a7c5d',
         isContainer: false,
         parentId: null,
-        icon: 'umb:document',
+        icon: 'icon-document',
     },
     {
         name: 'Simple Document Type',
@@ -1035,7 +1035,7 @@ export const treeData = [
         id: 'simple-document-type-key',
         isContainer: false,
         parentId: null,
-        icon: 'umb:document',
+        icon: 'icon-document',
     },
     {
         name: 'Simple Document Type 2',
@@ -1044,7 +1044,7 @@ export const treeData = [
         id: 'simple-document-type-2-key',
         isContainer: false,
         parentId: null,
-        icon: 'umb:document',
+        icon: 'icon-document',
     },
 ];
 // Temp mocked database

package/dist-cms/mocks/data/media-type.data.js

@@ -6,7 +6,7 @@ export const data = [
         id: 'c5159663-eb82-43ee-bd23-e42dc5e71db6',
         description: 'Media type 1 description',
         alias: 'mediaType1',
-        icon: 'umb:bug',
+        icon: 'icon-bug',
         properties: [],
         containers: [],
     },

package/dist-cms/mocks/data/user-group.data.js

@@ -35,20 +35,20 @@ export const data = [
     {
         id: 'c630d49e-4e7b-42ea-b2bc-edc0edacb6b1',
         name: 'Administrators',
-        icon: 'umb:medal',
+        icon: 'icon-medal',
         documentStartNodeId: 'all-property-editors-document-id',
         permissions: [UMB_USER_PERMISSION_DOCUMENT_CREATE, UMB_USER_PERMISSION_DOCUMENT_DELETE],
     },
     {
         id: '9d24dc47-a4bf-427f-8a4a-b900f03b8a12',
         name: 'User Group 1',
-        icon: 'umb:bell',
+        icon: 'icon-bell',
         permissions: [UMB_USER_PERMISSION_DOCUMENT_DELETE],
     },
     {
         id: 'f4626511-b0d7-4ab1-aebc-a87871a5dcfa',
         name: 'User Group 2',
-        icon: 'umb:ball',
+        icon: 'icon-ball',
         permissions: [UMB_USER_PERMISSION_DOCUMENT_READ],
     },
 ];

package/dist-cms/mocks/handlers/dictionary.handlers.js

@@ -65,7 +65,7 @@ export const handlers = [
         const data = await req.json();
         if (!data)
             return;
-        data.icon = 'umb:book-alt';
+        data.icon = 'icon-book-alt';
         data.hasChildren = false;
         data.type = 'dictionary-item';
         const value = umbDictionaryData.insert(data);

package/dist-cms/packages/core/collection/components/collection-toolbar.element.js

@@ -13,14 +13,14 @@ export let UmbCollectionToolbarElement = class UmbCollectionToolbarElement exten
         this.actions = [
             {
                 label: 'File',
-                icon: 'umb:document',
+                icon: 'icon-document',
                 action: () => {
                     console.log('Create file');
                 },
             },
             {
                 label: 'Folder',
-                icon: 'umb:folder',
+                icon: 'icon-folder',
                 action: () => {
                     console.log('create folder');
                 },

package/dist-cms/packages/core/components/input-markdown-editor/input-markdown.element.js

@@ -406,7 +406,7 @@ export let UmbInputMarkdownElement = class UmbInputMarkdownElement extends FormC
 					label="Quote"
 					title="Quote"
 					@click=${() => this.#editor?.monacoEditor?.getAction('q')?.run()}>
-					<uui-icon name="umb:quote"></uui-icon>
+					<uui-icon name="icon-quote"></uui-icon>
 				</uui-button>
 				<uui-button
 					compact
@@ -414,7 +414,7 @@ export let UmbInputMarkdownElement = class UmbInputMarkdownElement extends FormC
 					label="Ordered List"
 					title="Ordered List"
 					@click=${() => this.#editor?.monacoEditor?.getAction('ol')?.run()}>
-					<uui-icon name="umb:ordered-list"></uui-icon>
+					<uui-icon name="icon-ordered-list"></uui-icon>
 				</uui-button>
 				<uui-button
 					compact
@@ -422,7 +422,7 @@ export let UmbInputMarkdownElement = class UmbInputMarkdownElement extends FormC
 					label="Unordered List"
 					title="Unordered List"
 					@click=${() => this.#editor?.monacoEditor?.getAction('ul')?.run()}>
-					<uui-icon name="umb:bulleted-list"></uui-icon>
+					<uui-icon name="icon-bulleted-list"></uui-icon>
 				</uui-button>
 			</div>
 			<div>
@@ -432,7 +432,7 @@ export let UmbInputMarkdownElement = class UmbInputMarkdownElement extends FormC
 					label="Fenced Code"
 					title="Fenced Code"
 					@click=${() => this.#editor?.monacoEditor?.getAction('fenced-code')?.run()}>
-					<uui-icon name="umb:code"></uui-icon>
+					<uui-icon name="icon-code"></uui-icon>
 				</uui-button>
 				<uui-button
 					compact
@@ -440,7 +440,7 @@ export let UmbInputMarkdownElement = class UmbInputMarkdownElement extends FormC
 					label="Line"
 					title="Line"
 					@click=${() => this.#editor?.monacoEditor?.getAction('line')?.run()}>
-					<uui-icon name="umb:width"></uui-icon>
+					<uui-icon name="icon-width"></uui-icon>
 				</uui-button>
 				<uui-button
 					compact
@@ -448,7 +448,7 @@ export let UmbInputMarkdownElement = class UmbInputMarkdownElement extends FormC
 					label="Link"
 					title="Link"
 					@click=${() => this.#editor?.monacoEditor?.getAction('link')?.run()}>
-					<uui-icon name="umb:link"></uui-icon>
+					<uui-icon name="icon-link"></uui-icon>
 				</uui-button>
 				<uui-button
 					compact
@@ -456,7 +456,7 @@ export let UmbInputMarkdownElement = class UmbInputMarkdownElement extends FormC
 					label="Image"
 					title="Image"
 					@click=${() => this.#editor?.monacoEditor?.getAction('image')?.run()}>
-					<uui-icon name="umb:picture"></uui-icon>
+					<uui-icon name="icon-picture"></uui-icon>
 				</uui-button>
 			</div>
 			<div>

package/dist-cms/packages/core/components/input-multi-url/input-multi-url.element.js

@@ -135,7 +135,7 @@ export let UmbInputMultiUrlElement = class UmbInputMultiUrlElement extends FormC
 			.name="${link.name || ''}"
 			.detail="${(link.url || '') + (link.queryString || '')}"
 			@open="${() => this._temporary_onClick_editItem(index)}">
-			<uui-icon slot="icon" name="${link.icon || 'umb:link'}"></uui-icon>
+			<uui-icon slot="icon" name="${link.icon || 'icon-link'}"></uui-icon>
 			<uui-action-bar slot="actions">
 				<uui-button .href=${this._modalRoute?.({ index })} label="Edit link">Edit</uui-button>
 				<uui-button @click="${() => this._removeItem(index)}" label="Remove link">Remove</uui-button>

package/dist-cms/packages/core/components/input-upload-field/input-upload-field.element.js

@@ -92,7 +92,7 @@ export let UmbInputUploadFieldElement = class UmbInputUploadFieldElement extends
         })}
 			</div>
 			<uui-button compact @click=${this.#handleRemove} label="Remove files">
-				<uui-icon name="umb:trash"></uui-icon> Remove file(s)
+				<uui-icon name="icon-trash"></uui-icon> Remove file(s)
 			</uui-button>`;
     }
     #handleRemove() {

package/dist-cms/packages/core/components/variant-selector/variant-selector.element.js

@@ -147,7 +147,7 @@ export let UmbVariantSelectorElement = class UmbVariantSelectorElement extends U
 																${this._isNotPublishedMode(variant.culture, variant.state) ? 'add-mode' : ''}"
 																@click=${() => this._switchVariant(variant)}>
 																${this._isNotPublishedMode(variant.culture, variant.state)
-                ? html `<uui-icon class="add-icon" name="umb:add"></uui-icon>`
+                ? html `<uui-icon class="add-icon" name="icon-add"></uui-icon>`
                 : nothing}
 																<div>
 																	${variant.name} <i>(${variant.culture})</i> ${variant.segment}

package/dist-cms/packages/core/debug/debug.element.js

@@ -53,14 +53,14 @@ export let UmbDebugElement = class UmbDebugElement extends UmbLitElement {
     _renderDialog() {
         return html ` <div id="container">
 			<uui-badge color="danger" look="primary" attention @click="${this._openDialog}">
-				<uui-icon name="umb:bug"></uui-icon> Debug
+				<uui-icon name="icon-bug"></uui-icon> Debug
 			</uui-badge>
 		</div>`;
     }
     _renderPanel() {
         return html ` <div id="container">
 			<uui-button color="danger" look="primary" @click="${this._toggleDebugPane}">
-				<uui-icon name="umb:bug"></uui-icon>
+				<uui-icon name="icon-bug"></uui-icon>
 				Debug
 			</uui-button>
 

package/dist-cms/packages/core/debug/modals/debug/debug-modal.element.js

@@ -14,7 +14,7 @@ let UmbContextDebuggerModalElement = class UmbContextDebuggerModalElement extend
     render() {
         return html `
 			<uui-dialog-layout>
-				<span slot="headline"> <uui-icon name="umb:bug"></uui-icon> Debug: Contexts </span>
+				<span slot="headline"> <uui-icon name="icon-bug"></uui-icon> Debug: Contexts </span>
 				<uui-scroll-container id="field-settings"> ${this.data?.content} </uui-scroll-container>
 				<uui-button slot="actions" look="primary" label="Close sidebar" @click="${this._handleClose}">Close</uui-button>
 			</uui-dialog-layout>

package/dist-cms/packages/core/extension-registry/models/collection-view.model.d.ts

@@ -12,8 +12,8 @@ export interface MetaCollectionView {
      * An icon to represent the collection view
      *
      * @examples [
-     *   "umb:box",
-     *   "umb:grid"
+     *   "icon-box",
+     *   "icon-grid"
      * ]
      */
     icon: string;

package/dist-cms/packages/core/extension-registry/models/entity-action.model.d.ts

@@ -12,8 +12,8 @@ export interface MetaEntityAction {
      * An icon to represent the action to be performed
      *
      * @examples [
-     *   "umb:box",
-     *   "umb:grid"
+     *   "icon-box",
+     *   "icon-grid"
      * ]
      */
     icon?: string;

package/dist-cms/packages/core/modal/common/icon-picker/icon-picker-modal.element.d.ts

@@ -1,19 +1,15 @@
 import { UmbIconPickerModalData, UmbIconPickerModalValue, UmbModalBaseElement } from '../../index.js';
 export declare class UmbIconPickerModalElement extends UmbModalBaseElement<UmbIconPickerModalData, UmbIconPickerModalValue> {
+    #private;
     private _iconList;
     private _iconListFiltered;
     private _colorList;
-    private _currentColor?;
-    private _currentIcon?;
-    private _changeIcon;
-    private _filterIcons;
-    private _close;
-    private _submit;
-    private _onColorChange;
+    _modalValue?: UmbIconPickerModalValue;
+    _currentColorVarName: string;
     connectedCallback(): void;
     render(): import("lit-html").TemplateResult<1>;
     renderSearchbar(): import("lit-html").TemplateResult<1>;
-    renderIconSelection(): import("lit-html").TemplateResult<1>;
+    renderIconSelection(): unknown;
     static styles: import("@lit/reactive-element/css-tag").CSSResult[];
 }
 export default UmbIconPickerModalElement;

package/dist-cms/packages/core/modal/common/icon-picker/icon-picker-modal.element.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import icons from '../../../../../shared/icon-registry/icons/icons.json' assert { type: 'json' };
-import { css, html, styleMap, customElement, state } from '../../../../../external/lit/index.js';
+import { css, html, customElement, state, repeat } from '../../../../../external/lit/index.js';
 import { UmbTextStyles } from '../../../../../shared/style/index.js';
 import { UmbModalBaseElement } from '../../index.js';
 // TODO: Make use of UmbPickerLayoutBase
@@ -13,58 +13,53 @@ import { UmbModalBaseElement } from '../../index.js';
 export let UmbIconPickerModalElement = class UmbIconPickerModalElement extends UmbModalBaseElement {
     constructor() {
         super(...arguments);
-        this._iconList = icons.map((icon) => icon.name);
+        this._iconList = icons.filter((icon) => !icon.legacy);
         this._iconListFiltered = [];
         this._colorList = [
-            '#000000',
-            '#373737',
-            '#9e9e9e',
-            '#607d8b',
-            '#2196f3',
-            '#03a9f4',
-            '#3f51b5',
-            '#9c27b0',
-            '#673ab7',
-            '#00bcd4',
-            '#4caf50',
-            '#8bc34a',
-            '#cddc39',
-            '#ffeb3b',
-            '#ffc107',
-            '#ff9800',
-            '#ff5722',
-            '#f44336',
-            '#e91e63',
-            '#795548',
+            { alias: 'text', varName: '--uui-color-text' },
+            { alias: 'yellow', varName: '--uui-palette-sunglow' },
+            { alias: 'pink', varName: '--uui-palette-spanish-pink' },
+            { alias: 'dark', varName: '--uui-palette-gunmetal' },
+            { alias: 'darkblue', varName: '--uui-palette-space-cadet' },
+            { alias: 'blue', varName: '--uui-palette-violet-blue' },
+            { alias: 'red', varName: '--uui-palette-maroon-flush' },
+            { alias: 'green', varName: '--uui-palette-jungle-green' },
+            { alias: 'brown', varName: '--uui-palette-chamoisee' },
         ];
+        this._currentColorVarName = '--uui-color-text';
     }
-    _changeIcon(e) {
+    #changeIcon(e) {
         if (e.type == 'click' || (e.type == 'keyup' && e.key == 'Enter')) {
-            this._currentIcon = e.target.id;
+            this.modalContext?.updateValue({ icon: e.target.id });
         }
     }
-    _filterIcons(e) {
+    #filterIcons(e) {
         if (e.target.value) {
-            this._iconListFiltered = this._iconList.filter((icon) => icon.includes(e.target.value));
+            this._iconListFiltered = this._iconList.filter((icon) => icon.name.includes(e.target.value));
         }
         else {
             this._iconListFiltered = this._iconList;
         }
     }
-    _close() {
+    #close() {
         this.modalContext?.reject();
     }
-    _submit() {
-        this.modalContext?.submit({ color: this._currentColor, icon: this._currentIcon });
+    #submit() {
+        // TODO: Shouldnt we stop sending the value here, instead let the modal context send of its value. and then its up to any one using it to make sure Modal Context value is up to date.
+        this.modalContext?.submit(this._modalValue);
     }
-    _onColorChange(e) {
-        this._currentColor = e.target.value;
+    #onColorChange(e) {
+        this.modalContext?.updateValue({ icon: e.target.value });
     }
     connectedCallback() {
         super.connectedCallback();
-        this._currentColor = this.data?.color ?? this._colorList[0];
-        this._currentIcon = this.data?.icon ?? this._iconList[0];
         this._iconListFiltered = this._iconList;
+        if (this.modalContext) {
+            this.observe(this.modalContext?.value, (newValue) => {
+                this._modalValue = newValue;
+                this._currentColorVarName = this._colorList.find(x => x.alias === newValue?.color)?.alias ?? this._colorList[0].varName;
+            }, '_observeModalContextValue');
+        }
     }
     render() {
         return html `
@@ -73,18 +68,20 @@ export let UmbIconPickerModalElement = class UmbIconPickerModalElement extends U
 					${this.renderSearchbar()}
 					<hr />
 					<uui-color-swatches
-						.value="${this._currentColor || ''}"
+						.value="${this._modalValue?.color ?? ''}"
 						label="Color switcher for icons"
-						@change="${this._onColorChange}">
-						${this._colorList.map((color) => html `
-								<uui-color-swatch label="${color}" title="${color}" value="${color}"></uui-color-swatch>
+						@change="${this.#onColorChange}">
+						${
+        // TODO: Missing translation for the color aliases.
+        this._colorList.map((color) => html `
+								<uui-color-swatch label="${color.alias}" title="${color.alias}" value=${color.alias} style="--uui-swatch-color: var(${color.varName})"></uui-color-swatch>
 							`)}
 					</uui-color-swatches>
 					<hr />
 					<uui-scroll-container id="icon-selection">${this.renderIconSelection()}</uui-scroll-container>
 				</div>
-				<uui-button slot="actions" label="close" @click="${this._close}">Close</uui-button>
-				<uui-button slot="actions" color="positive" look="primary" @click="${this._submit}" label="Submit">
+				<uui-button slot="actions" label="close" @click="${this.#close}">Close</uui-button>
+				<uui-button slot="actions" color="positive" look="primary" @click="${this.#submit}" label="Submit">
 					Submit
 				</uui-button>
 			</umb-body-layout>
@@ -92,7 +89,7 @@ export let UmbIconPickerModalElement = class UmbIconPickerModalElement extends U
     }
     renderSearchbar() {
         return html ` <uui-input
-			@keyup="${this._filterIcons}"
+			@keyup="${this.#filterIcons}"
 			placeholder="Type to filter..."
 			label="Type to filter icons"
 			id="searchbar">
@@ -100,21 +97,19 @@ export let UmbIconPickerModalElement = class UmbIconPickerModalElement extends U
 		</uui-input>`;
     }
     renderIconSelection() {
-        return html `${this._iconListFiltered.map((icon) => {
-            return html `
+        return repeat(this._iconListFiltered, (icon) => icon.name, (icon) => html `
 				<uui-icon
 					tabindex="0"
-					style=${styleMap({ color: this._currentColor })}
-					class="icon ${icon === this._currentIcon ? 'selected' : ''}"
-					title="${icon}"
-					name="${icon}"
-					label="${icon}"
-					id="${icon}"
-					@click="${this._changeIcon}"
-					@keyup="${this._changeIcon}">
+					style="color: var(${this._currentColorVarName})"
+					class="icon ${icon.name === this._modalValue?.icon ? 'selected' : ''}"
+					title="${icon.name}"
+					name="${icon.name}"
+					label="${icon.name}"
+					id="${icon.name}"
+					@click="${this.#changeIcon}"
+					@keyup="${this.#changeIcon}">
 				</uui-icon>
-			`;
-        })}`;
+			`);
     }
     static { this.styles = [
         UmbTextStyles,
@@ -196,10 +191,10 @@ __decorate([
 ], UmbIconPickerModalElement.prototype, "_colorList", void 0);
 __decorate([
     state()
-], UmbIconPickerModalElement.prototype, "_currentColor", void 0);
+], UmbIconPickerModalElement.prototype, "_modalValue", void 0);
 __decorate([
     state()
-], UmbIconPickerModalElement.prototype, "_currentIcon", void 0);
+], UmbIconPickerModalElement.prototype, "_currentColorVarName", void 0);
 UmbIconPickerModalElement = __decorate([
     customElement('umb-icon-picker-modal')
 ], UmbIconPickerModalElement);

package/dist-cms/packages/core/modal/common/property-settings/property-settings-modal.element.js

@@ -196,7 +196,7 @@ export let UmbPropertySettingsModalElement = class UmbPropertySettingsModalEleme
 										?disabled=${this._aliasLocked}>
 										<!-- TODO: validation for bad characters -->
 										<div @click=${this.#onToggleAliasLock} @keydown=${() => ''} id="alias-lock" slot="prepend">
-											<uui-icon name=${this._aliasLocked ? 'umb:lock' : 'umb:unlocked'}></uui-icon>
+											<uui-icon name=${this._aliasLocked ? 'icon-lock' : 'icon-unlocked'}></uui-icon>
 										</div>
 									</uui-input>
 									<uui-textarea

package/dist-cms/packages/core/modal/token/icon-picker-modal.token.d.ts

@@ -1,7 +1,5 @@
 import { UmbModalToken } from '../index.js';
 export interface UmbIconPickerModalData {
-    color: string | undefined;
-    icon: string | undefined;
 }
 export interface UmbIconPickerModalValue {
     color: string | undefined;

package/dist-cms/packages/core/property-editor/uis/block-grid/config/block-configuration/manifests.js

@@ -6,7 +6,7 @@ export const manifest = {
     meta: {
         label: 'Block Grid Block Configuration',
         propertyEditorSchemaAlias: 'Umbraco.BlockGrid.BlockConfiguration',
-        icon: 'umb:autofill',
+        icon: 'icon-autofill',
         group: 'blocks',
     },
 };

package/dist-cms/packages/core/property-editor/uis/block-grid/config/group-configuration/manifests.js

@@ -6,7 +6,7 @@ export const manifest = {
     meta: {
         label: 'Block Grid Group Configuration',
         propertyEditorSchemaAlias: 'Umbraco.BlockGrid.GroupConfiguration',
-        icon: 'umb:autofill',
+        icon: 'icon-autofill',
         group: 'blocks',
     },
 };

package/dist-cms/packages/core/property-editor/uis/block-grid/config/stylesheet-picker/manifests.js

@@ -6,7 +6,7 @@ export const manifest = {
     meta: {
         label: 'Block Grid Stylesheet Picker',
         propertyEditorSchemaAlias: '',
-        icon: 'umb:autofill',
+        icon: 'icon-autofill',
         group: 'blocks',
     },
 };

package/dist-cms/packages/core/property-editor/uis/block-grid/manifests.js

@@ -9,7 +9,7 @@ const manifest = {
     meta: {
         label: 'Block Grid',
         propertyEditorSchemaAlias: 'Umbraco.BlockGrid',
-        icon: 'umb:icon-layout',
+        icon: 'icon-icon-layout',
         group: 'richContent',
         settings: {
             properties: [

package/dist-cms/packages/core/property-editor/uis/block-list/config/block-configuration/manifests.js

@@ -6,7 +6,7 @@ export const manifest = {
     meta: {
         label: 'Block List Block Configuration',
         propertyEditorSchemaAlias: '',
-        icon: 'umb:autofill',
+        icon: 'icon-autofill',
         group: 'common',
     },
 };

package/dist-cms/packages/core/property-editor/uis/block-list/manifests.js

@@ -7,7 +7,7 @@ const manifest = {
     meta: {
         label: 'Block List',
         propertyEditorSchemaAlias: 'Umbraco.BlockList',
-        icon: 'umb:thumbnail-list',
+        icon: 'icon-thumbnail-list',
         group: 'lists',
         settings: {
             properties: [

package/dist-cms/packages/core/property-editor/uis/checkbox-list/manifests.js

@@ -6,7 +6,7 @@ export const manifest = {
     meta: {
         label: 'Checkbox List',
         propertyEditorSchemaAlias: 'Umbraco.CheckboxList',
-        icon: 'umb:bulleted-list',
+        icon: 'icon-bulleted-list',
         group: 'lists',
         settings: {
             properties: [