Icons

Icons display helper components.

A system icon symbolizes a command, file, device, or directory. System icons are also used to represent common actions like trash, print, and save, and are commonly found in app bars, toolbars, buttons, and lists.

Two components are provided to render system icons: SvgIcon for rendering SVG paths, and Icon for rendering font icons.

Best Practices

• An icon's meaning should generally be the same regardless of where or how it's used. Don't use an existing icon for a completely different purpose.
• Limiting the number of icons used in a design makes them easier to understand, and more effective at gaining the user's attention.
• Don't use icons as decoration that doesn't bring value to the user experience.
• Don't use icons that are ambiguous and don't clearly convey meaning.

Recommended: SVG Material Icons

You can use material.io/tools/icons to find a specific icon. Unifi uses the default filled icons, and the outlined icons. When importing an icon, keep in mind that the names of the icons are PascalCase, for instance:

• delete is exposed as @material-ui/icons/Delete
• delete forever is exposed as @material-ui/icons/DeleteForever

For Outlined icons, append Outlined to the icon name. For instance:

• The Outlined delete icon is exposed as @material-ui/icons/DeleteOutlined

<Grid container>
  <Grid item xs={4}>
    <Typography>Filled (Default)</Typography>
  </Grid>
  <Grid item xs={8}>
    <Delete />
  </Grid>
  <Grid item xs={4}>
    <Typography>Outlined</Typography>
  </Grid>
  <Grid item xs={8}>
    <DeleteOutlined />
  </Grid>
</Grid>

Imports

If your environment doesn't support tree-shaking, the recommended way to import the icons is the following:

import AccessAlarmIcon from '@material-ui/icons/AccessAlarm';
import ThreeDRotation from '@material-ui/icons/ThreeDRotation';

If your environment supports tree-shaking, you can also import the icons this way:

import { AccessAlarm, ThreeDRotation } from '@material-ui/icons';

Note: Importing named exports in this way will result in the code for every icon being included in your project, so is not recommended unless you configure tree-shaking. It may also impact Hot Module Reload performance.