How to change icon color for button-icon inside header


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()">

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

Please help.


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


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.


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;