Align icon with text in drowdown materialize

Question

I am trying to align the icon to the left of the text in the dropdown button, but I am unsure on how to do it.

<ul id="dropdown1" class="dropdown-content">
                  <li><a href="#!">Profile</a></li>
                  <li><a href="#!">Receipts</a></li>
                  <li class="divider"></li>
                  <li><a href="#!">Logout</a></li>
                  <li><a href="#!"><i class="material-icons">view_module</i>four</a></li>
                  <li><a href="#!"><i class="material-icons">view_module</i>five</a></li>
                  <li><a href="#!"><i class="material-icons">view_module</i>six</a></li>
                </ul>

I have also noticed that in the example given, it also does not align correctly https://materializecss.com/dropdown.html

Answer 1

Applying

{
  display: flex;
  align-items: center;
}

to your dropdown seems to do it:

$('.dropdown-trigger').dropdown();

#dropdown1 li>* {
  display: flex;
  align-items: center;
}
#dropdown1 {
  width: auto !important;
}
/* optional */
#dropdown1 a> i {
  margin-right: 16px;
}

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

<a class='dropdown-trigger btn' href='#' data-target='dropdown1'>Drop Me!</a>
<ul id="dropdown1" class="dropdown-content">
  <li><a href="#!">Profile</a></li>
  <li><a href="#!">Receipts</a></li>
  <li class="divider"></li>
  <li><a href="#!">Logout</a></li>
  <li><a href="#!"><i class="material-icons">view_module</i>four</a></li>
  <li><a href="#!"><i class="material-icons">view_module</i>five</a></li>
  <li><a href="#!"><i class="material-icons">view_module</i>six</a></li>
</ul>