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?