How do you add a search bar to angular material?

I am trying to add a search input to an <md-toolbar> but there doesn't seem to be any styling for this. It seems adding a search bar would be a common header element so perhaps I am missing something.

    <md-toolbar md-theme="input">
      <md-input-container flex>
         <md-icon class="material-icons">&#xE8B6;</md-icon>
         <input ng-model="search.notes" placeholder="Search here">
      </md-input-container>
    </md-toolbar>

Then in the JS:

app.config(['$mdThemingProvider', function($mdThemingProvider) {
    $mdThemingProvider.theme('input')
      .primaryPalette('blue')
      .accentPalette('pink')
      .warnPalette('red')
      .backgroundPalette('grey');
  }
]);

However, while the element does show up - it's clear this is not the intended way it should be used since neither the spacing, font-color, or alignment match up.

http://codepen.io/Xeoncross/pen/rLxEqv