React: MUI Empty Icon to reserve space

Viewed 58

Sometimes I'd like an icon (e.g., end adornment for input) to be an empty icon, that I then replace with a real one at some point. Having the empty icon prevents a weird shift when the icon is added, by reserving the space.

I couldn't find a blank/empty icon in the MUI icons list though. What would be a good way to get an empty icon that behaves like a normal icon (with sizing and such)?

1 Answers

Turns out it's really simple. You can just use the Icon component, without giving it any children.

If you need to reserve the space for an IconButton, pass it the empty Icon and disable the button.

Related