<md-bottom-sheet ng-class="listClass()">
  <div layout="row" layout-align="center center" ng-cloak  layout="column" >
      <md-toolbar layout="row" layout-align="center center" class="md-toolbar-tools small-toolbar md-whiteframe-4dp">
    <span flex></span>
    <h4>{{title}}</h4>
   	<span flex></span> 
   	<md-button class="md-icon-button" ng-click="dismissBottomSheet()"><md-icon md-font-icon="fa-times" class="fa"></md-icon></md-button>
  </md-toolbar>

  </div>
  <div ng-cloak>
    <md-list flex layout-gt-sm="row" layout="column" layout-align="center center">
      <md-list-item ng-repeat="item in items" ng-if="item.visible" astyle="min-width:150px;width:150px!important">
          <md-button class="md-grid-item-content" ng-click="listItemClick($index,$event)" style="text-transform:none;width:150px!important">
            <md-icon md-font-icon="{{item.icon}}" class="fa fa-lg"></md-icon>
            <span class="md-grid-text center" style="width:100%;font-size:12px">{{ item.name }}</span>
          </md-button>
      </md-list-item>
    </md-list>
  </div>
</md-bottom-sheet>
