How to place horizontal icons with labels inside a navbar or toolbar - Ionic v2

I have the following code snippet, and I'm trying to create a menu on the top that is a list of icons and a label below each icon.

• The label is in the center of each icon
• The Icons should be in the same row
• All the icons should be placed in the center of the ion-navbar

the ion-toolbar gives the same behavior as ion-navbar

ts

export class HomePage {

  constructor(private nav: NavController) {
  }

  range(min, max, step) {
    var input = [];
        step  = step || 1;    

    for (var i = min; i <= max; i += step) {
        input.push(i);
    }
    return input;
  }
}

html

<ion-header>
  <ion-navbar>
    <span  >
    <ion-label *ngFor="let i of range(1,5)"> 
      <ion-icon name="home"></ion-icon>
      Home
    </ion-label>
    </span>
  </ion-navbar>
</ion-header>


<ion-content text-center>
  Some page content
</ion-content>

Clean Plunker, Worked-on Plunker

Tried to play around but couldn't get the result I need, and I've created the above plunker to have a clean env to play with ...

Any ideas ?