title: How can I make my icon toggle using jQuery and MaterializeCSS?
body: <p>In MaterializeCSS there is a specific syntax to calling their premade icons. This is an example:</p>
  
  <pre><code>&lt;i class="material-icons"&gt;expand_more&lt;/i&gt;
  </code></pre>
  
  <p>The framework knows what icon you want based on the text between the i tags. I am trying to create a collapsible div using jQuery and I would like for the icon to flip between an up and down arrow. In order to do this, I need to replace the text in between the i tags.</p>
  
  <p>I am successfully able to change it once but not back when I collapse the div. Here is my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('.remove-text').click(function() {
    $(this).closest('.card').toggleClass('collapsed');
    if ($('.arrow-change').text = 'expand_more') {
      $('.arrow-change').text('expand_less');
    } else {
      $('.arrow-change').text('expand_more');
    }
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="remove-text"&gt;
    &lt;i class="material-icons arrow-change"&gt;expand_more&lt;/i&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>