Ionic-framework: Navbar right side icons appear too small

[basvdijk]

Short description of the problem:

The icons on the right in the navbar appear too small.

What behavior are you expecting?

The same size of icons for both menu toggle and action icons as shown in the Material Design guidelines on https://material.google.com/components/subheaders.html

Steps to reproduce:

1. Create an empty tabs project ionic start tabs tabs --v2
2. Change a template e.g. home.html with header code based on the documentation:

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

    <ion-title>
      Page Title
    </ion-title>

    <ion-buttons end>
      <button ion-button>
        <ion-icon name="search"></ion-icon>
      </button>
      <button ion-button>
        <ion-icon name="more"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

Which Ionic Version? 2.x

Plunker that shows an example of your issue

I have created a Plunkr but in this Plunkr the icons are the same size:

http://plnkr.co/edit/Gn9m7rfjc9WSGUOLBwBt?p=info

Run ionic info from terminal/cmd prompt: (paste output below)

[daveshirman]

add icon-only to the button:
<button ion-button icon-only ...>

[basvdijk]

Thanks! http://ionicframework.com/docs/v2/api/components/navbar/Navbar/ wan't reflecting this.

[daveshirman]

No problem. If you haven't already, check the release notes too:

https://github.com/driftyco/ionic/blob/master/CHANGELOG.md

[basvdijk]

thanks! 👍