I am trying to add the Material-UI InfoIcon into my code. But I don't know how to implement it in TextField

Question

I am trying to add the Material-UI InfoIcon--> into my code. But I don't know how to implement it in TextField.

Here is the material-UI code:

      <InfoIcon fontSize="small" />

Here is where I want it to be:

   <Grid item xs={5}>
        <TextField
          id="createdate"
          label="Create Date"
          value={dateCheck(workOrderDetail.reported_date, 'll') } 
          variant="filled"
          disabled
          fullWidth
          inputProps={{ style: style.textFieldInput }}
        />
      </Grid>

Answer 1

You should put your icon with InputAdornment component. I have create a quick demo for you:

import InputAdornment from '@material-ui/core/InputAdornment';
import TextField from '@material-ui/core/TextField';
import Grid from '@material-ui/core/Grid';
import InfoIcon from '@material-ui/icons/InfoIcon';

<TextField
    id="createdate"
    label="Create Date"
    value={dateCheck(workOrderDetail.reported_date, 'll') } 
    variant="filled"
    disabled
    fullWidth
    InputProps={{
      style: style.textFieldInput,
      startAdornment: (
        <InputAdornment position="start">
          <AccountCircle />
        </InputAdornment>
      ),
    }}
/>

Reference: React, Material-UI Documentation, input fields

Answer 2

So here is what I did to make the styling correct. I made a function:

       const label = () => {
             return (
             <React.Fragment>
                Create Date <InfoIcon fontSize='small'></InfoIcon>
             </React.Fragment>
            )
       }

       <Grid item xs={5}>
        <TextField
          id="createdate"
          label={label()}
          value={dateCheck(workOrderDetail.reported_date, 'll') }
          inputProps={{ style: style.textFieldInput }}
          variant="filled"
          disabled
          fullWidth
        />
      </Grid>