Unable to style element properties for <ion-tab>, tab icons

Bug Report

Ionic Info Run ionic info from a terminal/cmd prompt and paste the output below.

Ionic:

   ionic (Ionic CLI)          : 4.0.1
   Ionic Framework            : @ionic/angular 4.0.0-beta.2
   @angular-devkit/core       : 0.7.0-beta.2
   @angular-devkit/schematics : 0.7.0-beta.2
   @angular/cli               : 6.0.3
   @ionic/ng-toolkit          : 1.0.0
   @ionic/schematics-angular  : 1.0.0

System:

   NodeJS : v9.4.0 (/usr/local/Cellar/node/9.4.0/bin/node)
   npm    : 6.3.0
   OS     : macOS High Sierra

Describe the Bug Unable to edit style properties of tab-icon-button. Tab bar icons aren’t respecting the CSS as it should. Unable to modify the icon size and change change color when the tab-button active.

I’m able to edit element properties in the browser console, I would expect just to get the class of .tab-button-icon and set the same properties in the global.scss but it doesn’t apply changes.

.tab-button-icon{
    font-size:10px;
}

<ion-tab href="/app/(home:home)" icon="happy" label="Browse">
        <ion-router-outlet name="home"></ion-router-outlet>
    </ion-tab> 

Steps to Reproduce Steps to reproduce the behavior:

1. Launch the App

Related Code

    <ion-tab href="/app/(home:home)" icon="happy" label="Browse">
        <ion-router-outlet name="home"></ion-router-outlet>
    </ion-tab>
    <ion-tab href="/app/(meal-plan:meal-plan)" icon="egg" label="Meal Plan">
        <ion-router-outlet name="meal-plan"></ion-router-outlet>
    </ion-tab>
    <ion-tab href="/app/(shopping:shopping)" icon="list" label="Shopping List">
        <ion-router-outlet name="shopping"></ion-router-outlet>
    </ion-tab>
    <ion-tab href="/app/(account:account)" icon="person" label="Account">
        <ion-router-outlet name="account"></ion-router-outlet>
    </ion-tab>
</ion-tabs>

Expected Behavior I expect style changes to the tab icon classes or the tab itself to apply.

Additional Context iOS:

I’m able to adjust size and style the tab bar as desired using the browser console. Trying to make the same changes in the global scss file doesn’t work.

[brandyscarney]

@NathanNovak Sorry, my comment was worded weird! 4.0.0-beta.14 hasn’t been released yet. We’re planning to release it this week.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.