title: How do you add a search bar to angular material?
body: <p>I am trying to add a search input to an <code>&lt;md-toolbar&gt;</code> 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.</p>
  
  <pre><code>&lt;md-toolbar md-theme="input"&gt;
      &lt;md-input-container flex&gt;
      &lt;md-icon class="material-icons"&gt;&amp;#xE8B6;&lt;/md-icon&gt;
      &lt;input ng-model="search.notes" placeholder="Search here"&gt;
      &lt;/md-input-container&gt;
  &lt;/md-toolbar&gt;
  </code></pre>
  
  <p>Then in the JS:</p>
  
  <pre class="lang-js prettyprint-override"><code>app.config(['$mdThemingProvider', function($mdThemingProvider) {
      $mdThemingProvider.theme('input')
          .primaryPalette('blue')
          .accentPalette('pink')
          .warnPalette('red')
          .backgroundPalette('grey');
  }]);
  </code></pre>
  
  <p>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.</p>
  
  <p><a href="http://codepen.io/Xeoncross/pen/rLxEqv" rel="nofollow noreferrer">http://codepen.io/Xeoncross/pen/rLxEqv</a></p>