Mat-icon does not center in its div

Question

I am very new to css and I cannot align the mat-icon (the thought bubble) to the div class=img (the green square on the left) - see the attached image. At this moment the icon is a little bit near the top

For adding the svg icon I used Material Angular - MatIconRegistry class (don't know if it matters)

My result:

Here is my html:

<div class="container">   <div class="img"><mat-icon svgIcon="info"></mat-icon></div>   Some text here! </div> 

Here is my css:

$conainer-min-width: 256px !default; $conainer-max-width: 512px !default; $conainer-height: 50px !default;  div.container {   max-width: $container-max-width;   min-width: $container-min-width;   height: $container-height;   margin: auto;   color: #000000;   background-color: #ffffff;   line-height: $container-height;   text-align: center;   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);   border-width: 1px;   border-style: solid;   border-color: #9e9e9e;   padding-right: 20px;   position: fixed;   z-index: 1000;   left: 0;   right: 0;   top: 30px; }   div.img {   width: $container-height;   height: $container-height;   float: left;   display: block;   margin: 0 auto;   border-right-width: 1px;   border-right-style: solid;   border-right-color: #9e9e9e;   line-height: $container-height;   justify-content: center;   background-color: #3f9c35; } 

Any thoughts on how to fix this?

Answer 1

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

To override all material icons: Stackblitz

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

vertical-align: sub could be useful in some cases too, check MDN demo: https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align

---

With FLEX: 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>