diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbcolorswatches.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbcolorswatches.directive.js
index 89f6ebcd6a..1cbedaf26e 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbcolorswatches.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbcolorswatches.directive.js
@@ -33,10 +33,11 @@ Use this directive to generate color swatches to pick from.
                 scope.useColorClass = false;
             }
             
-            scope.setColor = function (color) {
+            scope.setColor = function (color, $index, $event) {
                 scope.selectedColor = color;
                 if (scope.onSelect) {
-                    scope.onSelect(color);
+                    scope.onSelect(color, $index, $event);
+                    $event.stopPropagation();
                 }
             };
         }
@@ -50,7 +51,7 @@ Use this directive to generate color swatches to pick from.
                 colors: '=?',
                 size: '@',
                 selectedColor: '=',
-                onSelect: '&',
+                onSelect: '=',
                 useLabel: '=',
                 useColorClass: '=?'
             },
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/iconpicker/iconpicker.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/iconpicker/iconpicker.controller.js
index 05c76beeae..16d6cf23fc 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/iconpicker/iconpicker.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/iconpicker/iconpicker.controller.js
@@ -11,6 +11,8 @@ function IconPickerController($scope, iconHelper, localizationService) {
     var vm = this;
 
     vm.selectIcon = selectIcon;
+    vm.selectColor = selectColor;
+    vm.submit = submit;
     vm.close = close;
 
     vm.colors = [
@@ -47,11 +49,10 @@ function IconPickerController($scope, iconHelper, localizationService) {
         });
 
         // set a default color if nothing is passed in
-        vm.color = $scope.model.color ? $scope.model.color :  vm.colors[0].value;
+        vm.color = $scope.model.color ? $scope.model.color : vm.colors[0].value;
 
         // if an icon is passed in - preselect it
         vm.icon = $scope.model.icon ? $scope.model.icon : undefined;
-
     }
 
     function setTitle() {
@@ -69,6 +70,10 @@ function IconPickerController($scope, iconHelper, localizationService) {
         submit();
     }
 
+    function selectColor(color, $index, $event) {
+        $scope.model.color = color;
+    }
+
     function close() {
         if($scope.model && $scope.model.close) {
             $scope.model.close();
@@ -76,7 +81,7 @@ function IconPickerController($scope, iconHelper, localizationService) {
     }
 
     function submit() {
-        if($scope.model && $scope.model.submit) {
+        if ($scope.model && $scope.model.submit) {            
             $scope.model.submit($scope.model);
         }
     }
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/iconpicker/iconpicker.html b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/iconpicker/iconpicker.html
index 0630f9c68e..55c4317279 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/iconpicker/iconpicker.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/iconpicker/iconpicker.html
@@ -36,7 +36,8 @@
                         use-color-class="true"
                         colors="vm.colors"
                         selected-color="vm.color"
-                        size="s">
+                        size="s"
+                        on-select="vm.selectColor">
                     </umb-color-swatches>
                 </div>
 
@@ -71,6 +72,13 @@
                 shortcut="esc"
                 action="vm.close()">
             </umb-button>
+            <umb-button
+                type="button"
+                button-style="success"
+                label-key="general_submit"
+                state="vm.saveButtonState"
+                action="vm.submit(model)">
+            </umb-button>
         </umb-editor-footer-content-right>
     </umb-editor-footer>
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-color-swatches.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-color-swatches.html
index 4d56a08965..a18319b4f2 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/umb-color-swatches.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-color-swatches.html
@@ -1,6 +1,6 @@
 <div class="umb-color-swatches" ng-class="{ 'with-labels': useLabel }">
 
-    <button type="button" class="umb-color-box umb-color-box--{{size}} btn-{{color.value}}" ng-repeat="color in colors" title="{{useLabel || useColorClass ? (color.label || color.value) : ('#' + color.value)}}" hex-bg-inline="{{useColorClass === false}}" hex-bg-color="{{color.value}}" ng-class="{ 'active': color.value === selectedColor }" ng-click="setColor(color.value)">
+    <button type="button" class="umb-color-box umb-color-box--{{size}} btn-{{color.value}}" ng-repeat="color in colors" title="{{useLabel || useColorClass ? (color.label || color.value) : ('#' + color.value)}}" hex-bg-inline="{{useColorClass === false}}" hex-bg-color="{{color.value}}" ng-class="{ 'active': color.value === selectedColor }" ng-click="setColor(color.value, $index, $event)">
         <div class="umb-color-box-inner">
             <div class="check_circle" ng-if="color.value === selectedColor">
                 <i class="icon icon-check small"></i>