Search code examples
jqueryhtmlmaterialize

change icon on click with materializecss

I am using the floating action button for displaying a menu and have a save icon in the menu 

<div id="menu" class="fixed-action-btn horizontal click-to-toggle" style="bottom: 85px; right: 18px;">
        <a class="btn-floating btn-large red">
            <i class="material-icons">menu</i>
        </a>
        <ul>
            <li ><a href="#" class="btn-floating blue"><i id="save" class="material-icons">add</i></a></li>
        </ul>
</div>

I would like to change the icon to check from add on click of the add button , if possible with an animation. How can I do this ? I am noob could someone point me in the right direction.

Solution

  • Do this in your onclick handler function, use id selector preferably, i just used class here, 

    $(".blue").html('<i id="save" class="material-icons">check</i>');