Editing Ionic tab icon styles

Question

I am working on an Ionic project where the main navigation method is tabs. The center tab needs to stand out so I created a style in my scss like this:

i.icon.ion-ios-camera {
    height: inherit;
    border-radius: 100em;
    background-color: #ff5b38;
}

I did this the way I did barbecue when ionic serve'ing and inspecting, I find that my tab:

<ion-tab title="Post" icon="ion-ios-camera" href="#/home/post">
    <ion-nav-view name="tab6"></ion-nav-view>
</ion-tab> 

gets compiled to:

So I thought just to create a style for the compiled icon (I only want to style the tab icon not the whole tab). Oddly, this did not work. However, inspecting that element and adding the styles like this works:

The end result is supposed to end up looking like this:

But I can only achieve those styles directly editing the <i> tag in the inspector. The style I posted above (which is in the ionic.app.scss file) does not modify the icon styles. Am I doing something wrong? Do my styles not get compiled correctly?

Answer 1

Use below snippet instead:

.tabs i.icon.ion-ios-camera {
  height: inherit;
  background-color: #ff5b38;
  border-radius: 100em;
}

.tabs i.icon.ion-ios-camera:before {
  color: white;
}

By the way, if you use sass, ensure gulp sass or ionic setup sass has been executed. Hope this will help, regards.

Answer 2

I find actual solution after lots research, just add in your style

For Android :

If You Change Inactive icon update false.

.tabs-md .tab-button[aria-selected=true] .tab-button-icon {
  color: 'my-brand-color';
}

Answer 3

Have you tried running: ionic setup sass ?

It will setup sass on your ionic project and after that when you run ionic serve your SASS should be compiled to the css folder of the project.

You can also try to add code to the style.css located in www/css.

You can check the full article on setting up sass with ionic here: http://ionicframework.com/docs/cli/sass.html