I am new to CSS and Angular Material, and I need help centering the icon on the card following the design from Figma. I tried copying the CSS from Figma, but it didn't center the icon as expected. Can someone please share techniques to achieve this? Should I use flex layout? Why does the copied CSS from Figma not produce the same result when implemented in my HTML? I simply copied and pasted it from Figma. Thank you for any assistance.
The EG icon in the image below is what I want to center inside the material card.
My Current CSS
.custom.mat-card {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 16px 16px 32px;
position: static;
width: 448px;
height: 527px;
margin-left: 142px;
margin-top: 64px;
background: #ffffff;
box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
0px 2px 2px rgba(0, 0, 0, 0.14), 0px 1px 5px rgba(0, 0, 0, 0.12);
border-radius: 4px;
}
.name-icon {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 0px;
position: static;
left: 28.81%;
right: 28.81%;
top: 0%;
bottom: 49.21%;
flex: none;
order: 0;
flex-grow: 0;
margin: 8px 0px;
}
My Current HTML Code
<div>
<mat-card class="custom">
<app-user-profile-icon class="icon"
*ngIf="this.data.firstName && this.data.lastName"
[firstName]="this.data.firstName"
[lastName]="this.data.lastName"
[size]="32"
style="padding-right: 8px;">
</app-user-profile-icon>
</mat-card>
</div>
Figma Design https://i.sstatic.net/xm5sA.png
CSS from Figma Design