When using MaterializeCSS, there is a specific syntax for utilizing their premade icons. Take a look at this example:
<i class="material-icons">expand_more</i>
The framework recognizes the desired icon based on the text within the i tags. I am currently working on creating a collapsible division with jQuery, and I want the icon to switch between an upward and downward arrow. To achieve this, I need to modify the text inside the i tags.
I have managed to change it once successfully, but I am facing difficulty reverting it back when collapsing the div. Here is the code snippet:
$('.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');
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="remove-text">
<i class="material-icons arrow-change">expand_more</i>
</div>