Sass question [SOLVED]

Hi guys

I have styled my app using sass but for some reason the side menu icon will not change from white to black

Is there a line of code that needs to be added in order to do this?


We can’t really help without more details. Can you post what styles you do have that you think should be working so we have something to work off of?

And which side menu icon?

here is my sass file.

To customize the look and feel of Ionic, you can override the variables
in ionic’s _variables.scss file.

For example, you might change some of the default colors:

$light: #fff !default;
$stable: #f8f8f8 !default;
$positive: #387ef5 !default;
$calm: #11c1f3 !default;
$balanced: #33cd5f !default;
$energized: #ffc900 !default;
$assertive: #ef473a !default;
$royal: #886aea !default;
$dark: $base-color !default;

$greylight: #f2f2f2

// The path for our ionicons font files, relative to the built CSS in www/css
$ionicons-font-path: “…/lib/ionic/fonts” !default;

// Colors
// -------------------------------
$greylight: #f2f2f2 !default;
$positive: rgba(0,215,255,1) !default;

// Base
// -------------------------------
$font-size-base: 18px !default;
$font-size-large: 20px !default;
$font-size-small: 12px !default;

$line-height-base: 1.428571429 !default; // 20/14
$line-height-computed: floor($font-size-base * $line-height-base) !default; // ~20px
$line-height-large: 1.33 !default;
$line-height-small: 1.5 !default;

$border-radius-base: 9px !default;
$border-radius-large: 12px !default;
$border-radius-small: 6px !default;

$base-background-color: #bae5fe !default;
$base-color: #515151 !default;

// Content
// -------------------------------

$scroll-refresh-icon-color: $base-color !default;

// Buttons
// -------------------------------

$button-font-size: $font-size-base !default;
$button-height: 42px !default;
$button-padding: 12px !default;
$button-icon-size: 26px !default;

$button-small-font-size: 16px !default;
$button-small-height: 28px !default;
$button-small-padding: 4px !default;
$button-small-icon-size: 16px !default;

$button-light-bg: #fff !default;
$button-light-text: $base-color !default;
$button-light-border: $greylight !default;
$button-light-active-bg: #fafafa !default;
$button-light-active-border: #ccc !default;

$button-stable-bg: $greylight !default;
$button-stable-text: $base-color !default;
$button-stable-border: #b2b2b2 !default;
$button-stable-active-bg: #e5e5e5 !default;
$button-stable-active-border: #a2a2a2 !default;

// Bars
// -------------------------------

$bar-height: 44px !default;
$bar-title-font-size: 20px !default;

$bar-light-bg: #ef473a !default; //rgba($button-light-bg, $bar-transparency) !default;
$bar-light-text: $button-light-text !default;
$bar-light-border: rgba(0,0,0,0) !default;
$bar-light-active-bg: $button-light-active-bg !default;
$bar-light-active-border: rgba(0,0,0,0) !default;

// Items
// -------------------------------
$item-default-border: $greylight !default;

$item-divider-bg: #ffff99 !default;
$item-divider-color: $base-color !default;
$item-divider-padding: 5px 15px !default;

// Tabs and Bar
// -------------------------------

$bar-assertive-text: #000000 !default;

$tabs-dark-bg: #ef473a !important;
$tabs-dark-border: rgba(0,0,0,0) !default;
$tabs-dark-text: #000000 !default;

// Profile
// -------------------------------
.profile img {
height: 150px;
width: 150px;
border-radius: 100%;
margin-top: 30px;
margin-bottom: 20px;
.timeline {
display: block !important;
.timeline img {
height: 75px;
width: 75px;
border-radius: 100%;
margin-top: 30px;
margin-bottom: 20px;
.timeline span {
font-size: 24px;

// Timeline
// -------------------------------
.timeline span {
color: #DDD;

// Post
// -------------------------------
.post-images {
background: #fff;
.post-images img {
max-width: 60vw;
height: auto;
width: auto;

// Decorators and Other
// -------------------------------

.center {
text-align: center;

.text-right {
text-align: right;

.spinner.spinner-small svg {
height: 15px !important;
width: auto;

span.small {
font-size: 12px;

$font-stack: Helvetica, sans-serif;
$primary-color: #000000;

body {
font: 100% $font-stack;
color: $primary-color;

// Placeholders
// -------------------------------

$placeholder-font-size: 16px !default;
::-webkit-input-placeholder { /* WebKit, Blink, Edge /
font-size: $placeholder-font-size;
:-moz-placeholder { /
Mozilla Firefox 4 to 18 /
font-size: $placeholder-font-size;
::-moz-placeholder { /
Mozilla Firefox 19+ /
font-size: $placeholder-font-size;
:-ms-input-placeholder { /
Internet Explorer 10-11 /
font-size: $placeholder-font-size;
:placeholder-shown { /
Standard ( */
font-size: $placeholder-font-size;

// Include all of Ionic
@import “www/lib/ionic/scss/ionic”;

this is the icon I mean for the side menu

ive solved it now thanks