Support SVG icon in action menu

src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbcontextmenu.directive.js

@@ -7,7 +7,7 @@
  * Handles the click events on the context menu
 **/
 angular.module("umbraco.directives")
-.directive('umbContextMenu', function (navigationService, keyboardService, backdropService) {
+.directive('umbContextMenu', function (navigationService, keyboardService) {
     return {
         scope: {
             menuDialogTitle: "@",
@@ -20,22 +20,27 @@ angular.module("umbraco.directives")
         templateUrl: 'views/components/application/umb-contextmenu.html',
         link: function (scope, element, attrs, ctrl) {
 
+            // Map action icons using legacy icon font or svg icons.
+            Utilities.forEach(scope.menuActions, action => {
+                action.icon = (action.useLegacyIcon ? 'icon-' : '') + action.icon;
+            });
+
             //adds a handler to the context menu item click, we need to handle this differently
             //depending on what the menu item is supposed to do.
-            scope.executeMenuItem = function (action) {
+            scope.executeMenuItem = action => {
                 navigationService.executeMenuAction(action, scope.currentNode, scope.currentSection);
             };
 
-            scope.outSideClick = function() {
+            scope.outSideClick = () => {
                 navigationService.hideNavigation();
             };
 
-            keyboardService.bind("esc", function() {
+            keyboardService.bind("esc", () => {
                 navigationService.hideNavigation();
             });
 
             //ensure to unregister from all events!
-            scope.$on('$destroy', function () {
+            scope.$on('$destroy', () => {
                 keyboardService.unbind("esc");
             });
         }

src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditormenu.directive.js

@@ -1,7 +1,7 @@
 (function () {
     'use strict';
 
-    function EditorMenuDirective($injector, treeService, navigationService, umbModelMapper, appState) {
+    function EditorMenuDirective(treeService, navigationService, appState) {
 
         function link(scope, el, attr, ctrl) {
 
@@ -11,13 +11,17 @@
 
             function onInit() {
 
-                getOptions();
+                // Map action icons using legacy icon font or svg icons.
+                Utilities.forEach(scope.actions, action => {
+                    action.icon = (action.useLegacyIcon ? 'icon-' : '') + action.icon;
+                });
 
+                getOptions();
             }
 
             //adds a handler to the context menu item click, we need to handle this differently
             //depending on what the menu item is supposed to do.
-            scope.executeMenuItem = function (action) {
+            scope.executeMenuItem = action => {
                 //the action is called as it would be by the tree. to ensure that the action targets the correct node, 
                 //we need to set the current node in appState before calling the action. otherwise we break all actions
                 //that use the current node (and that's pretty much all of them)
@@ -35,14 +39,13 @@
 
                 if (!scope.actions) {
                     treeService.getMenu({ treeNode: scope.currentNode })
-                        .then(function (data) {
+                        .then(data => {
                             scope.actions = data.menuItems;
                         });
                 }
             };
 
             onInit();
-
         }
 
         var directive = {

src/Umbraco.Web.UI.Client/src/views/components/application/umb-contextmenu.html

@@ -14,7 +14,7 @@ <h1 id="contextmenu-title">{{menuDialogTitle}}</h1>
                     ng-class="{sep:action.separator, '-opens-dialog': action.opensDialog}" ng-repeat="action in menuActions">
                     <button type="button" ng-click="executeMenuItem(action)"
                         class="umb-action-link btn-reset umb-outline">
-                        <umb-icon icon="icon-{{action.cssclass}}" class="icon"></umb-icon>
+                        <umb-icon icon="{{action.icon}}" class="icon"></umb-icon>
                         <span class="menu-label">{{action.name}}</span>
                     </button>
                 </li>

src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-menu.html

@@ -8,14 +8,13 @@
         show-caret="true"
         has-popup="true"
         is-expanded="dropdown.isOpen"
-        disabled="!actions || !actions.length || isDisabled"
-        >
+        disabled="!actions || !actions.length || isDisabled">
     </umb-button>
 
     <umb-dropdown ng-if="dropdown.isOpen" class="umb-actions" on-close="dropdown.isOpen = false" deep-blur="dropdown.isOpen = false">
-        <umb-dropdown-item class="umb-action" ng-class="{'sep':action.separatorm, '-opens-dialog': action.opensDialog}" ng-repeat="action in actions">
+        <umb-dropdown-item class="umb-action" ng-class="{'sep':action.separator, '-opens-dialog': action.opensDialog}" ng-repeat="action in actions">
             <button type="button" ng-click="executeMenuItem(action)">
-                <umb-icon icon="icon-{{action.cssclass}}" class="icon"></umb-icon>
+                <umb-icon icon="{{action.icon}}" class="icon"></umb-icon>
                 <!-- Render the text that will be visually displayed -->
                 <span class="menu-label" aria-hidden="true">{{action.name}}</span>
                 <!-- Render the textDescription from the language files if it's attached to the action object-->

src/Umbraco.Web/Models/Trees/MenuItem.cs

@@ -19,7 +19,7 @@ public class MenuItem
         public MenuItem()
         {
             AdditionalData = new Dictionary<string, object>();
-            Icon = "folder";
+            Icon = Constants.Icons.Folder.TrimStart("icon-");
         }
 
         public MenuItem(string alias, string name)
@@ -84,9 +84,19 @@ public MenuItem(IAction action, string name = "")
         [DataMember(Name = "separator")]
         public bool SeparatorBefore { get; set; }
 
-        [DataMember(Name = "cssclass")]
+        /// <summary>
+        /// Icon to use at action menu item
+        /// </summary>
+        [DataMember(Name = "icon")]
         public string Icon { get; set; }
 
+        /// <summary>
+        /// Used in the UI to indicate whether icons should be prefixed with "icon-".
+        /// If not legacy icon full icon name should be specified.
+        /// </summary>
+        [DataMember(Name = "useLegacyIcon")]
+        public bool UseLegacyIcon { get; set; } = true;
+
         /// <summary>
         /// Used in the UI to inform the user that the menu item will open a dialog/confirmation
         /// </summary>