AngularJs center and resize icon - css

Question

I try to create a grid menu and it looks like below.
My Problem is, that I dont know how to resize the icons, so that they fit, with AngularJs, not with jQuery!
Also I dont know how I can center the icons.
Thanks for your help :)
menu.html
<ion-content id="my_page">
<div class="my_row">
<a class="my_item" href="#/map">
<i class="icon menu_icon ion-android-walk"></i>
</a>
<a class="my_item" href="#/search">
<i class="icon menu_icon ion-android-search"></i>
</a>
</div>
<div class="my_row">
<a class="my_item" href="#/">
<i class="icon menu_icon ion-android-create"></i>
</a>
<a class="my_item" href="#/">
<i class="icon menu_icon ion-android-settings"></i>
</a>
</div>
</ion-content>
css
.my_container{
position: absolute;
top:0;
right:0;
left:0;
bottom:0;
}
.my_row{
height:49.95%;
left:0;
right:0;
background-color:#ffffff;
clear:both;
}
.my_item{
height:100%;
width:49.95%;
background-color:#c0b5b5;
border: 1px solid #ffffff;
float: left;
vertical-align: middle; //dont work :(
text-align: center;
}
i.menu_icon {
font-size: xx-large; //Here i want it to fit, not a final size, but dynamicly
}

Answer 1

Try giving:
i.menu_icon {
font-size: 250%;
}
Here the 250% is relative to the em size and not the height of the parent container. To make them vertically centered, you need to use:
i.menu_icon {
font-size: 250%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
And finally don't forget to give the parent, position: relative:
.my_row {
height:49.95%;
left:0;
right:0;
background-color:#ffffff;
clear:both;
position: relative;
}

Answer 2

Are you sure you need angular code for this? I think its better to use css instead.
To resize your icons you can use width and height properties for example, or do it with padding. To align your icons you can also use paddings, or margins. Another way is to set position: relative to icon and get it appropriate top value