I am able to achieve this through little bit of Jquery knowledge. first I copied the Collapsible accordion inside collapsible body then give submenu a dummy class then written small jquery function to change the icon.

sidenav

<li>
                <a class="collapsible-header waves-effect arrow-r">
                    <i class="far fa-hand-pointer"></i>
                    Instruction<i class="fas fa-angle-down rotate-icon"></i>
                </a>
                <div class="collapsible-body">
                    <ul>
                        <li>
                            <a href="#" class="waves-effect">For bloggers</a>
                        </li>
                        <li>
                            <a href="#" class="waves-effect">For authors</a>
                        </li>
                    </ul>
                    <ul class="collapsible collapsible-accordion MySubMenu">
                        <li>
                            <a class="collapsible-header waves-effect arrow-r"><i class="far fa-eye"></i> About<i class="fas fa-angle-down rotate-icon"></i></a>
                            <div class="collapsible-body">
                                <ul>
                                    <li>
                                        <a href="#" class="waves-effect">Sub Introduction</a>
                                    </li>
                                    <li>
                                        <a href="#" class="waves-effect">SUb Monthly meetings</a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                    </ul>
                </div>
            </li>

then a jquery function

$('.collapsible-body .collapsible ').on('click', function (event) {
            if ($(this).children('li.active').length > 0) {

                $('ul.MySubMenu li.active a.collapsible-header i.rotate-icon').removeClass('fa-angle-down').addClass('fa-angle-up');
            }
            else
            {
                $('ul.MySubMenu li a.collapsible-header i.rotate-icon').addClass('fa-angle-down').removeClass('fa-angle-up');
            }
        });

then some CSS

.side-nav .fa-angle-up.rotate-icon {
        position: absolute;
        top: .8rem;
        right: 0;
        margin-right: 1.25rem;
    }

Finally I am able to create the desired submenu I was looking for