CRM-21195: Improving menu item icon markup

[omarabuhussein]

Before

Menu item icon was generated like this :

<span class="fa fa-search"></span>&nbsp; Search

but there should be a CSS class that identfiy the menu item icon so it easy to style menu item icons in CSS.

After

Current the generated makrup will look like this :

<span class="menu-item-icon fa fa-search"></span>Search

So basically menu-item-icon class is added to all menu item icons and the non breaking space   was removed and replace with right margin :

.menu-item-icon {
  margin-right: 5px;
}

---

• CRM-21195: Adding the ability to add icons to menu items

[omarabuhussein]

@colemanw can you take a look at this ^ ?

[colemanw]

@omarabuhussein that markup was getting heavy. I've pushed to this PR a lighter-weight version that should work. Let me know what you think.

[omarabuhussein]

to be honest my changes was based on a suggestion of my colleague @AkA84 since his idea was that there should be a class that identify the menu item icon which simplifies styling, but since I am not a Front-End savvy I cannot tell which one will be better on the long run so I will leave it for you and him to discuss this.

[AkA84]

@omarabuhussein @colemanw it loses a bit the expressiveness, but as long as we are fine that if there is an <i> then it must be an icon, then it's fine for me as well