Ionic: Change ion-navicon color

I have a navigation bar:

    <ion-nav-bar class="bar-green-mint" align-title="center">
        <ion-nav-back-button>
        </ion-nav-back-button>

        <ion-nav-buttons side="left">
            <button class="button button-icon button-clear ion-navicon menu-icon" menu-toggle="left">
            </button>
        </ion-nav-buttons>
    </ion-nav-bar>

I want to change the color of my navigation icon. For 'normal' icons like:

<i class="icon menu-icon ion-home"></i>

I just needed to add the css:

.menu-icon {
    color: white;
}

but this does not work for the navigation icon.

So how can i set its color to be white?

Here's a working example from CodePen on how the change in CSS actually works. The code copy/paste here (I used orange instead of white, just to prove point).

angular.module('mySuperApp', ['ionic'])
.controller('MyCtrl',function($scope) {

});
.menu-icon{
  color:orange;
}
<html ng-app="mySuperApp">
  <head>
    <meta charset="utf-8">
    <title>
      Toggle button
    </title>
    
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    
    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
    
  </head>
  <body class="padding" ng-controller="MyCtrl">
    
    <div class="botones">
    <div class="row">
      <div class="col">
        <button class="button button-block button-positive"><i class="icon menu-icon ion-home"></i>
          Click me
        </button>
      </div>
      
    </div>
</div>
  </body>
</html>

Now, since you don't see this change, you have to show the code for as where are you making the CSS change. Are you perhaps using SASS? If so, you would have to change the sass files then.

The best way to check if you changed the CSS correctly is to inspect the button (Firebug, Chrome dev tools) and see if the correct CSS is applied.