Material Design in Aura Components

Question

Does anyone know how can I use the Google Material design in the Aura Components? I have included all the required file like fonts, icons, css and js from the static resource.

But, when i try to add mdl class on any element it throws an Error saying :

Uncaught Error: Invalid argument provided to upgrade MDL element.
throws at /resource/1488398752000/mdl/material.min.js:10:2389

I have also tried using materialize and Angular Material, but nothing worked.

This is the code i am using right now:

<aura:component description="MaterialDesign">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <ltng:require styles="{!join(',',
        $Resource.iconfont + '/iconfont/material-icons.css',
        $Resource.mdl + '/material.min.css'
        )}"
        scripts="{!$Resource.mdl + '/material.min.js'}"
        afterScriptsLoaded="{!c.materialDesignLoaded}" />
     <ui:button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">
        <i class="material-icons">add</i>
    </ui:button>
</aura:component>

Here is the image of what error it show when i try to use materializecss.