How to add text next to the icon in an FABs

I'm trying to create a Fabs that, when clicking, the icons above appear and show text next to the icon, but I'm not having success.

This would be an example of how I want it to be

ButmineisgettingtheoppositeofwhatIwant,thenamestaysinsidewheretheiconshouldbe.

Asyoucansee,thetextinsidetheicon.

hereismyHTML

<ion-fabbottomright><buttonion-fab><ion-iconname="add"></ion-icon></button>
  <ion-fab-list side="top">
    <button ion-fab>
      <ion-icon name="add"></ion-icon>
      <ion-label>Facebook</ion-label>
    </button>
  </ion-fab-list>
</ion-fab>

And here's my CSS

button[ion-fab] {
  overflow: initial;
  position: relative;

  ion-label {
    position: absolute;
    top: -8px;
    right: 10px;
    pointer-events: auto;
    color: white;
    background-color: rgba(0,0,0,0.7);
    line-height: 24px;
    padding: 4px 8px;
    border-radius: 4px;
  }
}

.fab{
  contain: layout;
}