Ionic directives VS Angular material directives with Ionic Framework

I want to use ionic with material design. I am stuck between using ionic directives with custom css and angular-material

I have read that using ionic directives we get lot of efficient features like

  • App data is remembered with UI-router, even after navigating to other view and coming back to the page

  • Ionic list items are rendered only upto display height and reused when scrolling down or up

and a lot of performance improvements.

But, if i use ionic directives they don't have material design.

If i use angular-material i will not have these performance improvements, and extra features needed for a mobile application.

Angular-material directives are like

<md-list>
  <md-item ng-repeat="item in items">
    Hello, {{item}}!
  </md-item>
</md-list>

Ionic directives are like 

<ion-list>
  <ion-item ng-repeat="item in items">
    Hello, {{item}}!
  </ion-item>
</ion-list>

Looks like Ionic is funding angular-material project development, then why is angular-material not compatible to use with ionic?

How can i use angular-material components without loosing the performance improvements and features of ionic?

OR

is there a better idea for using material design with ionic?

There is a fairly new project called Ionic Material.

I've tried it out and it works pretty well, but be advised that it is still in "Pre-Release Preview" mode.

According to the github repo it should enter Alpha in April 2015.

It can be installed with bower

bower install ionic-material

That's pretty much all you need to do, but be warned, there are bugs and the documentation is basically non-existent.

Good luck!

I found a material design css framework known as Materializecss. It looks promising. It's just plain css and javascript framework.

http://materializecss.com/

Advantages over other frameworks

  1. Pure css classes, will not conflict with ionic directives. No performance loss.
  2. Of all the frameworks i have seen, this is the only one closely following material design rules
  3. Almost ready it has about 50+ contributors it's current Version 0.95.3 in less than 6 months
  4. Easy to use. Well documented with feature wise navigation.
  5. It has almost all material design features needed for an app.

This page http://materializecss.com/getting-started.html will show you how to include it in your projects.

Hope this helps for any of you searching for a good material design framework.

UPDATE: 2015-07-09

I Found another light weight powerful beautiful css framework for material design

Material Design Light http://www.getmdl.io/

It is light weight, has smooth and quick animations, looking pretty good. It was made by one of the google developers. It is officially promoted by google https://developers.google.com/web/