How can I make materalize dropdown options the same size as the dropdown button

I am trying to make the dropdown options the same size as my dropdown button, using materializes dropdown menu.

Like you can see below, the dropdown options are wider than the button itself. Even with contrainWidth: true. Does anyone know how to make them be the same size? Thanks.

https://jsfiddle.net/L7hop0fz/103/

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

  <a class="dropdown-trigger btn-large light-blue lighten-3 black-text" id="chartsBtn" data-target='dropdownCharts'><i class="material-icons center">chevron_right</i></a>

  <ul id='dropdownCharts' class='.custom2 dropdown-content light-blue lighten-3 black-text'>
    <li class=""><a href="#!" ><i class="material-icons center">equalizer</i></a></li>
    <li class=""><a href="#!" ><i class="material-icons center">show_chart</i></a></li>
    <li class=""><a href="#!"><i class="material-icons center">multiline_chart</i></a></li>
  </ul>

Javascript initialize:

$('.dropdown-trigger').dropdown({
  alignment: 'right',
  hover: true,
  constrainWidth: true,
  coverTrigger: false,
  closeOnClick: false,
});

Solution

in styles on .dropdown-content ,min-widtht: 100px have seted and this is cause of your problem. set min-width: unset to fix it.
and to fix arrow problem , you can put codes into a container.

$('.dropdown-trigger').dropdown({
      alignment: 'right',
      hover: true,
      constrainWidth: true,
      coverTrigger: false,
      closeOnClick: false,
    });

#dropdownCharts a{
    color: black;
}

#container:hover #chartsBtn .material-icons {
    transform: rotate(+90deg);
}


#dropdownCharts li{
    width: auto;
}

ul.dropdown-content{
    min-width: unset;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

  <span id="container">
  <a class="dropdown-trigger btn-large light-blue lighten-3 black-text" id="chartsBtn" data-target='dropdownCharts'><i class="material-icons center">chevron_right</i></a>


  <ul id='dropdownCharts' class='.custom2 dropdown-content light-blue lighten-3 black-text'>
    <li class=""><a href="#!" ><i class="material-icons center">equalizer</i></a></li>
    <li class=""><a href="#!" ><i class="material-icons center">show_chart</i></a></li>
    <li class=""><a href="#!"><i class="material-icons center">multiline_chart</i></a></li>
  </ul>
  </span>