material design md-icon & md-select aligment

Question

Is it possible to align an icon before a md-select tag ? I have tried in the angular-material codepen but as soon as I add an icon infront of a md-select tag, the alignement break up

codepen

I tried to do it differently, but same result:

<div>
  <md-toolbar>
    <div class="md-toolbar-tools">
      <md-button class="md-icon-button" aria-label="Settings">
        <md-icon md-font-icon="fa-bars" class="fa"></md-icon>
      </md-button>
      <h2>
        <span>Toolbar with Icon Buttons</span>
      </h2>
      <span flex></span>
      <md-button class="md-icon-button" aria-label="Favorite">
        <md-icon md-font-icon="fa-gear" class="fa" style="color: greenyellow;"></md-icon>
      </md-button>
      <md-button class="md-icon-button" aria-label="More">
        <md-icon md-font-icon="fa-vimeo" class="fa"></md-icon>
      </md-button>
    </div>
  </md-toolbar>

  <div class="backgroundbar"></div>

  <div layout-padding layout="row" layout-align="center center" class="content">

    <md-whiteframe class="md-whiteframe-z2" flex-gt-md="80" flex-gt-sm="90" flex-sm="100">

      <md-content layout-padding>

        <div layout>
          <md-input-container md-no-float flex>
            <md-icon md-font-icon="fa-clock-o" class="fa history-btn" ng-click=""></md-icon>
            <input ng-model="user.phone" type="text" placeholder="Phone Number" disabled>
          </md-input-container>

          <md-select placeholder="State" ng-model="ctrl.userState" flex="20">
            <md-option ng-repeat="state in vm.states" value="{{state.abbrev}}">{{state.abbrev}}</md-option>
          </md-select>

        </div>

        <md-input-container md-no-float>
          <md-icon md-font-icon="fa-clock-o" class="fa history-btn" ng-click=""></md-icon>
          <input ng-model="user.phone" type="text" placeholder="Phone Number" disabled>
        </md-input-container>

        <md-input-container md-no-float>
          <md-icon md-font-icon="fa-clock-o" class="fa history-btn" ng-click=""></md-icon>
          <input ng-model="user.phone" type="text" placeholder="Phone Number" disabled>
        </md-input-container>

      </md-content>

    </md-whiteframe>

  </div>

</div>

Answer 1

I have made the changes that you needed in your codepen, do check it out. I have added span after the select box and removed the md-no-float and added a new div with layout="row and flex.

<md-input-container>
  <div layout="row" flex>
    <md-icon md-svg-src="img/icons/ic_phone_24px.svg" flex></md-icon>
    <md-select placeholder="State" ng-model="ctrl.userState" flex="20">
      <md-option ng-repeat="state in vm.states" value="{{state.abbrev}}">
        {{state.abbrev}}
      </md-option>
    </md-select>
    <span flex="75"></span>
  </div>
</md-input-container>

This is the updated code.