Javascript – material ui button icon is not appearing

the button is working but the icon inside it is not working:

the button code:

 <Button color="secondary" aria-label="add an alarm">
<AlarmIcon></AlarmIcon>
</Button>
<Button variant="outlined" startIcon={<AlarmIcon />}>
  Delete
</Button>

the button imports:

import Button from '@mui/material/Button';
import AlarmIcon from '@mui/material/Icon';

the full code example:

import './App.css';
import React, {useState} from 'react';
import Button from '@mui/material/Button';
import AlarmIcon from '@mui/material/Icon';

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 color="secondary" aria-label="add an alarm">
<AlarmIcon></AlarmIcon>
</Button>
<Button variant="outlined" startIcon={<AlarmIcon />}>
  Delete
</Button>
      </div>
    </>

  )
  
}


export default App;