The Easiest approach here would be use to the newly introduced lightning:menuItem tag from winter 17. Reference for lightning:menuItem. This component makes use of the menu styles from lightning design system library. Furthermore this component has an attribute for the icon as well. Menu Styles from Lightning Design System Library
So we should be able to make use of all the icons from lightning design system library as per our convenience. However do bear in mind that this tag is under Beta so you might want to analyze the integrity before you ship it to production.
Kindly note that using lightning:menuButton and lightning:menuItem has some restrictions such as
- Icons will appear only on the right side
- lightning:buttons only take utiltu icons, you will not be able to use custom icons and standard action icons.
Other approach will be to use to the mark-up from lightning design system Menu's to implement this requirement. This will use aura:html and when you click on the icon, use an event handler to toggle the focus of the menu item and the component should work just fine.
For toggling the menu on-click, we just have to toggle the class "slds-is-open" in the event handler as follows
This should work but you might have to add some custom styling to make the elements sit as per your expectation.