Error Invalid HTML for md-menu: Expected two children elements

Question

The expected behaviour of md-menu is that we do the following:

<md-menu>
    <button ng-click="$mdOpenMenu()">Filters</button>
    <md-menu-content>
        <md-menu-item ng-repeat="field in devices.fieldList"><md-button ng-click="devices.setFilter(field)" ng-bind="field.name"></md-button></md-menu-item>
    </md-menu-content>
</md-menu>

However I have a situation when using md-menu-bar that I want a quick access button to refresh some data, this causes an error Invalid HTML for md-menu: Expected two children elements. Although I could perhaps look at a different UI it feels like you should be able to have the following functionality wise it works great:

Snippet

<md-menu-bar>
    <md-menu>
        <button ng-click="$mdOpenMenu()">Filters</button>
        <md-menu-content>
            <md-menu-item ng-repeat="field in devices.fieldList"><md-button ng-click="devices.setFilter(field)" ng-bind="field.name"></md-button></md-menu-item>
        </md-menu-content>
    </md-menu>
    <md-menu>
        <button ng-click="data.refresh()"><md-icon class="material-icons">refresh</md-icon></button>
    </md-menu>
</md-menu-bar>

Is there any reason this should not be done?

Answer 1

Every md-menu must specify exactly two child elements https://material.angularjs.org/latest/api/directive/mdMenu

If you see your code, missing the second part of md-menu.

 <md-menu>
    <button ng-click="data.refresh()"><md-icon class="material-icons">refresh</md-icon></button>
</md-menu>

The second element is the md-menu-content element which represents the contents of the menu when it is open. Typically this will contain md-menu-items, but you can do custom content as well.

note: If you need a list of elements, try md-list:

<md-list>
   <md-list-item>
      <md-menu>
            <button ng-click="$mdOpenMenu()">Filters</button>
            <md-menu-content>
                <md-menu-item ng-repeat="field in devices.fieldList"><md-button ng-click="devices.setFilter(field)" ng-bind="field.name"></md-button></md-menu-item>
            </md-menu-content>
       </md-menu>
    </md-list-item>
    <md-list-item>
        <button ng-click="data.refresh()"><md-icon class="material-icons">refresh</md-icon></button>
    </md-list-item>
</md-list>

Answer 2

for quick access button to refresh you can use it

<md-button ng-click="data.refresh()"><md-icon class="material-icons">refresh</md-icon></md-button>

check this link