IconButton with label

Question

Is there something I can use in/with IconButton to define a label below the icon?

Maybe something similar to BottomNavigationAction but without it having to be inside of a BottomNavigation.

Answer 1

You can add your label as a direct child of the IconButton (sibling of the Icon itself), and override the IconButton-label style to have flexDirection: column

import React from 'react';
import {IconButton} from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';
import SaveIcon from '@material-ui/icons/Save';

const useStyles = makeStyles(theme => ({
  iconButtonLabel: {
    display: 'flex',
    flexDirection: 'column',
  },
}));

export default function IconButtonWithLabel() {
  const classes = useStyles();

  return (
      <IconButton classes={{label: classes.iconButtonLabel}}>
        <SaveIcon/>
        <div>
          hello
        </div>
      </IconButton>
  );
}