Material-UI: Add an icon to TextField

Question

This is a project for monitoring employees, and the first interface in this project is the Sign Up interface, and it is located inside the Form Text Field, and I want to put icon to the left of the placeholder in the TextField. I tried more than one way, but my attempts failed. How can I do that? And within this file, I added the form, leaving nothing but adding an icon SignUp.tsx:

import { makeStyles, createStyles, Theme } from "@material-ui/core/styles";
import Grid from "@material-ui/core/Grid";
import Paper from "@material-ui/core/Paper";
import Typography from "@material-ui/core/Typography";
import TextField from "@material-ui/core/TextField";
import Box from "@material-ui/core/Box";
import Button from "@material-ui/core/Button"
import DraftsOutlinedIcon from '@material-ui/icons/DraftsOutlined';

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    root: {
      flexGrow: 1,
      width: "100%",
      marginTop: "10rem",
    },
    paper: {
      margin: "auto",
      padding: "2rem",
      maxWidth: "30%",
      paddingLeft: "4rem",
      paddingRight: "4rem",
    },

    textField: {
      width: "100%",
      paddingTop: "0.5rem",
    },

    title: {
      fontSize: "1.5rem",
    }, 

    button:{
      height: "3.8rem",
      backgroundColor: "#5f48ea",
      color: "#fff",
      textTransform: "capitalize",
      fontSize: "1.3rem",
      marginTop: "0.8rem",
      marginBottom: "2.5rem"
    }
  })
);

export default function SignUp() {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <Paper className={classes.paper}>
        <Grid container direction={"column"}>
          <Grid item>
            <Typography component="div">
              <Box textAlign="center" className={classes.title} m={1}>
                <h1>Let's go!</h1>
              </Box>
            </Typography>
          </Grid>
          <Grid md={12} container direction={"column"} spacing={4}>
            <Grid item md={12} xs={12}>
              <label>Full Name</label>
              <TextField
                className={classes.textField}
                placeholder="George Dawod"
                variant="outlined"
              />
            </Grid>
            <Grid item xs={12} md={12}  style={{position: 'relative', display: 'inline-block'}}>
              <label>Email</label>
              
              <TextField
                className={classes.textField}
                placeholder="example@site.com"
                variant="outlined"
              />
            </Grid>
            <Grid item xs={12} md={12}>
              <label>Choose Password</label>
              <TextField
                className={classes.textField}
                placeholder="password"
                variant="outlined"
              />
            </Grid>
            <Grid item>
              <Button className={ classes.button }  fullWidth variant="contained"> 
                play with Slark
              </Button>
            </Grid>
          </Grid>
        </Grid>
      </Paper>
    </div>
  );
}

Answer 1

You can use the startAdornment props of the Input component (sub-component of TextField) to set the start icon of the TextField:

<TextField
            slotProps={{
              input: {
                startAdornment:
                  <InputAdornment position="start">
                    <IconButton
                      aria-label="description for action"
                      onClick={clickHandler}
                    >
                      <ClearIcon />
                    </IconButton>
                  </InputAdornment>
              },
            }}
          />

Answer 2

Use the FormHelperTextProps:

<TextField
    FormHelperTextProps={{
       component: (item) => {
            return (
              <span className={item.className}>
                 {item.children} <Icon />
              </span>
            );
          },
    }}
/>

Answer 3

Because of TextField is a composition of FormControl, InputLabel, Input and FormHelperText you should modify your nested Input. Input component accepts startAdornment property and TextField accepts InputProps property which is going to be forwarded to your Input. So, the solution is

<TextField InputProps={{startAdornment: (
    <InputAdornment position="start">
      <IconComponent />
    </InputAdornment>
)}}...

See this manual