diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/sectionicon.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/sectionicon.directive.js
index eeb0ae989b..bb9939ae17 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/sectionicon.directive.js
+++ b/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>");
             }
         }
     };
diff --git a/src/Umbraco.Web.UI.Client/src/common/filters/sectionicon.filter.js b/src/Umbraco.Web.UI.Client/src/common/filters/sectionicon.filter.js
deleted file mode 100644
index c0e588db27..0000000000
--- a/src/Umbraco.Web.UI.Client/src/common/filters/sectionicon.filter.js
+++ /dev/null
@@ -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);
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/common/mocks/resources/section.resource.js b/src/Umbraco.Web.UI.Client/src/common/mocks/resources/section.resource.js
index de2bdf9d56..19e7ef0904 100644
--- a/src/Umbraco.Web.UI.Client/src/common/mocks/resources/section.resource.js
+++ b/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
diff --git a/src/Umbraco.Web.UI.Client/src/common/services/utill.service.js b/src/Umbraco.Web.UI.Client/src/common/services/utill.service.js
index 7e88922160..ee8daab9ac 100644
--- a/src/Umbraco.Web.UI.Client/src/common/services/utill.service.js
+++ b/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('.')) {
diff --git a/src/Umbraco.Web.UI/config/applications.Release.config b/src/Umbraco.Web.UI/config/applications.Release.config
index 0564efff28..042bd551cc 100644
--- a/src/Umbraco.Web.UI/config/applications.Release.config
+++ b/src/Umbraco.Web.UI/config/applications.Release.config
@@ -1,10 +1,10 @@
 <?xml version="1.0"?>
 <applications>
-  <add alias="content" name="Content" icon="content" sortOrder="0" />
-  <add alias="media" name="Media" icon="media" sortOrder="1" />
-  <add alias="settings" name="Settings" icon="settings" sortOrder="2" />
-  <add alias="developer" name="Developer" icon="developer" sortOrder="3" />
-  <add alias="users" name="Users" icon="user" sortOrder="4" />
-  <add alias="member" name="Members" icon="member" sortOrder="5" />
-  <add alias="translation" name="Translation" icon="translation" sortOrder="6" />
+  <add alias="content" name="Content" icon="traycontent" sortOrder="0" />
+  <add alias="media" name="Media" icon="traymedia" sortOrder="1" />
+  <add alias="settings" name="Settings" icon="traysettings" sortOrder="2" />
+  <add alias="developer" name="Developer" icon="traydeveloper" sortOrder="3" />
+  <add alias="users" name="Users" icon="trayuser" sortOrder="4" />
+  <add alias="member" name="Members" icon="traymember" sortOrder="5" />
+  <add alias="translation" name="Translation" icon="traytranslation" sortOrder="6" />
 </applications>
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI/config/applications.config b/src/Umbraco.Web.UI/config/applications.config
index c7a494b36a..2a6da37bae 100644
--- a/src/Umbraco.Web.UI/config/applications.config
+++ b/src/Umbraco.Web.UI/config/applications.config
@@ -1,10 +1,10 @@
 <?xml version="1.0" encoding="utf-8"?>
 <applications>
-  <add alias="content" name="Content" icon=".traycontent" sortOrder="0" />
-  <add alias="media" name="Media" icon=".traymedia" sortOrder="1" />
-  <add alias="settings" name="Settings" icon=".traysettings" sortOrder="2" />
-  <add alias="developer" name="Developer" icon=".traydeveloper" sortOrder="3" />
-  <add alias="users" name="Users" icon=".trayusers" sortOrder="4" />
-  <add alias="member" name="Members" icon=".traymember" sortOrder="5" />
-  <add alias="translation" name="Translation" icon=".traytranslation" sortOrder="6" />
+  <add alias="content" name="Content" icon="traycontent" sortOrder="0" />
+  <add alias="media" name="Media" icon="traymedia" sortOrder="1" />
+  <add alias="settings" name="Settings" icon="traysettings" sortOrder="2" />
+  <add alias="developer" name="Developer" icon="traydeveloper" sortOrder="3" />
+  <add alias="users" name="Users" icon="trayusers" sortOrder="4" />
+  <add alias="member" name="Members" icon="traymember" sortOrder="5" />
+  <add alias="translation" name="Translation" icon="traytranslation" sortOrder="6" />
 </applications>
\ No newline at end of file