Make icon property for checkbox and radiobutton consistent with other components (#8467)

src/Umbraco.Web.UI.Client/src/common/directives/components/forms/umbcheckbox.directive.js

@@ -32,7 +32,8 @@
 @param {boolean} required Set the checkbox to be required.
 @param {callback} onChange Callback when the value of the checkbox change by interaction.
 @param {string} cssClass Set a css class modifier.
-@param {string} iconClass Set an icon next to checkbox.
+@deprecated @param {string} iconClass Set an icon next to checkbox. Use "icon" parameter instead.
+@param {string} icon Set an icon next to checkbox.
 @param {boolean} disableDirtyCheck Disable checking if the model is dirty.
 
 **/
@@ -50,6 +51,8 @@
         function onInit() {
             vm.inputId = vm.inputId || "umb-check_" + String.CreateGuid();
 
+            vm.icon = vm.icon || vm.iconClass || null;
+
             // If a labelKey is passed let's update the returned text if it's does not contain an opening square bracket [
             if (vm.labelKey) {
                  localizationService.localize(vm.labelKey).then(function (data) {
@@ -86,7 +89,8 @@
             required: "<",
             onChange: "&?",
             cssClass: "@?",
-            iconClass: "@?",
+            iconClass: "@?", // deprecated
+            icon: "@?",
             disableDirtyCheck: "=?"
         }
     };

src/Umbraco.Web.UI.Client/src/common/directives/components/forms/umbradiobutton.directive.js

@@ -50,6 +50,8 @@
         function onInit() {
             vm.inputId = vm.inputId || "umb-radio_" + String.CreateGuid();
 
+            vm.icon = vm.icon || vm.iconClass || null;
+
             // If a labelKey is passed let's update the returned text if it's does not contain an opening square bracket [
             if (vm.labelKey) {
                  localizationService.localize(vm.labelKey).then(function (data) {
@@ -86,7 +88,8 @@
             required: "<",
             onChange: "&?",
             cssClass: "@?",
-            iconClass: "@?",
+            iconClass: "@?", // deprecated
+            icon: "@?",
             disableDirtyCheck: "=?"
         }
     };

src/Umbraco.Web.UI.Client/src/views/components/forms/umb-checkbox.html

@@ -32,7 +32,7 @@
         </span>
     </span>
     <span class="umb-form-check__info" ng-transclude>
-        <i ng-if="vm.iconClass.length" class="{{vm.iconClass}}" aria-hidden="true"></i>
+        <i ng-if="vm.icon.length" class="{{vm.icon}}" aria-hidden="true"></i>
         <span ng-if="vm.text.length" class="umb-form-check__text">{{vm.text}}</span>
     </span>
 </label>

src/Umbraco.Web.UI.Client/src/views/components/forms/umb-radiobutton.html

@@ -30,7 +30,7 @@
         </span>
     </span>
     <span class="umb-form-check__info" ng-transclude>
-        <i ng-if="vm.iconClass.length" class="{{vm.iconClass}}" aria-hidden="true"></i>
+        <i ng-if="vm.icon.length" class="{{vm.icon}}" aria-hidden="true"></i>
         <span ng-if="vm.text.length" class="umb-form-check__text">{{vm.text}}</span>
     </span>
 </label>

src/Umbraco.Web.UI.Client/src/views/propertyeditors/rte/rte.prevalues.controller.js

@@ -29,11 +29,15 @@ angular.module("umbraco").controller("Umbraco.PrevalueEditors.RteController",
             // extend commands with properties for font-icon and if it is a custom command
             $scope.tinyMceConfig.commands = _.map($scope.tinyMceConfig.commands, function (obj) {
                 var icon = getFontIcon(obj.alias);
-                return angular.extend(obj, {
+
+                var objCmd = Utilities.extend(obj, {
                     fontIcon: icon.name,
                     isCustom: icon.isCustom,
-                    selected: $scope.model.value.toolbar.indexOf(obj.alias) >= 0
+                    selected: $scope.model.value.toolbar.indexOf(obj.alias) >= 0,
+                    icon: "mce-ico " + (icon.isCustom ? ' mce-i-custom ' : ' mce-i-') + icon.name
                 });
+
+                return objCmd;
             });
         });
 

src/Umbraco.Web.UI.Client/src/views/propertyeditors/rte/rte.prevalues.html

@@ -5,7 +5,7 @@
                 <umb-checkbox
                     model="cmd.selected"
                     on-change="selectCommand(cmd)"
-                    icon-class="mce-ico {{(cmd.isCustom ? ' mce-i-custom ' : ' mce-i-') + cmd.fontIcon}}"
+                    icon="{{cmd.icon}}"
                     text="{{cmd.name}}"
                     class="mce-cmd" />
         </div>