How do you add a search bar to angular material?
<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>