MEAN.js' topbar Menu: Using icon/image instead of text for title

Question

I am currently using the meanjs 0.4.2 for my project and i have problem trying to customize the topbar Menu's title.

The menu gets populated for each module within its config file, for example:

 angular.module('articles').run(['Menus',
   function (Menus) {
     Menus.addMenuItem('topbar', {
       title: 'Articles',
       state: 'articles',
       type: 'dropdown',
       roles: ['*']
     });
   ...
]);

It is also mentioned in the doc that

title - A String title for the menu item.

I want to know if there is a way that this title can be customized as an icon like bootstrap glyphicon or some type of my own icon with the url put inside this configuration?

I really appreciate all your help.

Answer 1

1. Add icon as an option in menu.client.service.js (core/client)

     // Push new menu item
     service.menus[menuId].items.push({
       title: options.title || '',
       state: options.state || '',
       type: options.type || 'item',
       icon: options.icon || '',//icon option
       class: options.class,
       roles: ((options.roles === null || typeof options.roles === 'undefined') ? service.defaultRoles : options.roles),
       position: options.position || 0,
       items: [],
       shouldRender: shouldRender
     });
   

2. update header.client.view.html (core/client)

   <ul class="nav navbar-nav" ng-if="vm.menu.shouldRender(vm.authentication.user);">
         <li ng-repeat="item in vm.menu.items | orderBy: 'position'" ng-if="item.shouldRender(vm.authentication.user);" ng-switch="item.type" ng-class="{ dropdown: item.type === 'dropdown' }" ui-sref-active="active" class="{{item.class}}" uib-dropdown="item.type === 'dropdown'">
           <a ng-switch-when="dropdown" class="dropdown-toggle" uib-dropdown-toggle role="button">
           <i ng-if="::item.icon" class="glyphicon glyphicon-{{::item.icon}}"></i>  {{::item.title}}&nbsp;<span class="caret"></span>
   
           </a>
           <ul ng-switch-when="dropdown" class="dropdown-menu">
             <li ng-repeat="subitem in item.items | orderBy: 'position'" ng-if="subitem.shouldRender(vm.authentication.user);">
               <a ui-sref="{{subitem.state}}({{subitem.params}})" ng-bind="subitem.title"></a>
             </li>
           </ul>
           <a ng-switch-default ui-sref="{{item.state}}" ng-bind="item.title"></a>
         </li>
       </ul>
   

3. add icon in menu service

     menuService.addMenuItem('topbar', {
       title: 'Articles',
       state: 'articles',
       type: 'dropdown',
       icon:'heart',
       roles: ['*']
     });
   
     menuService.addMenuItem('topbar', {
       title: 'Articles',
       state: 'articles',
       type: 'dropdown',
       roles: ['*']
     });