CODEWITHSUNDEEP
htmlcssiconsmaterialize
jLynx
jLynx

Reputation: 1149

Align icon with text in drowdown materialize

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>

enter image description here

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

Upvotes: 1

Views: 473

Answers (2)

tao
tao

Reputation: 90068

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>

Upvotes: 1

Amine KOUIS
Amine KOUIS

Reputation: 1459

Try to override the value of margin provided by Materialize like 

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

See the picture for more details

enter image description here

Upvotes: 1

Related Questions