From 3f93285361b9d0c98c123a93cd9f4ece1b25a2d3 Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bf@mcb.dk>
Date: Tue, 17 Oct 2023 15:38:29 +0200
Subject: [PATCH 1/2] Change icon picker size to medium

---
 .../src/packages/core/modal/token/icon-picker-modal.token.ts    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/icon-picker-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/icon-picker-modal.token.ts
index eab1fe04ee..d98dd43b52 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/icon-picker-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/icon-picker-modal.token.ts
@@ -14,6 +14,6 @@ export const UMB_ICON_PICKER_MODAL = new UmbModalToken<UmbIconPickerModalData, U
 	'Umb.Modal.IconPicker',
 	{
 		type: 'sidebar',
-		size: 'small',
+		size: 'medium',
 	},
 );

From 60225f354aa08015415bc20b2ab6e3d26c7108dc Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bf@mcb.dk>
Date: Tue, 17 Oct 2023 15:38:55 +0200
Subject: [PATCH 2/2] Align icons in grid

---
 .../common/icon-picker/icon-picker-modal.element.ts    | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/icon-picker/icon-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/icon-picker/icon-picker-modal.element.ts
index 352cf0a9dc..bb57fbd592 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/icon-picker/icon-picker-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/icon-picker/icon-picker-modal.element.ts
@@ -95,7 +95,6 @@ export class UmbIconPickerModalElement extends UmbModalBaseElement<UmbIconPicker
 							`,
 						)}
 					</uui-color-swatches>
-
 					<hr />
 					<uui-scroll-container id="icon-selection">${this.renderIconSelection()}</uui-scroll-container>
 				</div>
@@ -129,7 +128,8 @@ export class UmbIconPickerModalElement extends UmbModalBaseElement<UmbIconPicker
 					label="${icon}"
 					id="${icon}"
 					@click="${this._changeIcon}"
-					@keyup="${this._changeIcon}"></uui-icon>
+					@keyup="${this._changeIcon}">
+				</uui-icon>
 			`;
 		})}`;
 	}
@@ -168,7 +168,8 @@ export class UmbIconPickerModalElement extends UmbModalBaseElement<UmbIconPicker
 			#icon-selection {
 				line-height: 0;
 				display: grid;
-				grid-template-columns: repeat(auto-fit, minmax(40px, calc(100% / 8)));
+				grid-template-columns: repeat(auto-fit, minmax(40px, calc((100% / 12) - 10px)));
+				gap: 10px;
 				overflow-y: scroll;
 				max-height: 100%;
 				min-height: 0;
@@ -182,6 +183,7 @@ export class UmbIconPickerModalElement extends UmbModalBaseElement<UmbIconPicker
 				height: 100%;
 				padding: var(--uui-size-space-3);
 				box-sizing: border-box;
+				cursor: pointer;
 			}
 
 			#icon-selection .icon-container {
@@ -199,7 +201,7 @@ export class UmbIconPickerModalElement extends UmbModalBaseElement<UmbIconPicker
 			}
 
 			uui-color-swatches {
-				margin: -0.75rem;
+				margin: 0;
 			}
 		`,
 	];