Make FontAwesomeIcon center in button - react-bootstrap

Question

I'm using react-bootstrap button and fortawesome/react-fontawesome for the icon. I'm setting the button height and width using this code
#button-size{
height: 1vh;
width: 1vw;
}
then I'm inserting the icon inside the button using this code
<Button id="button-size">
<FontAwesomeIcon icon={faFacebookF} />
</Button>
but my problem is the icon goes outside of the button. How can I center the icon inside the button

Answer 1

Using viewport measurements for height and width on the Button to control its size won't work well in this setup especially when you are using font icons (also, apparently, in the library you are using they generate the output as svg). I suggest you control the size of the button through padding or pixel measurements.
Example:
#button-size {
padding: 6px 20px;
}
In addition, If you need to adjust the size of the font icon you can do that using the size prop or you can use CSS font-size
<Button id="button-size">
<FontAwesomeIcon icon={faFacebookF} size={"5x"}/>
</Button>
CodeSandBox: https://codesandbox.io/s/angry-drake-5pexo?file=/src/App.js
If you absolutely must use the viewport measurements on your project, which I highly discourage, you can opt to assign position-relative to the button and style the font-icon component as necessary to center.
Example:
export default function App() {
const customFontIconStyle = {
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)"
};
return (
<Container>
<Button id="button-size" className="position-relative">
<FontAwesomeIcon icon={faFacebookF} style={customFontIconStyle} />
</Button>
</Container>
);
}