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>
    <ion-item item-type="item-icon-left" nav-clear menu-close href="#/app/map">
      <i class="icon ion-earth"></i>
      <span>Map</span>
    </ion-item>
    <ion-item item-type="item-icon-left" nav-clear menu-close href="#/app/help">
      <i class="icon ion-information-circled"></i>Help
    </ion-item>
    <ion-item item-type="item-icon-left" nav-clear menu-close href="#/app/logout">
      <i class="icon ion-log-out"></i>Logout
    </ion-item>

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?

1 Like

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

 class="item-icon-left"

Example:

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

Thanks to mharington for raising the issue and adamdbradley to pointing out the solution https://github.com/driftyco/ionic/issues/1427
Just making the answer easier to find.

2 Likes

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: