mui / mui/material-ui

[Pickers] How to change pen, clock, calendar icons?

Open
#27,708 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

scope: pickers type: new feature
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:

  1. Install dependencies
  2. 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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.