How to align text on ion-button tag to left

Ionic Framework
1

I wanted to align my icons and text on my button to the left but seems like it doesn’t work in my case. I tried declaring through HTML class and ID and applying text-align: left; and following the solution at this post from stack overflow but it only seems to work in Ionic v2.

Here’s how it looks like with the codes below.
menuss

Ionic Info

Ionic:

   ionic (Ionic CLI)             : 4.10.3 (C:\Users\Johndel\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.0.1
   @angular-devkit/build-angular : 0.12.4
   @angular-devkit/schematics    : 7.2.4
   @angular/cli                  : 7.2.4
   @ionic/angular-toolkit        : 1.4.0

Cordova:

   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : not available
   Cordova Plugins       : not available

System:

   NodeJS : v10.15.1 (C:\Program Files\nodejs\node.exe)
   npm    : 6.4.1
   OS     : Windows 8.1

profile.component.html

<ion-content>
  <div id="profileCover">

    <div id="coverTopRightMenu">
      <ion-icon name="cart"></ion-icon>
      <ion-icon name="chatboxes"></ion-icon>
    </div>

    <img src="../../../assets/profile/cover.jpg">
    <img id="accPic" src="../../../assets/profile/accPic.png">

    <div id="coverMenu">
      <ion-button color="primary">SIGN UP</ion-button>
      <ion-button id="btnLogin">LOGIN</ion-button>
    </div>
  </div>

  <div id="menu">
    <ion-button color="light" expand="full">
      <ion-row>
        <ion-col>
          <ion-icon name="today"></ion-icon>
        </ion-col>
        <ion-col>My Purchases</ion-col>
      </ion-row>
    </ion-button>

    <ion-button color="light" expand="full">
      <ion-row>
        <ion-col>
          <ion-icon name="heart-empty"></ion-icon>
        </ion-col>
        <ion-col>My Likes</ion-col>
      </ion-row>
    </ion-button>

    <ion-button color="light" expand="full">
      <ion-row>
        <ion-col>
          <ion-icon name="time"></ion-icon>
        </ion-col>
        <ion-col>Recently Viewed</ion-col>
      </ion-row>
    </ion-button>

    <ion-button color="light" expand="full">
      <ion-row>
        <ion-col>
          <ion-icon name="mail-unread"></ion-icon>
        </ion-col>
        <ion-col>Refer a Friend</ion-col>
      </ion-row>
    </ion-button>

    <ion-button color="light" expand="full">
      <ion-row>
        <ion-col>
          <ion-icon name="logo-bitcoin"></ion-icon>
        </ion-col>
        <ion-col>My Shopee Coins</ion-col>
      </ion-row>
    </ion-button>

    <ion-button color="light" expand="full">
      <ion-row>
        <ion-col>
          <ion-icon name="star-outline"></ion-icon>
        </ion-col>
        <ion-col>My Rating</ion-col>
      </ion-row>
    </ion-button>

    <ion-button color="light" expand="full">
      <ion-row>
        <ion-col>
          <ion-icon name="contact"></ion-icon>
        </ion-col>
        <ion-col>My Account</ion-col>
      </ion-row>
    </ion-button>

    <ion-button color="light" expand="full">
      <ion-row>
        <ion-col>
          <ion-icon name="help-circle-outline"></ion-icon>
        </ion-col>
        <ion-col>Help</ion-col>
      </ion-row>
    </ion-button>
  </div>
</ion-content>

profile.component.scss

#menu{
    vertical-align: bottom;
}

#menu > ion-button {
    height: 80px;
}

#accPic{
    position: absolute;

    top: 18vh;
    left: 5vw;

    border-radius: 50%;
    width: 15vw;
    height: 15vh / 2;

    background-color: silver;

    border: 0.5vh solid white;
}

#profileCover > #coverMenu{
    position: absolute;
    top: 22vh;
    left: 60vw;

    width: 100vw;
}

#profileCover > #coverMenu > ion-button{
    width: 18%;
    height: 5vh;

    font-size: 50%;

    background-color: transparent;

    padding-left: 5px;
}

#coverTopRightMenu{
    position: absolute;
    left: 80vw;
    width: 100vh;
}

#coverTopRightMenu > ion-icon{
    margin: 1vh;
}

ion-icon{
    width: 5vw;
    height: 5vh;
}
2

You can use ion-row, see this example!

<div>
  <ion-row margin-bottom margin-top padding-top (click)="onClickEditProfile()">
      <ion-icon name="ios-contact" item-left color="primary"></ion-icon>
       <span margin-left> Editar informaçōes pessoais</span>
  </ion-row>
</div>

I’ts not a button, but you can use ion-row

30
Captura de Tela 2019-02-21 às 18.12.30.png352×673 77.8 KB

3

Your screenshot is exactly the style that I am looking for. I tried your example, it does work but the style seems to be odd. It looks like the text is overlapping a little on top right next to the icon.

This is how your code looks like from the example you gave:
image

I tried to separate the icon with <ion-col> tag to see if it will place the UI elements like yours but it went far off from the left. Here’s a screenshot.
image

Here’s the code I made: (no modifications on my CSS file just yet)

<ion-row>
      <ion-col style = "margin-right: 0px;">
        <ion-icon name="today" item-left color="primary"></ion-icon>
      </ion-col>

      <ion-col style = "margin-left: 0px;">
        <span>My Purchases</span>
      </ion-col>
</ion-row>

Hoping for you reply soon. Thank you.

4 
<ion-col style = "margin-left: 0px;">
   <span text-left>My Purchases</span>
</ion-col>

text-left don’t work?

1 Like
5

I solved it with the use of ion-item by indicating on which item is the first one with item-start property.

Here’s a small example of my code.

<ion-item lines = "full" detail>
      <ion-icon color="primary" item-start name="today"></ion-icon>
      <span>My Purchases</span>
</ion-item>

Thank you for those who spent time helping.