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

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.

CodePudding user response：

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

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

CodePudding user response：

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

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