0

Everyone

I have been trying to implement an icon inside the TextField component at the start of it using material-ui. I believe that the reader knows about the Material UI library. I stuck to using Version 4 for this project.

I did find a few things for achieving this and I did try it. But it's working on some conditional basis. That is if I try to style the notchedOutline of the TextField like giving it a borderRadius or something the icon is not getting visible. Though after inspecting the element I do find it there. I did try to change the color and everything but nothing is working.

Here is what I need :

Image Describing my need

and here is what I am getting:

The coded output image

And here is the code that I have tried.

import {....,TextField,InputAdornment } from "@material-ui/core";
......... 

<TextField
    variant="outlined"
    InputProps={{
        startAdornment: (<InputAdornment position="start"><img src={someImage} /></InputAdornment>)
        }}
    classes={{
      root classes.textField,
    }}
    fullWidth
/>

........

Can someone please help me in solving the same.

Thank you!!

Satyam Dodmani
  • 15
  • 4

1 Answers1

0

There's something wrong with the image you use as a child inside <InputAdornment/> component. Make sure you import it correctly. However, according to docs, <InputAdornment/> expects as child - The content of the component, normally an IconButton or string.

Therefore, you should install @material-ui/icons package and use their icons instead on an img :

import MailIcon from '@material-ui/icons/Mail';

...

InputProps={{
            startAdornment: <InputAdornment position="start"><MailIcon/></InputAdornment>,
          }}

Demo

Dmitriif
  • 2,020
  • 9
  • 20
  • Hey!! Thank you for your response. Yes, I did try everything, Actually, I started with the Icon itself. But still, the issue is still there. Can I get Some Input in code sandbox or something?? – Satyam Dodmani Nov 03 '21 at 11:55
  • I've created a working demo and added it to my answer, check it out – Dmitriif Nov 03 '21 at 12:02
  • Yes, now can you change the border radius and check in my application the icon is disappearing. – Satyam Dodmani Nov 03 '21 at 12:28
  • Yes, it worked!! thank you! actually, I was making a mistake with the color. OMG – Satyam Dodmani Nov 03 '21 at 12:35
  • Just need another help!! I want that label to animate in the same way. Like the normal outlined textFiled works from a placeholder spot to the top even after having a start icon – Satyam Dodmani Nov 03 '21 at 12:41
  • I've added another example below in the same codesandbox. It works for a default textfield but if you want to make it `outlined` you should play around customizing both icon and textField components(add left, top and bottom borders to icon component and remove the left border from the textfield component) since there's no ready solution out of the box for this case - https://v4.mui.com/components/text-fields/#icons – Dmitriif Nov 03 '21 at 12:53
  • Thank you very much!! – Satyam Dodmani Nov 03 '21 at 12:59