jQuery - On active class

Question

I have a materlize collapsible list. What i want to do, is change the icon of the list item when someone clicks on it. My question is, how do i add an event listener that checks to see if you clicked on an li, and to only change that icon? The collapsible list adds a 'active' class to the li. However, when i try to listen for this change, no event is fired.

script

$(document).ready(function(){
    $(".collapsible li").on('active', function(){
        console.log("found event"); 
    });
});

List

  <ul class="collapsible" data-collapsible="accordion">
    <li>
      <div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="material-icons">place</i>Second</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
  </ul>

Answer 1

$(document).ready(function(){
    $(".collapsible li").on('click', function(){
        // *this* refers to the current element
        $(this).find('.material-icons').html('ICON_NAME');
    });
});