[SOLVED] SideMenu button and icon issue

Ionic Framework ionic-v3
1

Hi!

First of all, congratulations for making this framework! It’s totally awesome!

I’m making an android app for my last work in university, and I have an issue with the sidemenu button and ionicons in general.

The thing is, when I try to make a sidemenu and add an icon, with “serve” command looks well. But when I try to emulate the app with “ionic run android --device” on my real phone, for example, or an emulator like genymotion, the button places at right of the navbar, and icon not shows (before, the icon worked but always with an “ugly” menu button, and didn’t let me change that).

I’m using ionic 2 beta, i’ve tried with versions 2.0.1 and 3.0.0 of ionicons…

I need your help!!!

Thanks!!!

2

why using ionic 2 beta?

3

Can you paste the code? for better understanding!

4

Please paste the code :stuck_out_tongue_winking_eye:

5

Sorry!! My code here:

ionic.config.json

{
  "name": "app",
  "app_id": "",
  "v2": true,
  "typescript": true,
  "proxies": [
    {
      "path": "/",
      "proxyUrl": "http://192.168.1.2:3000/"
    }
  ]
}

package.json

{
  "name": "ionic-hello-world",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/common": "2.4.8",
    "@angular/compiler": "2.4.8",
    "@angular/compiler-cli": "2.4.8",
    "@angular/core": "2.4.8",
    "@angular/forms": "2.4.8",
    "@angular/http": "2.4.8",
    "@angular/platform-browser": "2.4.8",
    "@angular/platform-browser-dynamic": "2.4.8",
    "@angular/platform-server": "2.4.8",
    "@ionic-native/core": "^3.14.0",
    "@ionic-native/file": "^4.1.0",
    "@ionic-native/file-transfer": "^4.1.0",
    "@ionic-native/splash-screen": "3.1.0",
    "@ionic-native/status-bar": "3.1.0",
    "@ionic/storage": "^2.0.0",
    "angular2-jwt": "^0.2.0",
    "bower": "^1.8.0",
    "ionic-angular": "2.3.0",
    "ionicons": "3.0.0",
    "rxjs": "5.0.1",
    "sw-toolbox": "3.4.0",
    "zone.js": "0.7.2"
  },
  "devDependencies": {
    "@ionic/app-scripts": "1.1.4",
    "typescript": "2.0.9"
  },
  "cordovaPlugins": [
    "cordova-plugin-whitelist",
    "cordova-plugin-device",
    "cordova-plugin-statusbar",
    "cordova-plugin-console",
    "cordova-plugin-splashscreen",
    "ionic-plugin-keyboard"
  ],
  "cordovaPlatforms": [],
  "description": "app: An Ionic project"
}

variables.scss


$font-path: "../assets/fonts";

@import "ionic.globals";

$colors: (
  primary:    #387ef5,
  secondary:  #32db64,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #222
);


@import "ionic.theme.default";


@import "ionic.ionicons";


@import "roboto";
@import "noto-sans";

home.html

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
           <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>
      Home
    </ion-title>
  </ion-navbar>
</ion-header>
6

Because I started with this version in december, and I haven’t time now to change because I have to present this project in a month :frowning:

7 
<ion-header>

  <ion-navbar>
    <ion-title>Home</ion-title>
    <button ion-button end menuToggle>  <-- add end inside here
      <ion-icon name="menu"></ion-icon>
    </button>
  </ion-navbar>

</ion-header>

I hope this solves it.

8

I would be worried about getting a failing grade simply for presenting something without having kept up with framework upgrades along the way.

1 Like
9

The only two rules to success the final project are:
1- A nice design process with a nice documentation.
2- A demonstration of the app working

If is ionic 1, 2, 3 or C don’t cares hahaha. So, I’m not going to take the risk of update the framework…If all explodes…bye grade xD

10

Thanks, but didn’t work :frowning: :frowning:

11

If you need help getting this part to happen, you are likely to have a considerably greater chance of getting it if you are using supported versions of framework dependencies.

1 Like
12

First of all, if your project isn’t too big I should definitely upgrade. Big chance that would solve your issue. Anyways I’m pretty sure your syntax isn’t right for the current version, that should be something like this:

  <ion-navbar>
    <ion-title>Home</ion-title>
    <ion-buttons end>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
   </ion-buttons>
  </ion-navbar>
1 Like
13

I’ve tried this before…and didn’t work for me, but really thanks! I’m gonna search how to upgrade, the changes I need and all things…and let’s try…I hope works without lose too time… thank you!

14

If you don’t have a big project, just update your cli and create a new project. Then migrate your content over to your new app.

1 Like
15

Thx guys, the update to ionic 3 solved my problem!!! Thank you very much for the motivation to update ionic version!!:space_invader: