From 2af5cf97ef58dcfafde38b31e5109ad4e5a60891 Mon Sep 17 00:00:00 2001
From: Marcel <Marcel@helmont.nl>
Date: Wed, 20 Jun 2018 18:59:01 +0200
Subject: [PATCH 1/2] show selected icon and set selected color on editing icon

---
 .../components/editor/umbeditorheader.directive.js        | 2 ++
 .../common/overlays/iconpicker/iconpicker.controller.js   | 8 ++++++++
 2 files changed, 10 insertions(+)

diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditorheader.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditorheader.directive.js
index 255897e3f8..9f558ea7e4 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditorheader.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditorheader.directive.js
@@ -212,6 +212,8 @@ Use this directive to construct a header inside the main editor window.
                 scope.dialogModel = {
                     view: "iconpicker",
                     show: true,
+                    icon: scope.icon.split(' ')[0],
+                    color: scope.icon.split(' ')[1],
                     submit: function (model) {
 
                         /* ensure an icon is selected, because on focus on close button
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/overlays/iconpicker/iconpicker.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/overlays/iconpicker/iconpicker.controller.js
index bd2071a012..fdad932b30 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/overlays/iconpicker/iconpicker.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/common/overlays/iconpicker/iconpicker.controller.js
@@ -15,6 +15,14 @@ function IconPickerOverlay($scope, iconHelper, localizationService) {
         $scope.model.title = localizationService.localize("defaultdialogs_selectIcon");
     }
 
+    if ($scope.model.color) {
+        $scope.color = $scope.model.color;
+    }
+
+    if ($scope.model.icon) {
+        $scope.searchTerm = $scope.model.icon;
+    }
+
    iconHelper.getIcons().then(function(icons) {
       $scope.icons = icons;
       $scope.loading = false;

From 768e3608539c303f31e9746bdb44a10567cf7026 Mon Sep 17 00:00:00 2001
From: Marcel <Marcel@helmont.nl>
Date: Wed, 20 Jun 2018 20:18:14 +0200
Subject: [PATCH 2/2] mark icon as selected instead off using search for it.

---
 .../src/less/components/umb-iconpicker.less         |  3 ++-
 .../overlays/iconpicker/iconpicker.controller.js    | 13 ++++++++-----
 .../common/overlays/iconpicker/iconpicker.html      |  4 ++--
 3 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-iconpicker.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-iconpicker.less
index 0ecdd4f824..8ed034b403 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-iconpicker.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-iconpicker.less
@@ -27,7 +27,8 @@
 }
 
 .umb-iconpicker-item a:hover,
-.umb-iconpicker-item a:focus{
+.umb-iconpicker-item a:focus,
+.umb-iconpicker-item.-selected {
     background: @gray-10;
     outline: none;
 }
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/overlays/iconpicker/iconpicker.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/overlays/iconpicker/iconpicker.controller.js
index fdad932b30..7a186f3d6b 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/overlays/iconpicker/iconpicker.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/common/overlays/iconpicker/iconpicker.controller.js
@@ -9,19 +9,19 @@
 function IconPickerOverlay($scope, iconHelper, localizationService) {
 
    $scope.loading = true;
-   $scope.model.hideSubmitButton = true;
+   $scope.model.hideSubmitButton = false;
 
     if (!$scope.model.title) {
         $scope.model.title = localizationService.localize("defaultdialogs_selectIcon");
-    }
+    };
 
     if ($scope.model.color) {
         $scope.color = $scope.model.color;
-    }
+    };
 
     if ($scope.model.icon) {
-        $scope.searchTerm = $scope.model.icon;
-    }
+        $scope.icon = $scope.model.icon;
+    };
 
    iconHelper.getIcons().then(function(icons) {
       $scope.icons = icons;
@@ -34,6 +34,9 @@ function IconPickerOverlay($scope, iconHelper, localizationService) {
        $scope.submitForm($scope.model);
    };
 
+    $scope.changeColor = function (color) {
+        $scope.model.color = color;
+    };
 }
 
 angular.module("umbraco").controller("Umbraco.Overlays.IconPickerOverlay", IconPickerOverlay);
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/overlays/iconpicker/iconpicker.html b/src/Umbraco.Web.UI.Client/src/views/common/overlays/iconpicker/iconpicker.html
index b2395228d8..78a215d009 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/overlays/iconpicker/iconpicker.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/overlays/iconpicker/iconpicker.html
@@ -15,7 +15,7 @@
     </div>
 
     <div class="umb-control-group">
-        <select ng-model="color" class="input-block-level">
+        <select ng-model="color" ng-change="changeColor(color)" class="input-block-level">
             <option value=""><localize key="colors_black">Black</localize></option>
             <option value="color-blue-grey"><localize key="colors_bluegrey">Blue Grey</localize></option>
             <option value="color-grey"><localize key="colors_grey">Grey</localize></option>
@@ -42,7 +42,7 @@
 
     <div class="umb-control-group" ng-show="!loading && filtered.length > 0 ">
         <ul class="umb-iconpicker" ng-class="color" ng-show="icons">
-            <li class="umb-iconpicker-item" ng-repeat="icon in filtered = (icons | filter: searchTerm) track by $id(icon)">
+            <li class="umb-iconpicker-item" ng-class="{'-selected': icon == model.icon}" ng-repeat="icon in filtered = (icons | filter: searchTerm) track by $id(icon)">
                 <a href="#" title="{{icon}}" ng-click="selectIcon(icon, color)" prevent-default>
                     <i class="{{icon}} large"></i>
                 </a>