The Only Ionic Material Tuts You Will Need

Basically Ionic Material provides better configurations for icons, CSS classes, new components and animations that are not natively available in the Ionic Framework. 

All of these features will help you implement the Google Material Design and transform your application

From This

poor car

To This

rich car

In this tutorial I’ll show you how to get started with each feature of Ionic Material.

First follow the quick steps from their github:

After that … well … the documentation is still in progress and a bit buggy (you should use Safari).

If you want to take the risk of using Angular Material with Ionic Material:

I even heard somebody stopped programming to become a farmer because of all the stress…

Let’s Fix This **** First

If you want to use some Ionic Motions (animations), you will need to use a timeout in your controller in order to wait for everything to be loaded first


Want to change the color of something?

As simple as the Ionic Framework one!

Everything has been Materialised, even the extensions of the Ionic Framework.


Inks are here to give your elements color related animations.

Two very simple examples here:

Motion Elements

Let’s put some Motions on our buttons.

Then in your controller.

Motion Lists

In our controller, we initialise the Motions.

And we use them after in our view.

Just adding the class “animate-X” on the ion-list will add the animation to all the elements of the list.


With all those covered, you are now ready to implement Ionic Material in your projects!

I advise you to have a look at the demo on Github in order to see how to mix everything and create cool applications.


  1. August 2, 2016    


    • Matthieu Drula Matthieu Drula
      August 3, 2016    

      Thanks :).

  2. Francesco Leakes Francesco Leakes
    August 6, 2016    

    Good post. I definitely appreciate this site. Stick with it!

    • Matthieu Drula Matthieu Drula
      August 7, 2016    


Leave a Reply

Your email address will not be published. Required fields are marked *