# Combination with Material Design

**URL:** <https://forum.ionicframework.com/t/combination-with-material-design/12468>\
**Category:** ionic-v1\
**Created:** [November 10, 2014, 10:20pm UTC](https://forum.ionicframework.com/t/combination-with-material-design/12468 "2014-11-10T22:20:57Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![schacki](https://avatars.discourse-cdn.com/v4/letter/s/5f9b8f/32.png) [@schacki](https://forum.ionicframework.com/u/schacki)\
**Post date:** [November 10, 2014, 10:20pm UTC](https://forum.ionicframework.com/t/combination-with-material-design/12468/1 "2014-11-10T22:20:57Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![tkh441](https://avatars.discourse-cdn.com/v4/letter/t/6a8cbe/32.png) [@tkh441](https://forum.ionicframework.com/u/tkh441)\
**Post date:** [November 10, 2014, 10:45pm UTC](https://forum.ionicframework.com/t/combination-with-material-design/12468/2 "2014-11-10T22:45:19Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![schacki](https://avatars.discourse-cdn.com/v4/letter/s/5f9b8f/32.png) [@schacki](https://forum.ionicframework.com/u/schacki)\
**Post date:** [November 10, 2014, 10:54pm UTC](https://forum.ionicframework.com/t/combination-with-material-design/12468/3 "2014-11-10T22:54:39Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![tkh441](https://avatars.discourse-cdn.com/v4/letter/t/6a8cbe/32.png) [@tkh441](https://forum.ionicframework.com/u/tkh441)\
**Post date:** [November 10, 2014, 11:37pm UTC](https://forum.ionicframework.com/t/combination-with-material-design/12468/4 "2014-11-10T23:37:28Z")

</div>

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 😄

---

<div class="post-metadata">

**Author:** ![belibasakis](https://avatars.discourse-cdn.com/v4/letter/b/a87d85/32.png) [@belibasakis](https://forum.ionicframework.com/u/belibasakis)\
**Post date:** [November 11, 2014, 1:37am UTC](https://forum.ionicframework.com/t/combination-with-material-design/12468/5 "2014-11-11T01:37:47Z")

</div>

Take a look here: [GitHub - angular/material: Material design for AngularJS](https://github.com/angular/material)

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

---

<div class="post-metadata">

**Author:** ![schacki](https://avatars.discourse-cdn.com/v4/letter/s/5f9b8f/32.png) [@schacki](https://forum.ionicframework.com/u/schacki)\
**Post date:** [November 11, 2014, 7:16pm UTC](https://forum.ionicframework.com/t/combination-with-material-design/12468/6 "2014-11-11T19:16:41Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![siddhartha](https://avatars.discourse-cdn.com/v4/letter/s/bc79bd/32.png) [@siddhartha](https://forum.ionicframework.com/u/siddhartha)\
**Post date:** [November 12, 2014, 4:34am UTC](https://forum.ionicframework.com/t/combination-with-material-design/12468/7 "2014-11-12T04:34:42Z")

</div>

Look at this: [BuzzUp built with Ionic -- Material design](http://forum.ionicframework.com/t/buzzup-built-with-ionic-material-design/9980)

---

<div class="post-metadata">

**Author:** ![FlipOne](https://avatars.discourse-cdn.com/v4/letter/f/df705f/32.png) [@FlipOne](https://forum.ionicframework.com/u/FlipOne)\
**Post date:** [December 23, 2014, 4:39pm UTC](https://forum.ionicframework.com/t/combination-with-material-design/12468/8 "2014-12-23T16:39:18Z")

</div>

@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. 😉

---

<div class="post-metadata">

**Author:** ![siddhartha](https://avatars.discourse-cdn.com/v4/letter/s/bc79bd/32.png) [@siddhartha](https://forum.ionicframework.com/u/siddhartha)\
**Post date:** [December 23, 2014, 5:14pm UTC](https://forum.ionicframework.com/t/combination-with-material-design/12468/9 "2014-12-23T17:14:18Z")

</div>

> [@FlipOne](#):
>
> Ionic

@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 😄

---

<div class="post-metadata">

**Author:** ![FlipOne](https://avatars.discourse-cdn.com/v4/letter/f/df705f/32.png) [@FlipOne](https://forum.ionicframework.com/u/FlipOne)\
**Post date:** [December 23, 2014, 5:28pm UTC](https://forum.ionicframework.com/t/combination-with-material-design/12468/10 "2014-12-23T17:28:18Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![biapar](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/biapar/32/64378_2.png) [@biapar](https://forum.ionicframework.com/u/biapar)\
**Post date:** [December 30, 2014, 9:04am UTC](https://forum.ionicframework.com/t/combination-with-material-design/12468/11 "2014-12-30T09:04:30Z")

</div>

How to use with IONIC?

---

<div class="post-metadata">

**Author:** ![silverhair2010](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/silverhair2010/32/66412_2.png) [@silverhair2010](https://forum.ionicframework.com/u/silverhair2010)\
**Post date:** [December 30, 2014, 9:18am UTC](https://forum.ionicframework.com/t/combination-with-material-design/12468/12 "2014-12-30T09:18:04Z")

</div>

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>
```

---

<div class="post-metadata">

**Author:** ![biapar](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/biapar/32/64378_2.png) [@biapar](https://forum.ionicframework.com/u/biapar)\
**Post date:** [December 30, 2014, 4:04pm UTC](https://forum.ionicframework.com/t/combination-with-material-design/12468/13 "2014-12-30T16:04:43Z")

</div>

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?
