Mat-icon does not center in its div
You can use the flex Layout to align the icon
<div fxLayout="row" fxLayoutAlign="center">
<mat-icon fxFlexAlign="center">supervisor_account</mat-icon>
</div>
Read more about flexLayout in the documentation, fxLayout row is the same as:
div {
display:flex;
flex-direction:row;
justify-content:center; /* For fxLayoutAlign="center" */
}
Then you further align the flex item to center i.e fxFlexAlign="center"
mat-icon {
display:flex;
align-self:center;
}
What works for me is to use flex-container (justify-content / align-items to center) along with these properties font-size
, width
and height
- depending on your font size, which drives the other two properties:
::ng-deep .mat-icon {
font-size: 48px;
width: 48px;
height: 48px;
}
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>