manpreet Best Answer 2 years ago

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 up to 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 the 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

  item ng-repeat="item in items">
    Hello, {{item}}!
  item>

Ionic directives are like

  item ng-repeat="item in items">
    Hello, {{item}}!
  item>

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 losing the performance improvements and features of ionic?

OR

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

manpreet 2 years ago

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/. It is getting quiet popular, try it. Comparision with Angular Material

UPDATE: 2015-10-23

Ionic2 has InBuilt Support for Material Design in Android

Its Official, You can watch Ionic2 demo in AngularConnect, It has Material Design as default for Android. We don't need to worry about choosing Material Design framework.