Ionic 6 custom tab bar

Ionic Framework Ionic Vue
1

Hi !

I tried to customize the color of the tab bar icon, but I can’t figure out how to change the color of the inactive tabs icon.

I don’t think I’m the first one to have this problem, so I’m pretty hopeful that someone has a solution. :innocent:

Thx !!!

2

The ion-tab-button component supports a variety of CSS custom properties.

--color is likely the property that you are looking for. It will change the foreground color of the button, including the text and icon.

ion-tab-button {
  --color: blue;
}
1 Like
3

Thx,

I forgot to remove the color attribute, that’s why it didn’t work :see_no_evil: