Angular mat-icon overflows when applying padding

Question

So I'm testing mat-icons and I'm trying to give them some hover effects, but it's not working as expected.

In my html I only have:

<mat-icon>menu</mat-icon>

And in my scss:

mat-icon {
    padding: 0.3em;
    border-radius: 50%;
    transition: 300ms;
    &:hover {
        cursor: pointer;
        background-color: #e0e0e0;
    }
}

This is the result:

NOTE

I've fixed it by setting both the height and width to auto, but I've done this before with that exact code (no need of specifying height & width) and didn't give me any problems.