Angular material sidenav and fixed toolbar
<p>I copied this sidenav demo from the angular material docs.
<a href="https://material.angularjs.org/latest/demo/sidenav" rel="noreferrer">https://material.angularjs.org/latest/demo/sidenav</a></p>

<p>And added the first toolbar demo to it from <a href="https://material.angularjs.org/latest/demo/toolbar" rel="noreferrer">https://material.angularjs.org/latest/demo/toolbar</a></p>

<p>What I want is the toolbar to be fixed.</p>

<p>Codepen demo: <a href="http://codepen.io/gvorster/pen/BzWvGe" rel="noreferrer">http://codepen.io/gvorster/pen/BzWvGe</a></p>

<p>When adding this style the toolbar is fixed.</p>

<pre><code>&lt;md-toolbar class="md-hue-2" style="position:fixed !important"&gt;
</code></pre>

<p>But the icons on the right are gone.</p>

<p><a href="https://i.stack.imgur.com/tvxB5.png" rel="noreferrer"><img src="https://i.stack.imgur.com/tvxB5.png" alt="enter image description here"></a></p>

<p>Resizing the screen until the sidenav is hidden will show the right side icons.</p>

<p><a href="https://i.stack.imgur.com/RwH19.png" rel="noreferrer"><img src="https://i.stack.imgur.com/RwH19.png" alt="enter image description here"></a></p>

<p>Removing the style shows the right side icons but the toolbar is not fixed:</p>

<p><a href="https://i.stack.imgur.com/TaNKe.png" rel="noreferrer"><img src="https://i.stack.imgur.com/TaNKe.png" alt="enter image description here"></a></p>

<p>Is there a way to get a sticky toolbar and have the rigth side icons shown. </p>