How to make Calendar icon show in React Date Picker?

[AtGbemiga]

Describe the bug
I'm using React Date Picker, which I installed via npm i react-datepicker. Everything works except the calendar icon which doesn't display. The docs says to add showIcon to the JSX element to display the calendar icon, this does not show the icon, it only makes the JSX element bigger.

To Reproduce

"use client";

import { useState } from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";


export default function Form() {
  const [dateRange, setDateRange] = useState<[Date | null, Date | null]>([
    null,
    null,
  ]);
  const [startDate, endDate] = dateRange;

  return (
    <form>
      <DatePicker
        showIcon
        selectsRange={true}
        startDate={startDate}
        endDate={endDate}
        onChange={(update) => {
          console.log("Selected Date Range:", update);
          setDateRange(update);
        }}
        minDate={new Date()}
        withPortal
      />
    </form>
  );
}

Expected behavior
A calendar icon should be displayed.

Screenshots
No icon

Desktop (please complete the following information):

• OS: Windows
• Browser chrome
• Version "^4.16.0"

[franmc01]

@AtGbemiga show #4295

[AtGbemiga]

@AtGbemiga show #4295

I don't understand what your response is stating.

[franmc01]

Try the last versión and if problem persist please added a Sanbox or Stackblitz :)

[AtGbemiga]

Try the last versión and if problem persist please added a Sanbox or Stackblitz :)

Alright, I will as quickly as possible :)

[skoldborg]

I can confirm that showIcon is not working and neither is the new icon prop. I'm using the latest version (4.19.0).

I created a StackBlitz project for reference:
https://stackblitz.com/edit/stackblitz-starters-rne2cz?file=src%2FApp.tsx

[franmc01]

Hey bro, you know, check it out and see if it's true. But the problem is more than anything because of a style:

After

Before

I'm going to review and look for the cause, because analyzing X's comment, this came from the last version. The funniest thing is that he never replied to me

[skoldborg]

@frankops11 Overriding box-sizing: border-box; does indeed solve the issue, but I'm not sure that's a viable solution? Icon should be still be visible when box-sizing: border-box; is set, no?

[franmc01]

That's right, I should be indifferent, I already have a solution and I'm raising the PR

[franmc01]

Hello Everyone! 🚀

Thrilled to announce that the solution to the calendar icon issue has been merged into the main branch! 🎉 Therefore, we can confidently state that issue #4291 is officially resolved.

The update will be available to all in the next release! We greatly appreciate your patience and constructive contributions throughout this resolution process. Your feedback and collaboration have been instrumental in reaching this juncture, and we’re excited to bring this enhancement to you all.

Warm regards

[AtGbemiga]

I can confirm that the issue is fixed.
version: "^4.20.0"