How to Create Custom Macro Icons in Umbraco Back Office

Umbraco Macros are great for creating custom components for your CMS. One of the slight let downs with them is that you cannot specify a custom icon for each macro, so you are left with a menu of macros that looks like this:

When you have an Umbraco CMS implementation with lots of macros, the content manager has a bit of a task on their hands to spot the macro component they require. Out of the box, Umbraco doesn't offer the ability to add a custom icon for your macro, so I have come up with my own simple solution that gives the following result:

There are a few simple changes to make to 2 files. The first change is to Umbraco\js\umbraco.controllers.js and is the addition of an extra method called 'getIcon'. This method simply looks at your macro name and returns the icon class you want to use:

function MacroPickerController($scope, entityResource, macroResource, umbPropEditorHelper, macroService, formHelper, localizationService) {
 $scope.macros = [];
 $scope.model.selectedMacro = null;
 $scope.model.macroParams = [];
 $scope.wizardStep = 'macroSelect';
 $scope.noMacroParams = false;
 
 function onInit() {
  if (!$scope.model.title) {
    localizationService.localize('defaultdialogs_selectMacro').then(function (value) {
    $scope.model.title = value;
   });
  }
  
   // SG:Get Macro Icon
   $scope.getIcon = function (macroName) {
    switch (macroName.toLowerCase()) {
     case 'adsense':
      return 'icon-fa-google';
     case 'audio player':
      return 'icon-playlist';
     case 'banner image':
      return 'icon-browser-window';
     case 'blog tags list':
      return 'icon-fa-ellipsis-h';
     case 'box callout':
      return 'icon-fa-file-text-o';
     case 'breadcrumb':
      return 'icon-console';
     case 'button list':
      return 'icon-fa-ellipsis-h';
     case 'content sharer':
      return 'icon-fa-share-alt';
     case 'disqus comments':
      return 'icon-fa-comments-o';
     case 'form selector':
      return 'icon-fa-wpforms';
     case 'image carousel':
      return 'icon-pictures-alt-2s';
     case 'latest blogposts':
      return 'icon-documents';
     case 'map viewer':
      return 'icon-map-location';
     case 'page card list':
      return 'icon-thumbnail-list';
     case 'page card repeater':
      return 'icon-thumbnails';
     case 'responsive image':
      return 'icon-window-sizes';
     case 'split text image section':
       return 'icon-umb-members';
     case 'testimonial':
      return 'icon-fa-comment-o';
     case 'video repeater':
      return 'icon-video';
     default:
      return 'icon-settings-alt';
   }
  }
}

The second amend is to file \Umbraco\Views\common\infiniteeditors\macropicker\macropicker.html and just involves calling your method to get the icon class, passing in the name of the macro:

<ul class="umb-card-grid -three-in-row">
 <li ng-repeat="availableItem in macros | orderBy:'name' | filter:searchTerm" ng-click="selectMacro(availableItem)">
  <a class="umb-card-grid-item" href="" title="{{ availableItem.name }}">
   <span>
    <i ng-class="getIcon(availableItem.name)"></i>
    {{ availableItem.name }}
   </span>
  </a>
 </li>
</ul>

And there you have it! Custom icons for you macros in Umbraco 7 and 8.