Icon buttons

Sometimes, you need a button that's just an icon. This is where the IconButton component comes in handy. You can pass it any icon component as a child, and then you have an icon button.

How to do it...

Icon buttons are especially useful when you're working with restricted screen real estate or when you want to visually show the toggled state of something. For example, it might be easier for a user to toggle the state of a microphone if the enabled/disabled state indicates the actual microphone.

Let's build on this idea and implement toggle controls for the microphone and volume in an app, using icon buttons. Here's the code:

import React, { useState } from 'react';

import IconButton...