How can I nest Icon component in Input component in Ant Design

user_16530128 0
Viewed 1163

I want to display compass icon at the right side of inside input; Here's is my current situation

import { CompassTwoTone } from '@ant-design/icons';
import { Input } from 'antd';
const IconInInput = () => {
    return (
        <>
            <Input placeholder="Basic usage" />
            <CompassTwoTone/>
        </>
    );
}
antd reactjs
1 Answers

Input does have a suffix prop. (doc here) :

import { CompassTwoTone } from '@ant-design/icons';
import { Input } from 'antd';
const IconInInput = () => {
  return (
      <>
          <Input placeholder="Basic usage" suffix={<CompassTwoTone/>}/>
      </>
  );
}

user_121769410
Related