Dynamic tab icons

Ionic Framework ionic-v3
1

I have a page with 3 tabs like this:

23

I choose custom icons for each tab like this:

12

I want this tab icon’s background image url to change dynamically depending a local variable. Is this possible?

Thanks.

2

I have done similar thing in non-Ionic projects/web-sites.

There are two ways of doing this -

  1. Try changing your element's class name programetically(using JavaScript). This way you can give different class name to element and different CSS stylings(background image in this case).
    In Angular, you can do this using conditional classes. Look at this stackoverflow answer.

  2. Give inline styling and update them by JavaScript. Similar solution is present here for Angular projects.

1 Like
3

Thanks for the fast response. Your post helped me to figure out a solution. I’ll post here for someone who may need it in the future.

In HTML

<ion-tab [tabIcon]="firstTabIcon"></ion-tab>

In TS

public firstTabIcon: string;

  ionViewDidLoad() {
    this.firstTabIcon = 'first' // or 'first-changed'
  }

In SCSS

.ion-ios-first, .ion-ios-first-outline {
        background-repeat: no-repeat;
        background-position: 50%;
        background-size: contain;
        background-image: url('some_url');
    }

    .ion-ios-first-changed, .ion-ios-first-changed-outline {
        background-repeat: no-repeat;
        background-position: 50%;
        background-size: contain;
        background-image: url('other_url');
    }
1 Like