ionic-framework/demos/config/main.html

<ion-navbar *navbar>
  <ion-title>Config</ion-title>
</ion-navbar>

<ion-content class="config-demo">
  <ion-list>
    <ion-item>
      <ion-label>Back Button Icon</ion-label>
      <ion-select [(ngModel)]="config.backButtonIcon">
        <ion-option value="ios-arrow-back">ios-arrow-back</ion-option>
        <ion-option value="md-arrow-back">md-arrow-back</ion-option>
        <ion-option value="close">close</ion-option>
        <ion-option value="heart">heart</ion-option>
        <ion-option value="globe">globe</ion-option>
      </ion-select>
    </ion-item>

    <ion-item>
      <ion-label>Icon Mode</ion-label>
      <ion-select [(ngModel)]="config.iconMode">
        <ion-option value="ios">ios</ion-option>
        <ion-option value="md">md</ion-option>
      </ion-select>
    </ion-item>

    <ion-item>
      <ion-label>Tab Placement</ion-label>
      <ion-select [(ngModel)]="config.tabbarPlacement">
        <ion-option value="bottom">bottom</ion-option>
        <ion-option value="top">top</ion-option>
      </ion-select>
    </ion-item>

  </ion-list>
  <p class="note">Note: the config will not be updated until you click the button below.</p>

  <div padding>
    <button block (click)="load()">
      Update Config
    </button>
  </div>

  <!-- this has to be formatted weird for pre -->
  <pre margin>@App({
  config: {
    backButtonIcon: "{{initialConfig.backButtonIcon}}"
    iconMode: "{{initialConfig.iconMode}}"
    tabbarPlacement: "{{initialConfig.tabbarPlacement}}"
  }
})</pre>

  <div padding>
    <button block secondary (click)="push()">
      Go to Another Page
    </button>
  </div>

</ion-content>

<style>
  .config-demo pre {
    background-color: #f8f8f8;
  }

  .config-demo .note {
    color: #444;
    font-style: italic;
    margin: 0 16px;
  }
</style>