How can I change the size of IconButton?

Question

How can I change the size of IconButton present inside the InputAdornment?

I tried to change the size by sx, fontSize or size property, unfortunately none of them shows any effect on icon size.

import {
  Grid,
  IconButton,
  InputAdornment,
  Paper,
  TextField,
} from "@mui/material";
import Visibility from "@mui/icons-material/Visibility";
import React from "react";
import PasswordRoundedIcon from "@mui/icons-material/PasswordRounded";

function Login(props) {
  return (
    <div>
      <Paper
        elevation={24}
        sx={{
          width: 275,
          p: 1.5,
          borderRadius: 1.3,
          border: 0,
          backgroundColor: "white",
        }}
      >
        <Grid container justifyContent={"center"} direction={"column"}>
          <Grid container direction={"column"} sx={{ mt: 2 }}>
            <Grid
              container
              direction={"row"}
              alignItems={"flex-end"}
              sx={{ mt: 1.5 }}
            >
              <Grid item xs={"auto"} sx={{ mb: 0.2 }}>
                <PasswordRoundedIcon
                  fontSize="small"
                  sx={{
                    color: "darkgray",
                  }}
                ></PasswordRoundedIcon>
              </Grid>
              <Grid item xs sx={{ pl: 1 }}>
                <TextField
                  fullWidth
                  InputLabelProps={{
                    style: { color: "darkgray", fontSize: ".9em" },
                  }}
                  id="standard-password-input"
                  label="Password"
                  type="password"
                  autoComplete="current-password"
                  variant="standard"
                  InputProps={{
                    endAdornment: (
                      <InputAdornment position="end">
                        <IconButton
                          style={{ fontSize: 5 }}
                          fontSize="4em"
                          sx={{ color: "#A9A9A9", mr: -1 }}
                          aria-label="toggle password visibility"
                        >
                          <Visibility></Visibility>
                        </IconButton>
                      </InputAdornment>
                    ),
                  }}
                />
              </Grid>
            </Grid>
          </Grid>
        </Grid>
      </Paper>
    </div>
  );
}
export default Login;

Answer 1

You can change the size of the icon like this:

<AddIcon fontSize={"large"} />
<AddIcon sx={{ fontSize: 40 }} />

You don't need to change it on the <IconButton/> itself.