Material UI IconButton

Material UI IconButton is a component that displays an icon button with optional tooltip functionality. It is based on Material Design guidelines, providing a sleek and modern look to your web applications.

Usage

To use Material UI IconButton, you must install the @material-ui/core package and import the IconButton component:

import { IconButton } from '@material-ui/core';

Then you can use the IconButton like this:

<IconButton>
  <Icon />
</IconButton>

You can also pass in optional props, such as aria-label, color, disabled, onClick, and size.

Examples

Here are some examples of how to use Material UI IconButton:

// Basic example
<IconButton>
  <Icon />
</IconButton>

// IconButton with tooltip
<IconButton aria-label="Delete" tooltip="Delete">
  <DeleteIcon />
</IconButton>

// Red IconButton
<IconButton color="secondary">
  <Icon />
</IconButton>

// Disabled IconButton
<IconButton disabled>
  <Icon />
</IconButton>

// Small IconButton
<IconButton size="small">
  <Icon />
</IconButton>

Conclusion

Material UI IconButton is a simple and easy-to-use component that is perfect for displaying icons with optional tooltip functionality. By following the Material Design guidelines, it provides a modern and sleek look to your web applications.