mat-icon does not center in mat-button

When I make the font bigger the mat-icon is no longer centered. how can I center the icon inside of the button vertically and horizontally? (Note that the class "mat-icon" is built-in so the css does work specifying the class in the element)

html:

<button mat-fab class="add-picture">
<mat-icon>add_to_photos</mat-icon>
</button>


css:

.add-picture {
width:100px;
height:100px;
}

.mat-icon {
font-size: 80px;
}

Continue reading...