I want to show icon instead of bootstrap Dropdown toggle

Question

I use bootstrap Dropdown in React.js and I want to delete red circle area(Toggle) and show pencil icon only which use can click it.

enter image description here

I use the following Dropdown.

https://react-bootstrap.github.io/components/dropdowns/

React.js

  return (
    <>
        <div className="">
        
        <Dropdown className="room_change_dropdown_top">
          <Dropdown.Toggle className='room_change_dropdown_toggle' id="dropdown-basic">
          <img className="ic_edit_in_table" src={ic_edit} />


          </Dropdown.Toggle>

          <Dropdown.Menu className="room_change_dropdown">
            <Dropdown.Item className="room_change_dropdown_item">
              {roomNames.map((room_names, i) => (
                <div className="flex_radio">
                  <input
                    className="room_change_radio"
                    type="radio"
                    value={room_names}
                    onChange={HomeHandleChange }
                    checked={val === room_names}
                  />
                  <p className="drop_down_p">{room_names}</p>
                </div>
                ))}
            </Dropdown.Item>
          </Dropdown.Menu>
        </Dropdown>
        </div>
    </>
  );
}
export default DropDownForRoomChange;

Answer 1

Based on this example from react-bootstrap https://react-bootstrap.github.io/components/dropdowns/#custom-dropdown-components:

  const CustomToggle = React.forwardRef(({ children, onClick }, ref) => (
    <img className="ic_edit_in_table" src={ic_edit} />
  ));


  // ...

  <Dropdown.Toggle as={CustomToggle} id="dropdown-custom-components" />