Date Picker - selectorIcon Prop not displaying Icon

[wilsonreyhan]

NextUI Version

@nextui-org/date-picker@2.1.2

Describe the bug

I've designated Heroicons' Calendar Days icon as my Date Picker Selector Icon, but when loading the component, no icon appears. See code below.

<DatePicker className="text-orange-500 font-light text-sm " label="" defaultValue={now(getLocalTimeZone())} granularity="day" isRequired hideTimeZone selectorIcon={<CalendarDaysIcon />} popoverProps={{ placement: "bottom", shouldFlip: false, backdrop: "opaque", }} />

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

Implement component with custom selectorIcon prop.

Expected behavior

Expected to see Heroicons CalendarDays icon as my custom selectorIcon. Instead, saw no icon at all.

Screenshots or Videos

Operating System Version

macOS

Browser

Chrome

[linear[bot]]

ENG-1191 Date Picker - selectorIcon Prop not displaying Icon

[wingkwong]

can you share your CalendarDaysIcon as well

[awesome-pro]

@hectarescraps on the heroicons website I tried with both jsx and svg I used this code and it works completely fine

svg

  <DatePicker  selectorIcon={<Image src="/calendar.svg" alt="calendar" width={20} height={20} />}  />

jsx

<DatePicker selectorIcon={<CalendarIcon />} />

function CalendarIcon() {
  return (
    <svg
      className="size-6"
      fill="currentColor"
      viewBox="0 0 24 24"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path d="M12.75 12.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM7.5 15.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5ZM8.25 17.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM9.75 15.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5ZM10.5 17.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM12 15.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5ZM12.75 17.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM14.25 15.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5ZM15 17.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM16.5 15.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5ZM15 12.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM16.5 13.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z" />
      <path
        clipRule="evenodd"
        d="M6.75 2.25A.75.75 0 0 1 7.5 3v1.5h9V3A.75.75 0 0 1 18 3v1.5h.75a3 3 0 0 1 3 3v11.25a3 3 0 0 1-3 3H5.25a3 3 0 0 1-3-3V7.5a3 3 0 0 1 3-3H6V3a.75.75 0 0 1 .75-.75Zm13.5 9a1.5 1.5 0 0 0-1.5-1.5H5.25a1.5 1.5 0 0 0-1.5 1.5v7.5a1.5 1.5 0 0 0 1.5 1.5h13.5a1.5 1.5 0 0 0 1.5-1.5v-7.5Z"
        fillRule="evenodd"
      />
    </svg>
  );
}

[wilsonreyhan]

Thank you so much @abhinandan-verma - got it working on my end as well now. Closing.