change icon on click with materializecss
<p>I am using the floating action button for displaying a menu and have a save icon in the menu </p>

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

<p>I would like to change the icon to <code>check</code> from <code>add</code> 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.</p>