title: A perfect Angular material bottom navbar. Is there a component i am missing?
body: <p>I am trying to implement a mobile style bottom navigation bar. For that, I've used mat-toolbar and fixed it at the bottom using css as follows:</p>
  <p>component.html:</p>
  <pre><code>&lt;mat-toolbar class=&quot;toolbarNav&quot;&gt;
      &lt;mat-icon class=&quot;material-icons color_blue&quot; (click)=&quot;getTopArtists('long_term' , 0 , 100)&quot;&gt;
          star_border&lt;/mat-icon&gt;
      &lt;mat-icon class=&quot;material-icons color_blue&quot; (click)=&quot;getTopTracks('long_term' , 0 , 100)&quot;&gt;favorite_border
      &lt;/mat-icon&gt;
      &lt;mat-icon class=&quot;material-icons color_blue&quot; (click)=&quot;recentlyPlayed()&quot;&gt;history&lt;/mat-icon&gt;
  &lt;/mat-toolbar&gt;
  </code></pre>
  <p>component.css</p>
  <pre><code>.toolbarNav{  
      position: fixed;
      bottom: 0; 
      z-index: 1000;
      display: flex;
      justify-content: space-between;
      padding: 2em;
      background-color: white;
  
    -webkit-box-shadow: 3px 3px 5px 6px #ccc;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
    -moz-box-shadow:    3px 3px 5px 6px #ccc;  /* Firefox 3.5 - 3.6 */
     box-shadow:        2px 2px 4px 5px #ccc;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
  }
  </code></pre>
  <p>Here is the rendering :</p>
  <p><a href="https://i.stack.imgur.com/QY6zw.png" rel="noreferrer"><img src="https://i.stack.imgur.com/QY6zw.png" alt="Navbar rendering" /></a></p>
  <p>and i used css <code>:hover</code> to highlight the icons when user hovers over them, like so:</p>
  <pre><code>.material-icons.color_blue:hover { 
    color: blueviolet;
  }
  </code></pre>
  <p>The rendering :</p>
  <p><a href="https://i.stack.imgur.com/7yNOO.png" rel="noreferrer"><img src="https://i.stack.imgur.com/7yNOO.png" alt="enter image description here" /></a></p>
  <p>What I want to achieve:</p>
  <ol>
  <li><p>when i click/hover over an icon it should highlight [I do achieve this by the above code] but, it shouldn't dehighlight when clicked/hovered over any other place except other icons in the toolbar.</p>
  </li>
  <li><p>I want some text to be displayed below the icons like so:</p>
  </li>
  </ol>
  <p>I tried using <code>&lt;span&gt;</code> and positioning the text using css but it looks weird and not properly aligned.
  Also, is using css the only way to do the above things?
  I am open to any other way. Maybe a UI library that has a similar component?</p>
  <p>A similar rendering of what i want to achieve:</p>
  <p><a href="https://i.stack.imgur.com/gncsE.gif" rel="noreferrer"><img src="https://i.stack.imgur.com/gncsE.gif" alt="enter image description here" /></a></p>