How to change icon color for button-icon inside header

ionic-v1
1

How can I change icon color when icon used in button using button-icon e.g Left toggle icon shown below.

 <ion-nav-buttons side="left">
            <button class="button button-icon button-clear ion-navicon" ng-click="toggleLeft()">
            </button>
          </ion-nav-buttons>

I had take simple codepen. I just want to change ion-navicon color to other color instead of white.

http://codepen.io/anon/pen/IwGAD.

Please help.

2

Add own css class to set font-color for ‘button:before’/‘button:after’?

3

Thanks for answer. Using css will work fine. But I want to use SCSS variables for this color. like button-stable so I can change color by single command.

4

You can import ionic.scss and overwrite the ionic variables or use the ionic variables to define own scss classes.

on top of your scss.file you have to import ionic.scss

@import "ionic/ionic" //example path to ionic

and then use ionic variables/ mixins and so on

$my-stable: $stable;

or you can define own colors:

$my-stable: #000;
.mybutton-black {
  color: $my-stable;
}