Skip to content

Icons

Molib uses Material Icons via the @mui/icons-material package. MUI is built around them — they share the size, color, and accessibility conventions of every other MUI component, so there's no integration tax.

Decision

  • Set: Material Icons. Picked because we already use MUI for every other component; pairing them means icons inherit the theme (color, density, focus rings) without bespoke wiring.
  • Style: prefer the Outlined variants (e.g. EditOutlinedIcon) over filled. They read as quieter affordances, which suits the operational palette. Use filled variants only when an icon must call attention to a state (e.g. WarningIcon inside a row).
  • Size: 16–20px in dense contexts (table rows, toolbars), 24px (MUI default) in standalone buttons. Use the fontSize prop (small / medium / inherit) — never hard-code pixel sizes.
  • Color: inherit from the surrounding text (color: 'inherit'). When an icon stands alone in an IconButton, let the muted ink come from color: 'text.secondary' rather than coloring the icon itself.

Import style

Always import each icon from its own module path so the bundler can tree-shake:

import EditOutlinedIcon from '@mui/icons-material/EditOutlined';

Never use the barrel import (import { EditOutlined } from '@mui/icons-material') — it pulls in the full set.

Accessibility

  • Icon-only buttons must carry aria-label (e.g. <IconButton aria-label="edit">).
  • An icon adjacent to text is decorative — leave it unlabeled and let the text carry meaning.