Seeking help to perfectly center an Angular Material icon inside a rectangular shape. Take a look at the image provided for reference.
https://i.sstatic.net/oFf7Q.png
The current positioning appears centered, but upon closer inspection, it seems slightly off-center. It appears that the edge of the icon is aligned rather than the center itself, creating this misalignment. I'm looking for a way to center the actual center of the icon rather than just the outer edges.
I've considered calculating the precise position within the code, but I'd prefer to explore alternative solutions as this method seems delicate and time-consuming.
Referencing the template structure:
<div
class="rectangle"
(click)="clicked(item)"
[style.backgroundColor]="item.color"
*ngIf="item.itemType == allEnumTypes.ClickButton"
title="{{ item.warning }}"
>
<mat-icon
*ngIf="item.icon"
fontIcon="{{ item.icon }}"
[style.color]="item.iconColor"
class="large-icon"
style="padding-top: 20%; padding-right: 30%"
></mat-icon><br /><br />
<span class="select-button-text" [style.color]="item.fontColor" style="padding-bottom: 0%">{{ item.display }}</span>
</div>
This is the CSS applied to the rectangle class:
.rectangle {
width: 139px;
height: 125px;
border: 2px solid #bfc0c2;
opacity: 1;
text-align: center !important;
background: #ffffff 0% 0% no-repeat padding-box;
}
Your insight in identifying the issue would be greatly appreciated. Thank you!