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
.