使用md菜单和材质图标构建垂直菜单

Question

我试图使用md-menu创建一个垂直菜单并使用材质图标。

但是我得到的只是一个水平菜单，当我将它们放入<md-icon md-svg-icon="hotel" md-menu-align-target></md-icon>时，这些图标未对齐并且无法使用<md-icon md-svg-icon="hotel" md-menu-align-target></md-icon>

这是我的代码。

<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>

最上面是我想要的，下面是我当前的代码：

第一个问题将菜单设置为垂直并将其放置在我的箭头按钮下。

第二个问题让图标看起来像我尝试过的角度示例中那样。

我试着像这样制作按钮：

<md-button ui-sref="book">
    <md-icon md-svg-icon="hotel" md-menu-align-target></md-icon>
    Booking
</md-button>

但是然后我没有图标。

Answer 1

您使用的HTML结构不正确，md-menu-item应该包含每个菜单项，应为：

  <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-menu-item>
 <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-menu-item>
       ...