Ion-side-menu icons very small if using ion-item element list


I am using the out of the box ionic sidemenu app with a few list elements that consist of an ionicon and a word.

The issue I am facing is that the icons I have added seem to be much smaller than they should be when I insert them inside of an ion-item element. However, when I forego using the ion-item element, they look fine, like:

    <a class="item item-icon-left" href="#/app/search"><i class="icon ion-search"></i>Search</a>
    <a class="item item-icon-left" href="#/app/map"><i class="icon ion-earth"></i>Map</a>
    <a class="item item-icon-left" href="#/app/help"><i class="icon ion-information-circled"></i>Help</a>
    <a class="item item-icon-left" href="#/app/logout"><i class="icon ion-log-out"></i>Logout</a>

The correct way as I understand it should be:

    <ion-item item-type="item-icon-left" nav-clear menu-close href="#/app/search">
      <i class="icon ion-search"></i>Search
    <ion-item item-type="item-icon-left" nav-clear menu-close href="#/app/map">
      <i class="icon ion-earth"></i>
    <ion-item item-type="item-icon-left" nav-clear menu-close href="#/app/help">
      <i class="icon ion-information-circled"></i>Help
    <ion-item item-type="item-icon-left" nav-clear menu-close href="#/app/logout">
      <i class="icon ion-log-out"></i>Logout

Now, I know the ion-item method is the correct way to make a menu list, but for some reason the icons in this list show up extra small, which is why I went with the <a class=’…> format. Does anyone know why the list is not displaying the correct icon sizes?


Woah, thats a problem. Thanks for catching that :smile:

I opened an issue for that on github.


I had exactly the same problem with the small list icon size.
You need to use



<ion-item class="item-icon-left" href="#">
  <i class="icon ion-search"></i>Search

Thanks to mharington for raising the issue and adamdbradley to pointing out the solution
Just making the answer easier to find.


You shouldn’t use, i think, the and href=“whatever”.
In the doc and everyxhere people use ui-sref


i founded,just a silly mistake :frowning: