Combination with Material Design

Hi,
I really like Google’s material design and angular-material. Therefore, I would like to build an Ionic app with all the nice Ionic functionality, but with the material design. However, I am not exactly sure, if it is possible and how to implement it properly to combine angular-material and Ionic. Any recommendations are highly welcome.
Best regards,
Juergen

1 Like

You just need to write some custom css to make ionic components look like material design components. Some things are harder than others but for the most part Ionic css styles/spacing are pretty close to the material design guidelines.

Well, Ionic design will not work that well in Browsers (as I have found from other threads here). Therefore, I hoped, that with angular-material I would get a design that works in apps and browsers, and gives me all the material sugar.
Btw, if it was that easy, why has Ionic a job posting for support angular-material?

angular-material !== ionic with a material look. You can get some of the look and feel of material. Yes it won’t be exact but you can get pretty close.

I’m kind of confused with what you want. Ionic is a set of pre built components and styles on top of Cordova to build mobile apps yet you mention browsers. Also, I never said it was easy :smile:

Take a look here: GitHub - angular/material: Material design for AngularJS

This project is in early development via a small core team of Ionic Framework and AngularJS developers.

I am aware of that project, and would be happy to give that a try. However, I am not sure how to combine this project with Ionic. Any help, advice on this topic is highly appreciated.

Look at this: BuzzUp built with Ionic -- Material design

@siddharta, we’re still waiting for your promised article on the “magic” you did integrating Ionic and Material Design. Remember, a promise is a promise. :wink:

@FlipOne I would love to man. But exams are going on. Even though I don’t study anything I kinda feel scared so I occasionally open my book. But still end up closing it after a few min :smile:

Ha Ha! That’s okay, get on with your exams, get a few days rest after that… then the promise… :wink:

How to use with IONIC?

I’m waiting for ionic integrate with Material Design, too. And I tried some Angularjs Material Design feature by adding their libs:

<!-- Angularjs Material design -->
<link rel="stylesheet" href="css/angular-material.css">
<script src="js/hammer.min.js"></script>
<script src="js/angular-aria.min.js"></script>
<script src="js/angular-material.min.js"></script>

Which is the point of contact between Ionic and Material? Maybe the Material overload Ionic if used with Ionic or with only Material is possible to build an app with Cordova base?