From 50cefaceda0ccad6efaadc363721fef832a30cb0 Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bjarne_fyrstenborg@hotmail.com>
Date: Thu, 27 May 2021 17:51:04 +0200
Subject: [PATCH 01/10] Use umb-icon component

---
 .../src/views/components/umb-child-selector.html            | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-child-selector.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-child-selector.html
index f038b8c4aaa3..f89c4aa547be 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/umb-child-selector.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-child-selector.html
@@ -3,10 +3,10 @@
     <div class="umb-child-selector__child -parent">
         <div class="umb-child-selector__child-description">
             <div class="umb-child-selector__child-icon-holder">
-                <i class="umb-child-selector__child-icon {{ parentIcon }}" aria-hidden="true"></i>
+                <umb-icon icon="{{parentIcon}}" class="umb-child-selector__child-icon {{parentIcon}}"></umb-icon>
             </div>
             <span class="umb-child-selector__child-name">
-                <strong>{{ parentName }}</strong>
+                <strong>{{parentName}}</strong>
             </span>
             <small>
                 (<localize key="general_current"></localize>)
@@ -19,7 +19,7 @@
         <div class="umb-child-selector__child" ng-repeat="selectedChild in selectedChildren">
             <div class="umb-child-selector__child-description">
                 <div class="umb-child-selector__child-icon-holder">
-                    <i class="umb-child-selector__child-icon {{selectedChild.icon}}" aria-hidden="true"></i>
+                    <umb-icon icon="{{selectedChild.icon}}" class="umb-child-selector__child-icon {{selectedChild.icon}}"></umb-icon>
                 </div>
                 <span class="umb-child-selector__child-name">{{selectedChild.name}}</span>
             </div>

From e8a22d097d2861781d0bd9707253d4904be90634 Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bjarne_fyrstenborg@hotmail.com>
Date: Thu, 27 May 2021 18:47:15 +0200
Subject: [PATCH 02/10] Specify button type attribute

---
 .../src/views/common/overlays/itempicker/itempicker.html        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/common/overlays/itempicker/itempicker.html b/src/Umbraco.Web.UI.Client/src/views/common/overlays/itempicker/itempicker.html
index 7074497a98a4..09281ff0bd85 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/overlays/itempicker/itempicker.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/overlays/itempicker/itempicker.html
@@ -12,7 +12,7 @@
 
     <div class="umb-overlay__section-header" ng-if="(model.pasteItems | filter:filter.searchTerm).length > 0">
         <h5><localize key="content_createFromClipboard">Paste from clipboard</localize></h5>
-        <button ng-if="model.clickClearPaste" ng-click="model.clickClearPaste($event)" alt="Clear clipboard for entries accepted in this context.">
+        <button type="button" ng-if="model.clickClearPaste" ng-click="model.clickClearPaste($event)" alt="Clear clipboard for entries accepted in this context.">
             <i class="icon-trash" aria-hidden="true"></i>
         </button>
     </div>

From 37cbbbaca497f032762412e38833b74683908bde Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bjarne_fyrstenborg@hotmail.com>
Date: Thu, 27 May 2021 18:47:43 +0200
Subject: [PATCH 03/10] Use umb-search-filter component

---
 .../overlays/itempicker/itempicker.html       | 32 +++++++++----------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/common/overlays/itempicker/itempicker.html b/src/Umbraco.Web.UI.Client/src/views/common/overlays/itempicker/itempicker.html
index 09281ff0bd85..251b001d8f36 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/overlays/itempicker/itempicker.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/overlays/itempicker/itempicker.html
@@ -1,14 +1,14 @@
 <div ng-controller="Umbraco.Overlays.ItemPickerOverlay" class="umb-itempicker">
-    <div class="form-search" ng-if="model.filter !== false" style="margin-bottom: 15px;">
-        <i class="icon-search" aria-hidden="true"></i>
-        <input type="text"
-               ng-model="filter.searchTerm"
-               class="umb-search-field search-query input-block-level -full-width-input"
-               localize="placeholder"
-               placeholder="@placeholders_filter"
-               umb-auto-focus
-               no-dirty-check />
-    </div>
+
+    <umb-search-filter
+        ng-if="model.filter !== false"
+        model="filter.searchTerm"
+        label-key="placeholders_filter"
+        text="Type to filter..."
+        css-class="w-100"
+        auto-focus="true"
+        style="margin-bottom: 15px;">
+    </umb-search-filter>
 
     <div class="umb-overlay__section-header" ng-if="(model.pasteItems | filter:filter.searchTerm).length > 0">
         <h5><localize key="content_createFromClipboard">Paste from clipboard</localize></h5>
@@ -21,7 +21,7 @@ <h5><localize key="content_createFromClipboard">Paste from clipboard</localize><
         <li ng-repeat="pasteItem in model.pasteItems | filter:filter.searchTerm">
             <button type="button" class="umb-card-grid-item btn-reset" ng-click="model.clickPasteItem(pasteItem)">
                 <span>
-                    <i class="{{ pasteItem.icon }}" aria-hidden="true"></i>
+                    <umb-icon icon="{{pasteItem.icon}}" class="{{pasteItem.icon}}"></umb-icon>
                     {{ pasteItem.name | truncate:true:36 }}
                 </span>
             </button>
@@ -36,16 +36,16 @@ <h5><localize key="content_createEmpty">Create new</localize></h5>
         <li ng-repeat="availableItem in model.availableItems | compareArrays:model.selectedItems:'alias' | orderBy:model.orderBy | filter:filter.searchTerm">
             <button type="button" class="umb-card-grid-item btn-reset" ng-click="selectItem(availableItem)">
                 <span ng-mouseover="showTooltip(availableItem, $event)" ng-mouseleave="hideTooltip()">
-                    <i class="{{ availableItem.icon }}" aria-hidden="true"></i>
-                    <span>{{ availableItem.name }}</span>
+                    <umb-icon icon="{{availableItem.icon}}" class="{{availableItem.icon}}"></umb-icon>
+                    <span>{{availableItem.name}}</span>
                 </span>
             </button>
         </li>
         <li ng-if="model.createNewItem">
-            <button class="umb-card-grid-item btn-reset --creator" ng-click="model.createNewItem.action()">
+            <button type="button" class="umb-card-grid-item btn-reset --creator" ng-click="model.createNewItem.action()">
                 <span>
-                    <i class="{{ model.createNewItem.icon }}"></i>
-                    {{ model.createNewItem.name }}
+                    <umb-icon icon="{{model.createNewItem.icon}}" class="{{model.createNewItem.icon}}"></umb-icon>
+                    {{model.createNewItem.name}}
                 </span>
             </button>
         </li>

From d79c58ce69d18452cab2d448d3c2dabf6ee84834 Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bjarne_fyrstenborg@hotmail.com>
Date: Thu, 27 May 2021 19:52:17 +0200
Subject: [PATCH 04/10] Adjust styling of item picker

---
 .../src/less/components/card.less             | 63 +++++++++----------
 .../overlays/itempicker/itempicker.html       | 18 +++---
 2 files changed, 39 insertions(+), 42 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/components/card.less b/src/Umbraco.Web.UI.Client/src/less/components/card.less
index 7174c0f29073..31d9f5ba1993 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/card.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/card.less
@@ -140,7 +140,7 @@
 
 .umb-card-grid .umb-card-grid-item {
     position: relative;
-	display: block;
+    display: block;
     width: 100%;
     height: 100%;
     padding: 10px 5px;
@@ -153,6 +153,28 @@
     align-items: center;
     justify-content: flex-start;
 
+    &__loading {
+        position: absolute;
+        background-color: rgba(255,255,255,0.8);
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+    }
+
+    .umb-icon {
+        font-size: 30px;
+        line-height: 20px;
+        margin-top: 6px;
+        margin-bottom: 10px;
+        display: block;
+    }
+
+    a {
+        color: @ui-option-type;
+        text-decoration: none;
+    }
+
     > span {
         position: relative;
         display: flex;
@@ -162,15 +184,15 @@
         background-color: transparent;
         word-break: break-word;
     }
-}
 
+    &:hover {
+        background-color: @ui-option-hover;
+        color: @ui-option-type-hover;
+    }
 
-.umb-card-grid .umb-card-grid-item:hover {
-	background-color: @ui-option-hover;
-	color: @ui-option-type-hover;
-}
-.umb-card-grid .umb-card-grid-item:focus {
-	color: @ui-option-type-hover;
+    &:focus {
+        color: @ui-option-type-hover;
+    }
 }
 
 .umb-card-grid .umb-card-grid-item.--creator {
@@ -189,7 +211,6 @@
 	width: 100%;
     padding-top: 100%;
     border-radius: @baseBorderRadius * 2;
-    
     box-sizing: border-box;
     transition: background-color 120ms;
     
@@ -217,30 +238,6 @@
     }
 }
 
-
-.umb-card-grid a {
-    color: @ui-option-type;
-    text-decoration: none;
-}
-
-.umb-card-grid i {
-    font-size: 30px;
-    line-height: 20px;
-    margin-top: 6px;
-    margin-bottom: 10px;
-    display: block;
-}
-
- .umb-card-grid .umb-card-grid-item__loading {
-	 position: absolute;
-	 background-color: rgba(255,255,255,0.8);
-	 top: 0;
-	 right: 0;
-	 bottom: 0;
-	 left: 0;
- }
-
-
 //Round icon-like button - this should be somewhere else
 .umb-btn-round {
 	padding: 4px 6px 4px 6px;
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/overlays/itempicker/itempicker.html b/src/Umbraco.Web.UI.Client/src/views/common/overlays/itempicker/itempicker.html
index 251b001d8f36..691bd4582b60 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/overlays/itempicker/itempicker.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/overlays/itempicker/itempicker.html
@@ -1,14 +1,14 @@
 <div ng-controller="Umbraco.Overlays.ItemPickerOverlay" class="umb-itempicker">
 
-    <umb-search-filter
-        ng-if="model.filter !== false"
-        model="filter.searchTerm"
-        label-key="placeholders_filter"
-        text="Type to filter..."
-        css-class="w-100"
-        auto-focus="true"
-        style="margin-bottom: 15px;">
-    </umb-search-filter>
+    <div class="mb3" ng-if="model.filter !== false">
+        <umb-search-filter
+            model="filter.searchTerm"
+            label-key="placeholders_filter"
+            text="Type to filter..."
+            css-class="w-100"
+            auto-focus="true">
+        </umb-search-filter>
+    </div>
 
     <div class="umb-overlay__section-header" ng-if="(model.pasteItems | filter:filter.searchTerm).length > 0">
         <h5><localize key="content_createFromClipboard">Paste from clipboard</localize></h5>

From a8f4ad47d4a6a1bd62722089149a0990af9dc037 Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bjarne_fyrstenborg@hotmail.com>
Date: Thu, 27 May 2021 19:59:17 +0200
Subject: [PATCH 05/10] Replace trash icons with umb-icon

---
 .../src/views/common/overlays/itempicker/itempicker.html        | 2 +-
 .../src/views/components/umb-child-selector.html                | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/common/overlays/itempicker/itempicker.html b/src/Umbraco.Web.UI.Client/src/views/common/overlays/itempicker/itempicker.html
index 691bd4582b60..2a31fbd6c440 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/overlays/itempicker/itempicker.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/overlays/itempicker/itempicker.html
@@ -13,7 +13,7 @@
     <div class="umb-overlay__section-header" ng-if="(model.pasteItems | filter:filter.searchTerm).length > 0">
         <h5><localize key="content_createFromClipboard">Paste from clipboard</localize></h5>
         <button type="button" ng-if="model.clickClearPaste" ng-click="model.clickClearPaste($event)" alt="Clear clipboard for entries accepted in this context.">
-            <i class="icon-trash" aria-hidden="true"></i>
+            <umb-icon icon="icon-trash" class="icon-trash"></umb-icon>
         </button>
     </div>
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-child-selector.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-child-selector.html
index f89c4aa547be..61448f163e8b 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/umb-child-selector.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-child-selector.html
@@ -25,7 +25,7 @@
             </div>
             <div class="umb-child-selector__child-actions">
                 <button type="button" class="umb-child-selector__child-remove" ng-click="removeChild(selectedChild, $index)">
-                    <i class="icon-trash" aria-hidden="true"></i>
+                    <umb-icon icon="icon-trash" class="icon-trash"></umb-icon>
                 </button>
             </div>
         </div>

From dde9a73e2e9b1a6d33691f29af20ff32451cde32 Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bjarne_fyrstenborg@hotmail.com>
Date: Thu, 27 May 2021 20:11:39 +0200
Subject: [PATCH 06/10] Replace a few icons in umb-grid-selector as well

---
 .../views/components/umb-grid-selector.html   | 29 ++++++++++++-------
 1 file changed, 19 insertions(+), 10 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-grid-selector.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-grid-selector.html
index ae3bbbf69997..7f09177707db 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/umb-grid-selector.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-grid-selector.html
@@ -3,33 +3,42 @@
     <div class="umb-grid-selector__items">
 
         <div class="umb-grid-selector__item -default" ng-if="defaultItem !== null">
+
             <div class="umb-grid-selector__item-content">
-                <i class="umb-grid-selector__item-icon {{ defaultItem.icon }}" aria-hidden="true"></i>
+                <umb-icon icon="{{defaultItem.icon}}" class="{{defaultItem.icon}} umb-grid-selector__item-icon"></umb-icon>
                 <div class="umb-grid-selector__item-label">{{ defaultItem.name }}</div>
                 <div ng-show="defaultItem.id"><button class="umb-grid-selector__item-default-label btn-link -blue" ng-click="openTemplate(defaultItem)"><localize key="general_open">Open</localize></button></div>
                 <span class="umb-grid-selector__item-default-label">(<localize key="general_default">Default</localize> {{itemLabel}})</span>
-            </div>            
-            <i class="umb-grid-selector__item-remove icon-trash" ng-if="selectedItems.length === 1" ng-click="removeDefaultItem()" aria-role="button">
+            </div>
+
+            <button type="button" class="btn-reset" ng-if="selectedItems.length === 1" ng-click="removeDefaultItem()">
+                <umb-icon icon="icon-trash" class="icon-trash umb-grid-selector__item-remove"></umb-icon>
                 <span class="sr-only">Remove Template</span>
-            </i>
+            </button>
+
         </div>
 
         <div class="umb-grid-selector__item" ng-repeat="selectedItem in selectedItems | filter: { alias:'!'+defaultItem.alias }:true">
+
             <div class="umb-grid-selector__item-content">
-                <i class="umb-grid-selector__item-icon {{ selectedItem.icon }}" aria-hidden="true"></i>
+                <umb-icon icon="{{selectedItem.icon}}" class="{{selectedItem.icon}} umb-grid-selector__item-icon"></umb-icon>
+
                 <div class="umb-grid-selector__item-label">{{ selectedItem.name }}</div>
                 <div><button class="umb-grid-selector__item-default-label btn-link -blue" ng-click="openTemplate(selectedItem)"><localize key="general_open">Open</localize></button></div>
                 <div><button class="umb-grid-selector__item-default-label btn-link -blue" ng-click="setAsDefaultItem(selectedItem)"><localize key="grid_setAsDefault">Set as default</localize></button></div>
             </div>
-            <i class="umb-grid-selector__item-remove icon-trash" ng-click="removeItem(selectedItem)" aria-role="button">
+
+            <button type="button" class="btn-reset" ng-click="removeItem(selectedItem)">
+                <umb-icon icon="icon-trash" class="icon-trash umb-grid-selector__item-remove"></umb-icon>
                 <span class="sr-only">Remove Template</span>
-            </i>
+            </button>
+
         </div>
 
-        <button class="umb-grid-selector__item -placeholder" ng-if="(availableItems | compareArrays:selectedItems:'alias').length > 0" ng-click="openItemPicker($event)" hotkey="alt+shift+g">
+        <button type="button" class="umb-grid-selector__item -placeholder" ng-if="(availableItems | compareArrays:selectedItems:'alias').length > 0" ng-click="openItemPicker($event)" hotkey="alt+shift+g">
             <div class="umb-grid-selector__item-content">
-                <div class="umb-grid-selector__item-label -blue" ng-if="defaultItem !== null"><localize key="grid_chooseExtra">Choose extra</localize> {{ itemLabel }}</div>
-                <div class="umb-grid-selector__item-label -blue" ng-if="defaultItem === null"><localize key="grid_chooseDefault">Choose default</localize> {{ itemLabel }}</div>
+                <div class="umb-grid-selector__item-label -blue" ng-if="defaultItem !== null"><localize key="grid_chooseExtra">Choose extra</localize> {{itemLabel}}</div>
+                <div class="umb-grid-selector__item-label -blue" ng-if="defaultItem === null"><localize key="grid_chooseDefault">Choose default</localize> {{itemLabel}}</div>
             </div>
         </button>
 

From 13724a32de6eb5a99e80f803ae2c4969852e855b Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bjarne_fyrstenborg@hotmail.com>
Date: Thu, 27 May 2021 23:06:25 +0200
Subject: [PATCH 07/10] Use umb-icon in datatype picker

---
 .../datatypepicker/datatypepicker.html        | 42 +++++++++----------
 1 file changed, 19 insertions(+), 23 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/datatypepicker/datatypepicker.html b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/datatypepicker/datatypepicker.html
index 3d8e1d4d0ba2..d19f53735459 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/datatypepicker/datatypepicker.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/datatypepicker/datatypepicker.html
@@ -22,8 +22,7 @@
                         text="Type to search"
                         on-change="vm.searchTermChanged()"
                         css-class="w-100"
-                        auto-focus="true"
-                    >
+                        auto-focus="true">
                     </umb-search-filter>
 
                     <umb-load-indicator ng-if="vm.loading === true"></umb-load-indicator>
@@ -33,14 +32,13 @@
                             <h2 class="h5">{{key | umbCmsTitleCase}}</h2>
                             <ul class="umb-card-grid -six-in-row">
                                 <li ng-repeat="dataType in value | orderBy:'name'" data-element="datatype-{{dataType.name}}">
-                                    <button
-                                        type="button"
-                                        class="btn-reset umb-card-grid-item"
-                                        ng-click="vm.viewOptionsForEditor(dataType)"
-                                        title="{{ dataType.name }}">
+                                    <button type="button"
+                                            class="btn-reset umb-card-grid-item"
+                                            ng-click="vm.viewOptionsForEditor(dataType)"
+                                            title="{{dataType.name}}">
                                         <span>
-                                            <i class="{{ dataType.icon }}" ng-class="{'icon-autofill': dataType.icon == null}" aria-hidden="true"></i>
-                                            {{ dataType.name }}
+                                            <umb-icon icon="{{dataType.icon || 'icon-autofill'}}" class="{{dataType.icon || 'icon-autofill'}}"></umb-icon>
+                                            {{dataType.name}}
                                         </span>
                                     </button>
                                 </li>
@@ -62,14 +60,13 @@ <h3 class="h5">{{result.group | umbCmsTitleCase}}</h3>
                                         <div ng-if="dataType.loading" class="umb-card-grid-item__loading">
                                             <div class="umb-button__progress"></div>
                                         </div>
-                                        <button
-                                            type="button"
-                                            class="btn-reset umb-card-grid-item"
-                                            ng-click="vm.pickDataType(dataType)"
-                                            title="{{ dataType.name }}">
+                                        <button type="button"
+                                                class="btn-reset umb-card-grid-item"
+                                                ng-click="vm.pickDataType(dataType)"
+                                                title="{{dataType.name}}">
                                             <span>
-                                                <i class="{{ dataType.icon }}" ng-class="{'icon-autofill': dataType.icon == null}" aria-hidden="true"></i>
-                                                {{ dataType.name }}
+                                                <umb-icon icon="{{dataType.icon || 'icon-autofill'}}" class="{{dataType.icon || 'icon-autofill'}}"></umb-icon>
+                                                {{dataType.name}}
                                             </span>
                                         </button>
                                     </li>
@@ -84,14 +81,13 @@ <h2 class="h5 -border-bottom -black">
                                 <h3 class="h5">{{result.group | umbCmsTitleCase}}</h3>
                                 <ul class="umb-card-grid -six-in-row">
                                     <li ng-repeat="dataType in result.entries | orderBy:'name'">
-                                        <button
-                                            type="button"
-                                            class="btn-reset umb-card-grid-item"
-                                            ng-click="vm.pickEditor(dataType)"
-                                            title="{{ dataType.name }}">
+                                        <button type="button"
+                                                class="btn-reset umb-card-grid-item"
+                                                ng-click="vm.pickEditor(dataType)"
+                                                title="{{dataType.name}}">
                                             <span>
-                                                <i class="{{ dataType.icon }}" ng-class="{'icon-autofill': dataType.icon == null}" aria-hidden="true"></i>
-                                                {{ dataType.name }}
+                                                <umb-icon icon="{{dataType.icon || 'icon-autofill'}}" class="{{dataType.icon || 'icon-autofill'}}"></umb-icon>
+                                                {{dataType.name}}
                                             </span>
                                         </button>
                                     </li>

From 447dae1060d7869f10584b1e02abfa549481966e Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bjarne_fyrstenborg@hotmail.com>
Date: Thu, 27 May 2021 23:19:55 +0200
Subject: [PATCH 08/10] Ensure icons are styles correct in legacy format

---
 .../src/less/components/card.less             | 106 +++++++++---------
 1 file changed, 53 insertions(+), 53 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/components/card.less b/src/Umbraco.Web.UI.Client/src/less/components/card.less
index 31d9f5ba1993..85d0d854f6a6 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/card.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/card.less
@@ -96,8 +96,6 @@
 }
 
 
-
-
 //Card icon grid for picking items off a card
 .umb-card-grid {
 	padding: 0;
@@ -129,70 +127,72 @@
 }
 
 .umb-card-grid.-three-in-row li {
-	flex: 0 0 33.333%;
-    max-width:33.333%;
+    flex: 0 0 33.333%;
+    max-width: 33.333%;
 
-    i {
+    span > i, // legacy icon
+    .umb-icon {
         font-size: 36px;
-        line-height: 28px;
     }
 }
 
-.umb-card-grid .umb-card-grid-item {
-    position: relative;
-    display: block;
-    width: 100%;
-    height: 100%;
-    padding: 10px 5px;
-    border-radius: @baseBorderRadius * 2;
-    transition: background-color 120ms;
-    font-size: 13px;
-    line-height: 1.3em;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: flex-start;
-
-    &__loading {
-        position: absolute;
-        background-color: rgba(255,255,255,0.8);
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
+.umb-card-grid {
+    .umb-card-grid-item {
+        position: relative;
+        display: block;
+        width: 100%;
+        height: 100%;
+        padding: 10px 5px;
+        border-radius: @baseBorderRadius * 2;
+        transition: background-color 120ms;
+        font-size: 13px;
+        line-height: 1.3em;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: flex-start;
+
+        &__loading {
+            position: absolute;
+            background-color: rgba(255,255,255,0.8);
+            top: 0;
+            right: 0;
+            bottom: 0;
+            left: 0;
+        }
+
+        a {
+            color: @ui-option-type;
+            text-decoration: none;
+        }
+
+        > span {
+            position: relative;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-direction: column;
+            background-color: transparent;
+            word-break: break-word;
+        }
+
+        &:hover {
+            background-color: @ui-option-hover;
+            color: @ui-option-type-hover;
+        }
+
+        &:focus {
+            color: @ui-option-type-hover;
+        }
     }
 
+    span > i, // legacy icon
     .umb-icon {
         font-size: 30px;
-        line-height: 20px;
         margin-top: 6px;
         margin-bottom: 10px;
         display: block;
     }
-
-    a {
-        color: @ui-option-type;
-        text-decoration: none;
-    }
-
-    > span {
-        position: relative;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-direction: column;
-        background-color: transparent;
-        word-break: break-word;
-    }
-
-    &:hover {
-        background-color: @ui-option-hover;
-        color: @ui-option-type-hover;
-    }
-
-    &:focus {
-        color: @ui-option-type-hover;
-    }
 }
 
 .umb-card-grid .umb-card-grid-item.--creator {

From a4d68476255f965536f740ff38102e2493eee5ad Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bjarne_fyrstenborg@hotmail.com>
Date: Thu, 27 May 2021 23:29:39 +0200
Subject: [PATCH 09/10] Use umb-icon component in macro parameter editors and
 fix wrong end closing tag from button element

---
 .../macroparameterpicker.html                 | 31 +++++++++----------
 1 file changed, 14 insertions(+), 17 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/macroparameterpicker/macroparameterpicker.html b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/macroparameterpicker/macroparameterpicker.html
index 760c5331b79b..7155edf553a3 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/macroparameterpicker/macroparameterpicker.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/macroparameterpicker/macroparameterpicker.html
@@ -24,8 +24,7 @@
                         text="Type to filter..."
                         css-class="w-100"
                         on-change="vm.filterItems()"
-                        auto-focus="true"
-                    >
+                        auto-focus="true">
                     </umb-search-filter>
 
                     <umb-load-indicator ng-if="vm.loading"></umb-load-indicator>
@@ -36,14 +35,13 @@ <h5>{{key}}</h5>
                             <ul class="umb-card-grid -four-in-row" ng-mouseleave="vm.hideDetailsOverlay()">
                                 <li ng-repeat="parameterEditor in value | orderBy:'name'"
                                     data-element="editor-{{parameterEditor.name}}">
-                                    <button
-                                        type="button"
-                                        ng-mouseover="vm.showDetailsOverlay(parameterEditor)"
-                                        ng-click="vm.pickParameterEditor(parameterEditor)"
-                                        class="btn-reset umb-card-grid-item"
-                                        title="{{parameterEditor.name}}">
+                                    <button type="button"
+                                            ng-mouseover="vm.showDetailsOverlay(parameterEditor)"
+                                            ng-click="vm.pickParameterEditor(parameterEditor)"
+                                            class="btn-reset umb-card-grid-item"
+                                            title="{{parameterEditor.name}}">
                                         <span>
-                                            <i class="{{parameterEditor.icon}}" ng-class="{'icon-autofill': parameterEditor.icon == null}" aria-hidden="true"></i>
+                                            <umb-icon icon="{{parameterEditor.icon || 'icon-autofill'}}" class="{{parameterEditor.icon || 'icon-autofill'}}"></umb-icon>
                                             {{parameterEditor.name}}
                                         </span>
                                     </button>
@@ -63,17 +61,16 @@ <h5>{{result.group}}</h5>
                                             <div ng-if="parameterEditor.loading" class="umb-card-grid-item__loading">
                                                 <div class="umb-button__progress"></div>
                                             </div>
-                                            <button
-                                                type="button"
-                                                ng-mouseover="vm.showDetailsOverlay(parameterEditor)"
-                                                ng-click="vm.pickParameterEditor(parameterEditor)"
-                                                class="btn-reset umb-card-grid-item"
-                                                title="{{parameterEditor.name}}">
+                                            <button type="button"
+                                                    ng-mouseover="vm.showDetailsOverlay(parameterEditor)"
+                                                    ng-click="vm.pickParameterEditor(parameterEditor)"
+                                                    class="btn-reset umb-card-grid-item"
+                                                    title="{{parameterEditor.name}}">
                                                 <span>
-                                                    <i class="{{parameterEditor.icon}}" ng-class="{'icon-autofill': parameterEditor.icon == null}" aria-hidden="true"></i>
+                                                    <umb-icon icon="{{parameterEditor.icon || 'icon-autofill'}}" class="{{parameterEditor.icon || 'icon-autofill'}}"></umb-icon>
                                                     {{parameterEditor.name}}
                                                 </span>
-                                            </a>
+                                            </button>
                                         </li>
                                     </ul>
                                 </div>

From a54b0b1b0fb4a0d4e059eeb6185902fa94393737 Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bjarne_fyrstenborg@hotmail.com>
Date: Thu, 27 May 2021 23:38:06 +0200
Subject: [PATCH 10/10] Use umb-icon in macro parameter editor overlay

---
 src/Umbraco.Web.UI.Client/src/less/components/card.less         | 2 ++
 .../src/less/components/umb-group-builder.less                  | 1 +
 .../src/views/macros/infiniteeditors/parameter.html             | 2 +-
 3 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/components/card.less b/src/Umbraco.Web.UI.Client/src/less/components/card.less
index 85d0d854f6a6..4e3a8b0d7071 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/card.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/card.less
@@ -133,6 +133,7 @@
     span > i, // legacy icon
     .umb-icon {
         font-size: 36px;
+        line-height: 1;
     }
 }
 
@@ -189,6 +190,7 @@
     span > i, // legacy icon
     .umb-icon {
         font-size: 30px;
+        line-height: 1;
         margin-top: 6px;
         margin-bottom: 10px;
         display: block;
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-group-builder.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-group-builder.less
index 87e46f5d8506..a4a8388861a7 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-group-builder.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-group-builder.less
@@ -546,6 +546,7 @@ input.umb-group-builder__group-sort-value {
 
         .icon {
             font-size: 32px;
+            line-height: 1;
         }
     }
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/macros/infiniteeditors/parameter.html b/src/Umbraco.Web.UI.Client/src/views/macros/infiniteeditors/parameter.html
index 8a915be57b91..ca3df1d4eb8e 100644
--- a/src/Umbraco.Web.UI.Client/src/views/macros/infiniteeditors/parameter.html
+++ b/src/Umbraco.Web.UI.Client/src/views/macros/infiniteeditors/parameter.html
@@ -49,7 +49,7 @@
 
                             <button type="button" class="btn-reset editor-info" ng-click="vm.openMacroParameterPicker(model.parameter)">
                                 <div class="editor-icon-wrapper">
-                                    <i class="icon {{ model.parameter.dataTypeIcon }}" ng-class="{'icon-autofill': model.parameter.dataTypeIcon == null}" aria-hidden="true"></i>
+                                    <umb-icon icon="{{model.parameter.dataTypeIcon || 'icon-autofill'}}" class="icon {{model.parameter.dataTypeIcon || 'icon-autofill'}}"></umb-icon>
                                 </div>
 
                                 <div class="editor-details">