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