Icon

A Material Symbols icon.

These are different from (and supersede) the more common Material Icons (provided for example by @mui/material-icons).

Props

The same as Joy UI's Card component, as well as:

icon: The icon to display. A list of available icons can be found in Icon.allIcons or on the Material Symbols website.
fill, weight, grade, opticalSize: The Material Symbols properties of the icon.
size: The size of the icon in pixels, if known.

Examples

Icon playground



1function IconPlayground() {
2  const [icon, setIcon] = useState("move_selection_down");
3
4  return (
5    <Stack alignItems="center" gap={2}>
6      <Autocomplete
7        options={[...Icon.allIcons]}
8        value={icon}
9        onChange={(_, v) => setIcon(v ?? "")}
10      />
11      <Icon icon={icon as any} />
12    </Stack>
13  );
14}

1function IconPlayground() {
2  const [icon, setIcon] = useState("move_selection_down");
3
4  return (
5    <Stack alignItems="center" gap={2}>
6      <Autocomplete
7        options={[...Icon.allIcons]}
8        value={icon}
9        onChange={(_, v) => setIcon(v ?? "")}
10      />
11      <Icon icon={icon as any} />
12    </Stack>
13  );
14}

.css-1gf1up0{--Icon-fontSize:calc(1em * 1);margin:var(--Typography-margin, 0px);display:inline;font-size:var(--Typography-fontSize, inherit);display:inline;}.css-1gf1up0>.MuiTypography-endDecorator{display:none;}.css-1gf1up0:hover>.MuiTypography-endDecorator{display:inline;}Icon

Examples

Icon playground

See also

Icon