'How can I put an icon inside a Input in ReactJS?

I'm new in reactJS, but I want to know how I can put icon inside input element?

I have a FormItem and inside of this an Input, and inside of this input i want to put an icon.

 <Col xs={24} sm={24} md={24} lg={12}>
    <FormItem
      {...formItemLayout}
      label={intl.formatMessage({ id: `maintenace.link.linkOrigin` })}
    >
      {getFieldDecorator(`officePhone`, {
        initialValue: selectedData_.officePhone
          ? selectedData_.officePhone
          : ""
      })(
        <Input
          name="officePhone"
          placeholder={intl.formatMessage({
            id: `maintenance.officePhone`
          })}
        />
      )}
    </FormItem>
</Col>

If anyone knows, please, I will be very grateful.

cssreactjstypescriptinputicons


Solution 1:[1]

If you use some lib related to the Ant Design. You can add prefix prop

<Input prefix={<SmileOutlined />} />

Solution 2:[2]

You could use a background on the input, something like this :

input: {
    background: url(icon.gif) no-repeat scroll 7px 7px;
    padding-left: 20px;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 victor zadorozhnyy
Solution 2 Monstar

Related Questions