How to Integrate Angular Material in Ionic Apps

A few months back I was working on a project using Angular Material, believe me, guys angular Material is really an amazing framework which does not only create responsive apps with bootstrap structural design but it also adds a pinch of elegance to an application making it more beautiful to look at. It is gaining a lot of attention of developer due to a huge increasing in it’s demand.
You can visit Angular Materials and see it working
Motion and ripple effects make my day… How to Integrate Angular Material in Ionic Apps

Aham  … Let’s move to Ionic, a few days back I just found a library with which make my dream come true to fuse beautification of Material design in ionic apps.

Tutorial on How to Use Angular Material in Ionic 3

You can visit here to see Zach Fitzgerald’s wonderful fusion of Ionic+Material.
IonicMaterial can easily be used with existing Ionic apps.
So let’s start to add some Motion to you Ionic app
Step 1 – We will start from the very beginning like first we will create a new Ionic.
ionic start ionicMaterial blank
Step 2 - Then add Material JS and CSS files in our ionic app.
Install Using Bower:
Install Libraries
bower install ionic-material
Install Fonts( from Google ):
bower install robotodraft
Install Manually:
Files can also be downloaded from here
Step 3 - Add JS and CSS libs in out Ionic index.html page.
UPDATE: In ionic 3 we can add js & Css file in "assets" folder to link in "index.html"
Our HTML in header section will look something like this:
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="lib/ionic-material/dist/ionic.material.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <script src="lib/ionic-material/dist/ionic.material.min.js"></script>


Step 4 - Inject Ionic Material into your Ionic App.
var app = angular.module('YOUR_APP_NAME', ['ionic', 'ionic-material']);


That's all you need to do for adding Material to your Ionic app.
In my next post, I will explain "How to Add Animation in Ionic Material App"
See you...How to Integrate Angular Material in Ionic Apps
Notify of
Oldest Most Voted
Inline Feedbacks
View all comments

In which file i need to change for below?
Step 4 – Inject Ionic Material into your Ionic App


Hi where do you putthis line var app = angular.module(‘YOUR_APP_NAME’, [‘ionic’, ‘ionic-material’]);

I am on typescript.

Mohammed Ali

can you help me to integrate angular 6 Material with ionic 3
i tried many ways but not working.


I tried to follow your instructions on my latest app (ionic 3) but it seems not working.

Does this tutorial work on ionic 3 apps as well. Because, what I can see in my app is that I can not find “lib” folder anywhere.

I am new to ionic so please help me out here.