Icon in ion-tab special

Ionic Framework ionic-v3
1

Hi :slight_smile: !

Is it possible to just change the size of one of the icon in ion-tabs ?

Just for example, I would like 3 icons with the first and third normal size and for the 2nd icon, much larger and to have like a round around this please ?

This form : ------------()------------------

2

Hi Quiesan, to my knowledge (and because I want to stick to universal design for android & iOS in my app), I didn’t test to tweak much ion badges on top of my ionic tabs icons.

One possible direction, is to give an id or class to the element, and then use it. It’s classic CSS work.
For example i use this:

<ion-tabs>
  <ion-tab [root]="tab1Root" tabTitle="{{ 'ORDERS' | translate }}" tabIcon="basket" [tabBadge]="ordersCounter?.tempCounter1" tabBadgeStyle="danger"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="{{ 'CUSTOMERS' | translate }}" tabIcon="person"></ion-tab>
</ion-tabs>

But i could try this:

<ion-tabs>
  <ion-tab [root]="tab1Root" tabTitle="{{ 'ORDERS' | translate }}" tabIcon="basket" [tabBadge]="ordersCounter?.tempCounter1" tabBadgeStyle="CustomCSSForBadge"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="{{ 'CUSTOMERS' | translate }}" tabIcon="person"></ion-tab>
</ion-tabs>

and then modify my CSS/SCSS, to make a .CustomCSSForBadge class style.
But as Ionic is a framework, I’m not sure all will work, until tested.

This is open to CSS anyways, feel free to test.

1 Like
3

Thanks ! For you, is it possible to do like this image ?

Image1
Image1.png737×97 1.01 KB

4

Someone have an idea please…?

5

Please someone ? :frowning:

6

Please … :frowning:

7

I’m quite sure it won’t work with images, this can’t fit into Material Design for Android or iOS basic design templates (and ionic uses them to be consistent, and work on top of what Google and Apple accept). Sorry @Quiesan

8

So all ionic application will have the same tabs bar…?