kxip-app/src/app/tabs/tabs.page.html

<ion-tabs #tabs (ionTabsDidChange)="setCurrentTab()">
    <ion-tab-bar slot="bottom" [ngClass]="{'live' : selectedTab === 'live', 
    'dark' : selectedTab === 'player-stats'}">
        <ion-tab-button tab="home">
            <ion-icon name="home-outline"></ion-icon>
            <ion-icon name="home"></ion-icon>
        </ion-tab-button>

        <ion-tab-button tab="live">
            <ion-icon name="play-circle-outline"></ion-icon>
            <ion-icon name="play-circle"></ion-icon>
        </ion-tab-button>

        <ion-tab-button tab="ar">
            <ion-icon name="camera-outline"></ion-icon>
            <ion-icon name="camera"></ion-icon>
        </ion-tab-button>

        <ion-tab-button tab="booking">
            <ion-icon name="ticket-outline"></ion-icon>
            <ion-icon name="ticket"></ion-icon>
        </ion-tab-button>

        <ion-tab-button tab="collections">
            <ion-icon name="trophy-outline"></ion-icon>
            <ion-icon name="trophy"></ion-icon>
        </ion-tab-button>

    </ion-tab-bar>
</ion-tabs>