From c9e98741f65dc3dab7dfda5eb30a370ba8fcd777 Mon Sep 17 00:00:00 2001
From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com>
Date: Fri, 23 Jun 2023 16:46:05 +0200
Subject: [PATCH] allow the usage of tiny icons

---
 ...rty-editor-ui-tiny-mce-toolbar-configuration.element.ts | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editors/uis/tiny-mce/config/toolbar/property-editor-ui-tiny-mce-toolbar-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editors/uis/tiny-mce/config/toolbar/property-editor-ui-tiny-mce-toolbar-configuration.element.ts
index 7fa88663d3..8aa3c4a9cb 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editors/uis/tiny-mce/config/toolbar/property-editor-ui-tiny-mce-toolbar-configuration.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editors/uis/tiny-mce/config/toolbar/property-editor-ui-tiny-mce-toolbar-configuration.element.ts
@@ -4,11 +4,14 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { UmbPropertyEditorExtensionElement, umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
 import { firstValueFrom } from '@umbraco-cms/backoffice/external/rxjs';
 import { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/components';
+import { tinymce } from '@umbraco-cms/backoffice/external/tinymce';
+
+const tinyIconSet = tinymce.default.IconManager.get('default');
 
 type ToolbarConfig = {
 	alias: string;
 	label: string;
-	icon: string;
+	icon?: string;
 	selected: boolean;
 };
 
@@ -102,7 +105,7 @@ export class UmbPropertyEditorUITinyMceToolbarConfigurationElement
 				this._toolbarConfig,
 				(v) => html`<li>
 					<uui-checkbox value=${v.alias} ?checked=${v.selected} @change=${this.onChange}>
-						<uui-icon name=${v.icon}></uui-icon>
+						<uui-icon .svg=${tinyIconSet.icons[v.icon ?? 'alignjustify']}></uui-icon>
 						${v.label}
 					</uui-checkbox>
 				</li>`