Change Icon on Collapsible MaterializeCss

Question

I've read a few Stackoverflow answers to get this done, but none of them seem to work or give any errors to figure it out.

I'm trying to change the icon from add to remove when it's open.

My current code:

<ul class="collapsible z-depth-0">
     <li>
       <div class="collapsible-header"><i class="material-icons">add</i>Feedback (4)</div>
       <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
     </li>
</ul>

And the JS running the collapsible:

  $(document).ready(function(){
     $('.collapsible').collapsible();
   });

Any help would be great, I've tried a few but they seem to be very specific to a certain situation.

Answer 1

this is a css only solution, it seems to work

you add both icons inside .collapsible-header, first one is visible, second one is not. Since the only state tha changes when collapsible component is open, is the '.active' class on the li. you can target the two icons to swap visibility

 $(document).ready(function(){
     $('.collapsible').collapsible();
   });

.iconadd{
  display:inline-block ;
}
.iconremove{
  display:none !important;
}

li.active .collapsible-header .material-icons.iconadd{
  display: none;
}

li.active .collapsible-header .material-icons.iconremove{
  display: inline-block !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">

    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
     
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <ul class="collapsible z-depth-0">
         <li>
           <div class="collapsible-header"><i class="material-icons iconadd">add</i>
             <i class="material-icons iconremove">remove</i>Feedback (4)</div>
           <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
         </li>
         <li>
           <div class="collapsible-header"><i class="material-icons iconadd">add</i>
             <i class="material-icons iconremove">remove</i>Feedback (4)</div>
           <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
         </li>
    </ul>