Javascript MaterializeCSS可折叠的onOpen更改标题图标

我正在尝试更改切换可折叠的图标，我不知道如何根据他们的文档执行此触发器

$('.collaps_roles_permission').collapsible({
    accordion: true,    
    onOpen: function(el){
        //$('li.roles_icon', this).html('remove');
        console.log(el);
        console.log(el[0]);
    },
    onClose:function(el){
        //switch back icon to normal
    }

});

切换可折叠页眉时，如何更改它

<div class="collapsible-header">
    <i class="material-icons roles_icon">add</i>
    {{ $r->display_name }}
</div>

添加
{{$r->display_name}

在

onOpen

功能中，使用

el

查找标题中的图标

onOpen: function(el) {
    $(el).find('.collapsible-header i').text('remove');
}

---

只需使用。单击jQuery的事件：

$('.collapsible').click(function() {
    $(this).collapsible({
        onOpen: function(el) { el.find('.collapsible-header').text('Changed'); }
    });
});

---

你能添加演示链接吗？