Как выровнять дочерние элементы в строке углового материала по вертикали

Question

html строится с директивой layout (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

фильтр должен быть добавлен между мкр-значок закрывать и открывать теги в промежутке