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.

enter image description here

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Browse other questions tagged or ask your own question.