Struggling to implement the md-menu to create a vertical menu using material icons.
Unfortunately, I am only able to create a horizontal menu and the icons are misaligned, failing to work when placed within
<md-icon md-svg-icon="hotel" md-menu-align-target></md-icon>Here is the code snippet:
<md-menu md-position-mode="target-right target" class="">
<md-button aria-label="" class="md-icon-button" ng-click="$mdMenu.open()">
<img src="../img/Menu.png" alt="Menu">
</md-button>
<md-menu-content width="2">
<md-menu-item>
<md-button ui-sref="book"> <span md-menu-align-target><i class="material-icons">hotel</i> New Booking</span></md-button>
<md-button ui-sref="book"> <span md-menu-align-target><i class="material-icons">hotel</i> New Booking</span></md-button>
<md-menu-divider></md-menu-divider>
<md-button ui-sref="book"> <span md-menu-align-target><i class="material-icons">hotel</i> New Booking</span></md-button>
<md-button ui-sref="book"> <span md-menu-align-target><i class="material-icons">hotel</i> New Booking</span></md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
Above shows my desired output while below depicts the current situation:
https://i.sstatic.net/qjcDC.jpg
FIRST PROBLEM Need to transform the menu into a vertical layout positioned beneath the arrow button.
SECOND PROBLEM Struggling to display icons similar to those in the angular examples that I have experimented with.
Attempted creating buttons like this:
<md-button ui-sref="book">
<md-icon md-svg-icon="hotel" md-menu-align-target></md-icon>
Booking
</md-button>
But unfortunately, the icons fail to appear.