Ionic 2 with iOS and Material Design Experiences

By default, Ionic 2 styles your application components based on the platform it’s running on: Users automatically get a native iOS experience on iOS and a Material Design experience on Android.

Here is a screencast that shows this feature in action in the Ionic Realty sample app I shared recently (see resources at the bottom of this article):

If you explore the ionic-framework/components directory structure under node_modules, you’ll notice that each component has an iOS and a Material Design Sass file. For example, button.ios.scss and

You can also use the @App annotation to change specific elements of the user experience (tab placement, icons, and animations), or even to force a specific experience regardless of the platform the app is running on. For example, to force the Material Design experience, modify the config value as follows:

  template: `<ion-nav [root]="root"></ion-nav>`
  config: {
    mode: "md"

See the config documentation for more details, and the beta announcement blog post for a detailed overview of the new Ionic 2 features.

Ionic Realty Resource

7 Responses to Ionic 2 with iOS and Material Design Experiences

  1. agario March 8, 2016 at 10:04 pm #

    good blog thanks admin

  2. Julian April 13, 2016 at 12:56 am #

    Very Usefull, nice blog :)

  3. Michael April 24, 2016 at 12:39 pm #

    Where do I need to put that in which FILE ???

    • Michael April 24, 2016 at 1:31 pm #

      Found it, it’s here: ./app/app.js

      For iOS it’s like this (mode: “ios”):

      template: ”,
      config: {
      mode: “ios”

  4. propchill May 16, 2016 at 7:57 am #

    Discussing the extravagance lodging section, Bengaluru stands third as the biggest venture center point of High Net worth people (HNIs). The multi-social populace base of Bengaluru with its refined tastes desires for top of the line private flats and manors, especially the Residential Real estate in Bengaluru which are popular. Whitefield, Outer Ring Road (ORR), Central Business District (CBD), Secondary Business District (SBD) and North Bengaluru are dynamic markets offering extravagance lodging ventures. Manors are most overwhelming in ranges like ORR, Sarjarpur Road, Whitefield and North Bengaluru. Interest for extravagance homes tailing US and Singapore styles is on the ascent in Bengaluru. Residential real estate in bengaluru

    • Colin May 30, 2016 at 10:01 am #

      Wow, that sounds great. Bengalurururu here I com……………


  1. MOBILE WEB WEEKLY NO.98 – ENUE - March 12, 2016

    […] Ionic 2 with iOS and Material Design Experiences […]

Leave a Reply