How do I add icon at the beginning of the component?

[aayushdutt]

Example:

[afvr94]

Hello @aayushdutt, were you able to add the icon?

[aayushdutt]

@afvr94 Nope. I still need help regarding this.

[empyreanmw]

You should use renderInput prop, so something like this

const defaultRenderInput = (props) => {
    let { onChange, value, addTag, ...other } = props;
    return (
      <span>
        <Box
          position="relative"
          top="3px"
          as={AiOutlineSearch}
          color="#f8b700"
        ></Box>
        <input type="text" onChange={onChange} value={value} {...other} />
      </span>
    );
  };

Box component in this case is acting as an icon that will appear in front of the input field.

<TagsInput
        renderInput={defaultRenderInput}
        onChange={(e) => handleTags(e)}
        value={tags}
      />