CODEWITHSUNDEEP
angularjsionic-framework
Nurdin
Nurdin

Reputation: 23883

ionic - How to create small icon inside sidemenu?

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

enter image description here

Upvotes: 3

Views: 18660

Answers (5)

Jasmeet Singh
Jasmeet Singh

Reputation: 493

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.

Upvotes: 3

Sanath Kumar
Sanath Kumar

Reputation: 237

<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.

Upvotes: 3

Jdruwe
Jdruwe

Reputation: 3520

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

Upvotes: 0

Nurdin
Nurdin

Reputation: 23883

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>

Upvotes: 9

scnewman
scnewman

Reputation: 91

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.

Upvotes: 5

Related Questions