Align Material Icon with Text on Materialize

Align material icon with text on Materialize

That's one way to do it. Of course it depends on the icon, you have to find the specific font-size that will fit the icon's height. Examples:

#txt1{

font-size:28px;

line-height:24px;

}

#txt2{

font-size:36px;

line-height:24px;

}

#txt3{

font-size:21px;

line-height:24px;

}

.material-icons{

display: inline-flex;

vertical-align: top;

}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<span id="txt1">ID</span><i class="material-icons">info_outline</i>

</br>

<span id="txt2">ID</span><i class="material-icons">settings_cell</i>

</br>

<span id="txt3">ID</span><i class="material-icons">stay_primary_landscape</i>

align material icon with the text

Set the icon <i> to vertical-align: middle;.

I would also remove the <span> tags, they're not really doing anything.

@font-face {

font-family: 'Material Icons';

font-style: normal;

font-weight: 400;

src: url(https://fonts.gstatic.com/s/materialicons/v36/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format('woff2');

}

.material-icons {

vertical-align: middle; /* new */

font-family: 'Material Icons';

font-weight: normal;

font-style: normal;

font-size: 24px;

line-height: 1;

letter-spacing: normal;

text-transform: none;

display: inline;

white-space: nowrap;

word-wrap: normal;

direction: ltr;

-webkit-font-feature-settings: 'liga';

-webkit-font-smoothing: antialiased;

background-color: red;

display: inline;

}

.alert {

position: relative;

padding: 0.75rem 1.25rem;

margin-bottom: 1rem;

border: 1px solid transparent;

border-radius: 0.25rem;

}

.alert-info {

color: #0c5460;

background-color: #d1ecf1;

border-color: #bee5eb;

}
<div class="alert alert-info" role="alert">

<i class="material-icons">face</i> Test

</div>

Align icon with text in drowdown materialize

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>

Align material icon vertically

You might have tried various styling to arrange your icons, but you need to target your icons i.e. i tag as below and style,

.footer-links > li > a > i{
vertical-align:middle;
}

Check this two jsFiddle, I have added background to one just for understanding purpose.

https://jsfiddle.net/dbwaoLrh/2/

https://jsfiddle.net/dbwaoLrh/4/

Align icon and two lines of text with materialize css

.d-flex {

display: flex

}

.text {

flex-direction: column;

margin-left: 10px;

}

.fa-map-marker.marker {

font-size: 35px;

}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="col s12 m3 center d-flex">

<i class="fa fa-map-marker marker"></i>

<div class="d-flex text">

<span>Horario</span>

<span>Helper text</span>

</div>

</div>

How to center align an ICON inside a BUTTON in materialize css navbar?

You have just to add line-height: 45px to your icon , scince you added the height:45px; to your button , just like this :

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

<div class="navbar-fixed">
<nav class="teal">
<div class="container">
<div class="nav-wrapper">
<a href="#" class="brand-logo">LOGO </a>
<ul class="right hide-on-med-and-down">
<li>
<form class="orange" style="">
<div style="display: inline-flex; border: 1px black solid; align-items: center;">
<input id="search-bar" type="search" placeholder="text text..." style="border: 1px red solid; margin: 0; height: 100%;">
<button class="btn" type="submit" style="background: blue; height:45px;">
<i class="material-icons" style="border: 1px red solid; display: inline; margin: auto;line-height:45px;">search</i>
</button>
</div>
</form>
</li>
<li>
<a href="#home">Home</a>
</li>
</ul>
</div>
</div>
</nav>
</div>

How to put an icon and p tag aligned on the same line (materializecss)

To do this the materialize way, just add a class of left to the icon:

<i class="material-icons left">person</i>
<p>123123</p>

The documentation for button sheds some light on this - this is where we traditionally see text and icons side by side in the framework.

https://materializecss.com/buttons.html

<a class="waves-effect waves-light btn"><i class="material-icons left">cloud</i>button</a>

@927tanmay's answer is technically correct - the left class just adds float:left to the element - but there's no need to write inline or extra css as the left class is part of the documentation and intended to be used with icons.

See more on the helpers section.



Related Topics



Leave a reply



Submit