How to put the icon inside the React Material Ui text field?

Question

I want to put the eye icon inside the text field which I use as a password but I couldn't find a way to place it inside the text field component in Material UI. This is the code;

<TextField
        variant="outlined"
        margin="dense"
        required
        fullWidth
        placeholder={placeholder}
        name={label}
        type={showPassword ? "text" : type}
        id={id}
        inputProps={{
          style: {
            background: "white",
            boxShadow: "rgba(0, 0, 0, 0.24) 0px 3px 8px",
            height: "15px",
            borderRadius: "10px",
            width: "100%",
            marginRight: 0,
          },
        }}
        InputProps={{
          classes: { notchedOutline: classes.noBorder },
          endAdornment:
            type === "password" ? (
              <InputAdornment
                position="start"
                classes={{ positionStart: "0px" }}
              >
                <IconButton
                  onClick={handleClickShowPassword}
                  onMouseDown={handleMouseDownPassword}
                >
                  {showPassword ? <Visibility /> : <VisibilityOff />}
                </IconButton>
              </InputAdornment>
            ) : null,
        }}
      />

Answer 1

Your adornment settings seem mostly right according to the documentation. The only issue I can see is that you've set position to start rather than end for the InputAdornment. Also, you're using classes wrong. I've included it in the example below but you probably want to remove it from this section entirely.

Try this:

   <InputAdornment
-    position="start"
-    classes={{ positionStart: "0px" }}
+    position="end"
+    classes={ 
       positionEnd: {
         marginLeft: 0
       }
     }
    >