I want to understand the best way to use Material-Icons and customize/resize them as required.

I tried adding MoreHorizIcon wrapped with a Button as show below in the code.

<Button variant="outlined">
    <MoreHoriz fontSize="large" sx={{}} />
</Button>

Which resulted in a button with larger height than other buttons with text contents. The reason being the icon is of square shape, thus increasing overall height of the button shown below without any style override.

I tried lowering height property of svg using sx={{}}, which distorted icon’s size.

I tried negative margin to compensate button’s padding which worked, but felt like cheating .

Also, modified viewBox using and height to achieve somewhat close to desired result.

I want to understand is there any better way to achieve the same? I also found an issue with similar requirement in another use case.

Thank you.