如何在垂直角材料行中對齊兒童

Question

html是使用佈局指令（layout =「row」）構建的，幷包含一個圖標和3個選擇框。我的選擇框和圖標不對齊 - 我如何水平對齊它們？

我的代碼

<div layout="row" layout-align="start center" class="filter"> 
     <div flex="15"> 
      <i class="material-icons md-24">filter_list</i>Filter 
     </div> 
     <div> 
      <md-select ng-model="$ctrl.selectedtype1" placeholder="type1" class="md-no-underline">      
       <md-option ng-repeat="type in $ctrl.type1List" ng-value="type"> 
        {{type.value}} ({{type.id}}) 
       </md-option> 
      </md-select> 
     </div> 
     <div> 
      <md-select ng-model="$ctrl.selectedtype2" placeholder="type2" class="md-no-underline">      
       <md-option ng-repeat="type in $ctrl.type2List" ng-value="type"> 
        {{type.value}} ({{type.id}}) 
       </md-option> 
      </md-select> 
     </div> 
     <div> 
      <md-select ng-model="$ctrl.selectedtype3" placeholder="type3" class="md-no-underline">      
       <md-option ng-repeat="type in $ctrl.type3List" ng-value="type"> 
        {{type.value}} ({{type.id}}) 
       </md-option> 
      </md-select> 
     </div> 
    </div> 

...看起來是這樣的：

Answer 1

https://plnkr.co/edit/I8Jn4JweN0OVGBzBAwS8?p=preview

material-design-iconic-font css provides many icons. Try this plunkr: 

Answer 2

實際上，你可以使用由角材料提供MD-圖標標籤。

以下是相關鏈接：

1. https://material.angularjs.org/latest/api/directive/mdIcon

2. https://material.angularjs.org/latest/demo/icon

過濾器應該MD-圖標關閉和打開標籤之間的跨度被添加在