Align Material Icon Vertically

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/

Material UI: How to vertically centre align an icon button?

You can easily use Box component and flexbox.

<Box
  display="flex"
  alignItems="center"
>
  <TextField id="outlined-basic" label="22Keyword" defaultValue={"test123"} variant="outlined" />
            <IconButton aria-label="delete">
                <AddCircleOutlineOutlinedIcon />
            </IconButton>
</Box>

It supports all system properties.

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>

Mat-icon does not center in its div

You can add vertical align to the mat-icon element or .mat-icon class:

To override all material icons with global CSS: Stackblitz

.mat-icon {
    vertical-align: middle;
}

ATENTION: If your text have capital letters, add negative margin to prevent visual issues on some browsers (Stackblitz demo).

Also you can simply use vertical-align: sub or vertical-align: bottom if fits better with your requirements. Check following alignment MDN demo

---

Using FLEX with a container element for each icon/text: Stackblitz

CSS:

.icon-text {
    display: flex;
    align-items: center;
}

HTML:

<div class="icon-text">
   <mat-icon>home</mat-icon>
   <span>Some text here 1</span>
</div>

---

To style a particular material icon with utility class: Stackblitz

In some global css file:

.v-align-middle { 
    vertical-align: middle;
}

HTML:

<div>
   <mat-icon class="v-align-middle">home</mat-icon>
   <span class="v-align-middle">Some text here 1</span>
</div>

** some css frameworks already have classes like this, eg: bootstrap 4 **

---

To style a particular material icon: Stackblitz

CSS:

.custom-class mat-icon {
    vertical-align: middle;
}

/** or using the class .mat-icon */
.custom-class .mat-icon {
    vertical-align: middle;
}

HTML:

<div class="custom-class">
   <mat-icon>home</mat-icon>
   <span>Some text here 1</span>
</div>

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>

Angular-Material2: Align text and md-icon vertically to match vertical style?

This is a common issue when using <md-icon>. To align the icon and text, you can put your text inside a span and apply style to that:

<div>
  <md-icon>home</md-icon><span class="aligned-with-icon">Sample Text</span>
</div>

In your component.css:

.aligned-with-icon{
    position: absolute;
    margin-top: 5px;
    margin-left: 5px; /* optional */
}

You can also use relative position if you'll be putting multiple icons in the same div. Here is the css for that:

.aligned-with-icon-relative{
    position: relative;
    top: -5px;
    margin-left: 5px; /* optional */
}

---

Another option is to use flex display on the outer div and align-items to center:

In your html:

<div class="with-icon">
  <md-icon>home</md-icon>Sample Text
</div>

In your css:

.with-icon {
    display: flex;
    align-items: center;
}

---

Here is a Plunker Demo

How to align material-ui icons to right?

Try applying these styles:

todo-element class :

{
 width: 100%
}

Delete button :

{
 float: right
}

If you're using inline styles for button:

<DeleteButton style={{ float: 'right' }} id={index} callBackFunction = {deleteItem}/>

unable to place material icon vertical center

Use display: inline-flex; to a

@font-face {  font-family: 'Material Icons';  font-style: normal;  font-weight: 400;  src: url(https://fonts.gstatic.com/s/materialicons/v41/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');}
.mi {  font-family: 'Material Icons';  font-weight: normal;  font-style: normal;  line-height: 1;  letter-spacing: normal;  text-transform: none;  display: inline-block;  white-space: nowrap;  word-wrap: normal;  direction: ltr;  -webkit-font-feature-settings: 'liga';  -webkit-font-smoothing: antialiased;}
a {  display: inline-flex;  border: 1px solid #3D3E02;  border-radius: 50%;  padding: 10px;  color: #334048;}
a i {  font-size: 20px;}.t{vertical-align:middle}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet" /><br><br><br><a href="#"><i class="mi"></i></a><br><br><br><a href="#"><i class="mi t"></i></a>

---

Related Topics