[Pickers] How to change pen, clock, calendar icons?
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 99.1k
- Forks
- 32.5k
- Avg merge
- 2d 17h
- Merged PRs (30d)
- 106
Description
I have tried to change icons that are rendered in pickers, for example MuiCalendarPicker has component prop that allows for custom icons. But from code search and some digging I have found out that it is impossible to change other icons.
type Component = ComponentsOverrides<'MuiCalendarPicker'>;
const defaultProps: Component['defaultProps'] = {
components: {
LeftArrowIcon: ArrowLeftThin,
RightArrowIcon: ArrowRightThin,
SwitchViewIcon: ArrowDown,
},
};
- The issue is present in the latest release.
- I have searched the issues of this repository and believe that this is not a duplicate.
Current Behavior 😯
Currently we can only change LeftArrowIcon, RightArrowIcon, SwitchViewIcon. But we cannot change TimeIcon, DateRangeIcon, CalendarIcon, PenIcon. Also, documentation isn't truly clear on how to change behavior and styles via the Theme.
Another component which doesn't seems like it can be modified via the Theme is PickersToolbar.
Expected Behavior 🤔
Better documented theme overrides and better extensibility of pickers.
Steps to Reproduce 🕹
https://codesandbox.io/s/clever-cache-bgj6r?file=/src/Demo.tsx
Steps:
- Install dependencies
- Try to override pen or other icons
Context 🔦
Currently I am trying to override icons of the pickers and style it to our company design. It is quite hard to understand how everything works, even from source code.
Your Environment 🌎
`npx @material-ui/envinfo`
System:
OS: Windows 10 10.0.19044
CPU: (8) x64 Intel(R) Core(TM) i7-7700K CPU @ 4.20GHz
Memory: 16.65 GB / 31.92 GB
Binaries:
Node: 16.5.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.10 - ~\AppData\Roaming\npm\yarn.CMD
npm: 7.6.3 - C:\Program Files\nodejs\npm.CMD
Managers:
pip3: 21.1.3 - C:\Python39\Scripts\pip3.EXE
Utilities:
Git: 2.31.1.
Virtualization:
Docker: 20.10.5 - C:\Program Files\Docker\Docker\resources\bin\docker.EXE
IDEs:
VSCode: 1.59.0 - C:\Users\silha\AppData\Local\Programs\Microsoft VS Code\bin\code.CMD
Visual Studio: 16.10.31402.337 (Visual Studio Community 2019)
Languages:
Python: 3.9.6
Python3: 3.9.6
Browsers:
Edge: Spartan (44.19041.1023.0), Chromium (92.0.902.67)
Internet Explorer: 11.0.19041.906
Monorepos:
Yarn Workspaces: 1.22.10
Lerna: 4.0.0
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked CodeSandbox Demo.tsx and the MuiCalendarPicker and PickersToolbar source and theme override entry points. Determine how the listed picker icons and toolbar are exposed, then document or extend those customization points; done means the requested icons and toolbar can be customized through a clear, tested API.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100