ionic - How to create small icon inside sidemenu? - angularjs

Question

I got a design from client. I want to embed small icon inside my sidemenu.
My current code
<ion-side-menus>
<ion-pane ion-side-menu-content>
<ion-nav-bar class="bar-stable nav-title-slide-ios7">
<ion-nav-back-button class="button-clear"><i class="icon ion-ios7-arrow-back"></i> Back</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
</ion-pane>
<ion-side-menu side="left">
<header class="bar bar-header bar-stable">
<h1 class="title">Menu</h1>
</header>
<ion-content class="has-header">
<ion-list>
<ion-item nav-clear menu-close href="#/app/home">
Home
</ion-item>
<ion-item nav-clear menu-close href="#/app/profile">
Profile
</ion-item>
<ion-item nav-clear menu-close href="#/app/friend">
Friends
</ion-item>
<ion-item nav-clear menu-close href="#/app/setting">
Setting
</ion-item>
<ion-item nav-clear menu-close href="#/app/shop">
Shop
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
My objective

Answer 1

I already got the answer
<ion-side-menus>
<ion-pane ion-side-menu-content>
<ion-nav-bar class="bar-stable nav-title-slide-ios7">
<ion-nav-back-button class="button-clear"><i class="icon ion-ios7-arrow-back"></i> Back</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
</ion-pane>
<ion-side-menu side="left">
<header class="bar bar-header bar-stable">
</header>
<ion-content class="has-header mymenu">
<ion-list>
<ion-item nav-clear menu-close href="#/app/home">
<img src="img/home.png" width="30" />Home </ion-item>
<ion-item nav-clear menu-close href="#/app/profile">
<img src="img/profile.png" width="30" />Profile </ion-item>
<ion-item nav-clear menu-close href="#/app/friend">
<img src="img/friend.png" width="30" ng-click="friend()"/>Friends
</ion-item>
<ion-item nav-clear menu-close href="#/app/setting">
<img src="img/setting.png" width="30" />Setting
</ion-item>
<ion-item nav-clear menu-close href="#/app/shop">
<img src="img/shop.png" width="30" ng-click="shop()"/>Shop
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>

Answer 2

All you have to do is add the icon that you want in the same as the text. Here is an example: http://plnkr.co/edit/KIErTU?p=preview
<ion-item>
<i class='ion-checkmark-circled'></i>home
</ion-item>
Nothing pretty, but it shows the point.

Answer 3

<ion-item menu-close class="item-icon-left">
<i class="icon ion-home" ></i>
Home
</ion-item>
Add class item-icon-leftto ion-item to nicely style and align the icons.

Answer 4

Here is How You can so it while keeping ionic sidemenu intact.
This is for ionic 2:-
app.component.js
pages: Array<{
title: string,
component: any ,
icon: string,
class: string
}>;
constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen) {
this.initializeApp();
// used for an example of ngFor and navigation
this.pages = [
{
title: 'Home',
component: HomePage ,
icon: '<i class="fa fa-pencil"></i>' ,
class: 'class1'
},
{
title: 'List',
component: ListPage ,
icon: '<i class="fa fa-plus"></i>' ,
class: 'class2'
},
{
title: 'Login Page',
component: LoginPage ,
icon: '<i class="fa fa-book"></i>' ,
class: 'class3'
}
];
}
app.html:-
<ion-content>
<ion-list>
<button [ngClass]="p.class" menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
<span class="menu_item_icon" [innerHTML]="p.icon"></span>
<span class="menu_item_title">
{{p.title}}
</span>
</button>
</ion-list>
</ion-content>
I used the ionic default boilerplate that contains the sidemenu.
Am new to Angular2. But I like doing things the clean way.

Answer 5

You could use what Afflicted suggested but the following solution I used has a correct outlining:
<div class="list">
<a class="item item-icon-left" href="#">
<i class="icon ion-email"></i>
Check mail
</a>
...
List icons in ionic