Выровнять значок с текстом в раскрывающемся меню

Question

Я пытаюсь выровнять значок слева от текста в раскрывающейся кнопке, но не уверен, как это сделать.

<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>

Я также заметил, что в приведенном примере он также не выравнивается правильно https://materializecss.com/dropdown.html

Answer 1

Применение

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

к вашему раскрывающемуся списку делает это:

$('.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>

Answer 2

Попробуйте переопределить значение margin, предоставленное Materialize, например

.dropdown-content li > a > i {
    margin: 0 8px 0 0!important;
}

Для получения более подробной информации см. Рисунок