Ionic Button center icon and text

Ionic Framework Ionic Vue
1

Hello,

I need help for something that is making me crazy. I need to centre icons with text into a button. If I could use CSS and Flexbox, I could do it easily. But Flexbox isn’t working with Ionic.
I have tried also the CSS Utilities and classes but still doesn’t work.
This is my code.

 <div class="btn-container">
        <ion-row>
          <ion-col size="6">
            <ion-button size="large" expand="full">
              <ion-icon slot="start" :icon="qrCodeOutline"></ion-icon>
              QR Code
              </ion-button
            >
          </ion-col>

          <ion-col size="6">
            <ion-button size="large" expand="full">
              <ion-icon slot="start" :icon="cardOutline"></ion-icon>  
              ID Card</ion-button
            >
          </ion-col>
        </ion-row>
      </div>

Also, as you can see, I have used a workaround to display the icon into the page. Because If I use the example code from the documentation, it doesn’t work. The icons aren’t displayed.
Could anyone help me?

Thanks

2

I don’t understand what you want. Just 2 buttons with text and icon?
In your example, you have a < you don’t need
Try it

<div class="btn-container">
        <ion-row>
            <ion-col size="6">
                <ion-button expand="full">
                    Full Button
                    <ion-icon slot="end" name="star"></ion-icon>
                </ion-button>
            </ion-col>

            <ion-col size="6">
                <ion-button expand="full">
                    Full Button
                    <ion-icon slot="end" name="star"></ion-icon>
                </ion-button>
            </ion-col>
        </ion-row>
    </div>

Made with doc
https://ionicframework.com/docs/api/button
And icon
https://ionicons.com/

3

Hi,
Thanks for your reply and help. Sorry If I haven’t explained my issue correctly.

I want to centre the icon into the button and put the text below and also centered.
I could do easily with Flexbox. But I can’t do with Ionic because Flexbox and properties aren’t working if you try to implement for example, with classes.
Live and noob example of what I mean.

I have referred to the documentation about CSS utilities, this one
But I’m still unable to put the icon into the centre and text. Because the properties aren’t working correctly.

Plus,
This code and way of calling icons doesn’t work. Icons aren’t displayed.
<ion-icon slot="end" name="star"></ion-icon>

The only way to display icons is to put into the script tag, setup & return and change the code in this way to make working correctly.

<ion-icon slot="end" :icon="star"></ion-icon>

I hope now I have explained my issue better.
Thanks

4

probably an easier way, but this works using just ionic css

  <ion-button @click="goSomeWhere" >
    <ion-col>
      <ion-row>BUTTON</ion-row>
      <ion-row style="display: block">
          <ion-icon :icon="addCircleOutline"></ion-icon>
      </ion-row>
    </ion-col>
  </ion-button>
5

Thanks Aaron! You’re amazing! I’m looking at your repositories about Ionic and Vue on GitHub and they are very helpful!
Anyway, I have solved my issue with your code. Only I have changed the code a little bit to have the icon first and text after.
Thanks again and happy new year!

1 Like
6

Check YouTube And Dev.to there is more content

7

Thanks! I will look into it. Now I need to understand how to implement phonegap-plugin-barcodescanner. The documentation on Ionic about this plugin and Vue is almost zero.
Maybe I could find something on your videos or blog posts

8

I found the correct answer… @zackde9 @argCedric

<ion-button color="danger">
  <ion-icon slot="top" :icon="trashBinOutline"></ion-icon>
  DELETE
</ion-button>
9

Works for me…
<IonButton id=“btn_mic1”
onClick={(e) => goSeach(e)}
onTouchEnd={(e) => goSeach(e)}
>

                        <IonIcon id="btn_mic1_icon"
                                 icon={mic}
                                 // slot="end"
                                 // slot="center"
                        ></IonIcon>


                    </IonButton>