A perfect Angular material bottom navbar. Is there a component i am missing?

Question

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:

component.html:

<mat-toolbar class="toolbarNav">
    <mat-icon class="material-icons color_blue" (click)="getTopArtists('long_term' , 0 , 100)">
        star_border</mat-icon>
    <mat-icon class="material-icons color_blue" (click)="getTopTracks('long_term' , 0 , 100)">favorite_border
    </mat-icon>
    <mat-icon class="material-icons color_blue" (click)="recentlyPlayed()">history</mat-icon>
</mat-toolbar>

component.css

.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 */
}

Here is the rendering :

and i used css :hover to highlight the icons when user hovers over them, like so:

.material-icons.color_blue:hover { 
  color: blueviolet;
}

The rendering :

What I want to achieve:

1. 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.

2. I want some text to be displayed below the icons like so:

I tried using <span> 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?

A similar rendering of what i want to achieve:

Answer 1

Just adding an example in stackblitz that should be a good start for something like this.

I'm not 100% sure what you wanted with the 1st point, but I think you want the active button to have a color to denote that. To do this I used Abhishek's suggestion to use RouterLink and RouterLinkActive. By adding routerLinkActive="active-link" this means that the class is added to that element when the path would match and it can be styled accordingly.

For the text under the icon I just had it always displayed unlike the example provided but you could fiddle with that if you wanted it to only display when active. This is done by making the button be a flex container with a flex direction of column.

https://stackblitz.com/edit/angular-9-material-starter-par7le?file=src/app/app.component.html

.toolbarNav {
  position: fixed;
  bottom: 0;
  z-index: 1000;
  display: flex;
  justify-content: space-around;
  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 */

  button {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    span {
      display: block;
    }
  }
}

button:hover,
.active-link {
  color: blueviolet;
}

<mat-toolbar class="toolbarNav">
  <button mat-flat-button routerLink="/top-artists" routerLinkActive="active-link">
    <mat-icon class="material-icons color_blue">
      star_border</mat-icon>
    <span>Top Artists</span>
  </button>
  <button mat-flat-button routerLink="/top-tracks" routerLinkActive="active-link">
    <mat-icon class="material-icons color_blue">favorite_border
    </mat-icon>
    <span>Top Tracks</span>
  </button>
  <button mat-flat-button routerLink="/history" routerLinkActive="active-link">
    <mat-icon class="material-icons color_blue">history</mat-icon>
    <span>History</span>
  </button>
</mat-toolbar>