Change icon of dropdownIndicator? #181
Answered
by
csandman
QuangLoc0311
asked this question in
Q&A
-
How can I change icon of dropdownIndicator like this? |
Beta Was this translation helpful? Give feedback.
Answered by
csandman
Sep 14, 2022
Replies: 1 comment
-
Check out the Customizing Components section of the docs. The example listed there should be exactly what you need: https://codesandbox.io/s/chakra-react-select-custom-icons-xf7scd?file=/example.js For simplicities sake, here's a specific example: import { Icon } from "@chakra-ui/react";
import { Select, chakraComponents } from "chakra-react-select";
import { AiFillCaretDown } from "react-icons/ai";
const customComponents = {
DropdownIndicator: (props) => (
<chakraComponents.DropdownIndicator {...props}>
<Icon as={AiFillCaretDown} h={4} w={4} />
</chakraComponents.DropdownIndicator>
)
};
const Example = () => (
<Select
useBasicStyles
components={customComponents}
/>
); |
Beta Was this translation helpful? Give feedback.
0 replies
Answer selected by
QuangLoc0311
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Check out the Customizing Components section of the docs. The example listed there should be exactly what you need: https://codesandbox.io/s/chakra-react-select-custom-icons-xf7scd?file=/example.js
For simplicities sake, here's a specific example: