Ionic2 / 3 - the header button icon has a different size, then the auto-return button

Question

I use the Ionic 2/3 auto button when using NavController.

On one of the pages, I want to add a button to the title, which will change something, so I added:

<ion-header> <ion-navbar color="orange"> <ion-title>Test</ion-title> <ion-buttons end> <button ion-button icon-right clear (click)="openModal()"> Next <ion-icon name="arrow-forward"></ion-icon> </button> </ion-buttons> </ion-navbar> </ion-header> 

Unfortunately, the size of the icon is slightly different (smaller), and the back button is automatically added by Ionic. I know that I can style it with CSS, but I'm afraid to break something (I cannot check all devices).

Screenshot (Android and iOS):

Maybe I should use different classes or button components? How can I make the size of all buttons and icons in the title the same?

Answer 1

You can use the directive only for icons and that’s it. This path is the back button.

 <ion-buttons end> <button ion-button icon-right icon-only clear (click)="openModal()"> Next <ion-icon name="arrow-forward"></ion-icon> </button> </ion-buttons> 

Answer 2

You just need to increase the font-size icon , as shown below.

Note: Therefore, you do this inside your scss page scss that it does not break other default styles.

your-page.scss

 .icon[name="arrow-forward"] { font-size: 2.4rem;; //same size of the default back button } 

Result:

Answer 3

Add the next-button class to your value.

 <ion-icon name="arrow-forward" class="next-button"></ion-icon> 

Refer to the ion source code for exact CSS rules for the back button . Then add your own styles.

 ion-icon.next-button.icon-ios { min-width: 18px; font-size: 3.4rem; padding-left: inherit; text-align: right; display: inline-block; } ion-icon.next-button.icon-md { margin: 0; padding: 0 6px; text-align: right; font-size: 2.4rem; font-weight: normal; }