how to change material ui icon size

Question

the size of my material ui icon doesn't ffit naturally to the button:

the button code:

 <Button variant="outlined" startIcon={<FacebookIcon   />}>
  
</Button>

the whole example:

import './App.css';
import React, {useState} from 'react';
import  Button  from '@mui/material/Button';
import IconButton from '@mui/material/IconButton';
import FacebookIcon from '@mui/icons-material/Facebook';


const App = () => {
  const url = "https://api.quotable.io/random";
  let quoteData = {
    content: "Let time be your only competitor.",
    author: "Ahmed Saber"
  }
  const [quote, setQuote] = useState(quoteData)
 
  const generateQuote = () => {
    fetch(url)
      .then(response => response.json())
      .then(data => {
        console.log(data)
        setQuote(data)
      });
  }

  const copy = () => {
    navigator.clipboard.writeText(quote.author + " once said: " + quote.content)
    alert('copied')
  }

  return (
    <>
      <h1>Quote Generator React App</h1>
      
      <div className="container">
        <p>{quote.content}</p>
        <span>{quote.author}</span>
        <div className="btns">
          <button onClick={copy} className="btn">Copy</button>
          <button onClick={generateQuote}>Generate Another Quote</button>
       
          
        </div>
        <Button variant="outlined" startIcon={<FacebookIcon   />}>
  
</Button>
<IconButton
  aria-label="..."
  size="small"
  
>
  
</IconButton>
      </div>
    </>

  )
  
}


export default App;

Answer 1

MUI material icons exposes fontSize property.

https://mui.com/material-ui/api/icon/#Icon-prop-fontSize

If the prop values don't fit your requirement, you can set height and width using sx, set it to inherit or custom values.