Re-fixed the section icons, deals with legacy icons, new icons and legacy file based icons

src/Umbraco.Web.UI.Client/src/common/directives/sectionicon.directive.js

@@ -1,17 +1,24 @@
 angular.module("umbraco.directives")
-.directive('sectionIcon', function ($compile) {
+.directive('sectionIcon', function ($compile, iconHelper) {
     return {
         restrict: 'E',
         replace: true,
 
         link: function (scope, element, attrs) {
 
-            var icon = attrs.icon;
-            
-            if(icon.startsWith(".")) {
-                element.html("<i class='" + icon.substr(1) + "'></i>");
-            }else {
+            var icon = attrs.icon;
+
+            if (iconHelper.isLegacyIcon(icon)) {
+                //its a known legacy icon, convert to a new one
+                element.html("<i class='" + iconHelper.convertFromLegacyIcon(icon) + "'></i>");
+            }
+            else if (iconHelper.isFileBasedIcon(icon)) {
+                //it's a file, normally legacy so look in the icon tray images
                 element.html("<img src='images/tray/" + icon + "'>");
+            }
+            else {
+                //it's normal
+                element.html("<i class='" + icon + "'></i>");
             }
         }
     };

src/Umbraco.Web.UI.Client/src/common/filters/sectionicon.filter.js

@@ -1,16 +0,0 @@
-/**
-    * @ngdoc filter 
-    * @name umbraco.filters:sectionIcon
-    * @description This will properly render the tree icon image based on the tree icon set on the server
-    **/
-function sectionIconFilter(iconHelper) {
-    return function (sectionIconClass) {        
-        if (iconHelper.isLegacyIcon(sectionIconClass)) {
-            return iconHelper.convertFromLegacyIcon(sectionIconClass);
-        }
-        else {
-            return sectionIconClass;
-        }
-    };
-}
-angular.module('umbraco.filters').filter("sectionIcon", sectionIconFilter);

src/Umbraco.Web.UI.Client/src/common/mocks/resources/section.resource.js

@@ -8,16 +8,16 @@ function sectionMocks($httpBackend, mocksUtills) {
     /** internal method to mock the sections to be returned */
     function getSections() {
         var sections = [
-            { name: "Content", cssclass: "content", alias: "content" },
-            { name: "Media", cssclass: "media", alias: "media" },
-            { name: "Settings", cssclass: "settings", alias: "settings" },
-            { name: "Developer", cssclass: "developer", alias: "developer" },
-            { name: "Users", cssclass: "user", alias: "users" }
+            { name: "Content", cssclass: "traycontent", alias: "content" },
+            { name: "Media", cssclass: "traymedia", alias: "media" },
+            { name: "Settings", cssclass: "traysettings", alias: "settings" },
+            { name: "Developer", cssclass: "traydeveloper", alias: "developer" },
+            { name: "Users", cssclass: "trayuser", alias: "users" }
         ];
         
         return [200, sections, null];
     }
-   
+    
     return {
         register: function () {
             $httpBackend

src/Umbraco.Web.UI.Client/src/common/services/utill.service.js

@@ -374,16 +374,24 @@ function iconHelper() {
         { oldIcon: ".sprTreeMediaPhoto", newIcon: "icon-picture" },
         
         //tray icons
-        { oldIcon: ".traycontent", newIcon: "content" },
-        { oldIcon: ".traymedia", newIcon: "media" },
-        { oldIcon: ".traysettings", newIcon: "settings" },
-        { oldIcon: ".traydeveloper", newIcon: "developer" },
-        { oldIcon: ".trayusers", newIcon: "user" },
-        { oldIcon: ".traymember", newIcon: "member" },
-        { oldIcon: ".traytranslation", newIcon: "translation" }
+        { oldIcon: ".traycontent", newIcon: "traycontent" },
+        { oldIcon: ".traymedia", newIcon: "traymedia" },
+        { oldIcon: ".traysettings", newIcon: "traysettings" },
+        { oldIcon: ".traydeveloper", newIcon: "traydeveloper" },
+        { oldIcon: ".trayusers", newIcon: "trayusers" },
+        { oldIcon: ".traymember", newIcon: "traymember" },
+        { oldIcon: ".traytranslation", newIcon: "traytranslation" }
     ];
 
     return {
+        /** If the icon is file based (i.e. it has a file path) */
+        isFileBasedIcon: function (icon) {
+            //if it doesn't start with a '.' but contains one then we'll assume it's file based
+            if (!icon.startsWith('.') && icon.indexOf('.') > 1) {
+                return true;
+            }
+            return false;
+        },
         /** If the icon is legacy */
         isLegacyIcon: function (icon) {
             if (icon.startsWith('.')) {