Close materialize sidenav with 'X' Icon

Question

I've styled my sidenav to cover 100% of the screen width and need to add a standard 'X' icon to the upper right hand corner in order to close the nav. It's also for a wordpress theme so there's that too. Suggestions?

<nav class="transparent z-depth-0">
  <div class="nav-wrapper">
    <a href="<?php echo get_option('home'); ?>" class="brand-logo center-align"></a>

    <a href="#" data-activates="mobile-demo" class="right button-collapse" style="color: white;"><i class="material-icons">menu</i></a>

    <?php wp_nav_menu (array( 'theme_location'=>'primary', menu_class => 'right hide-on-med-and-down')); ?>


    <?php wp_nav_menu (array( 'theme_location'=>'primary', menu_class => 'side-nav', menu_id => 'mobile-demo')); ?>


  </div>

</nav>

EDIT: So here's the function that closes the sidenav onclick

 // if closeOnClick, then add close event for all a tags in side sideNav
    if (options.closeOnClick === true) {
      menu_id.on("click.itemclick", "a:not(.collapsible-header)",      function(){
        removeMenu();
      });
    } 

Basically if close on click is set to true (as on min) the sidenav closes when any link in the nav is clicked. Based on this it seems I need to add this link:

<a href="#"  class="right" style= "color: white;"><i class="material-icons">clear</i></a>

into this array(the second from the code above relating to the sidenav:

<?php wp_nav_menu (array( 'theme_location'=>'primary', menu_class => 'side-nav', menu_id => 'mobile-demo')); ?>

I've tried and have been unsuccessful so far.

Answer 1

Ok, after much trial, error and research here's the answer:

<nav class="transparent z-depth-0">
  <div class="nav-wrapper">
    <a href="<?php echo get_option('home'); ?>" class="brand-logo center- align"></a>

    <a href="#" data-activates="mobile-demo" class="right button-collapse" style="color: white;"><i class="material-icons">menu</i></a>

    <?php wp_nav_menu (array( 'theme_location'=>'primary', menu_class => 'right hide-on-med-and-down')); ?>


    <?php wp_nav_menu (array('theme_location' => 'primary', 'items_wrap' => my_nav_wrap(), )); ?>


  </div>

</nav>

and in functions.php create a custom nav_wrap:

function my_nav_wrap() {
    $wrap  = '<ul class="side-nav" id="mobile-demo">';
    $wrap .= '<li>';
    $wrap .= '<a href="#"  class="right" style= "color: white;">';
    $wrap .= '<i class="material-icons">clear</i>';
    $wrap .= '</a>';
    $wrap .= '</li>';
    $wrap .= '<div class="clear"></div>';
    $wrap .= '%3$s';
    $wrap .= '</ul>';

  return $wrap;
}