[material-ui][docs] Basic information about how to use the Material Icons

[matthias-ccri]

Related page

N/A

Kind of issue

Missing information

Issue description

I'm looking for docs on how to use @mui/icons-material, and I'm unable to find any docs page about it.

The npm page for that package links to The SvgIcon documentation and The Material Design icons search.

• The icon search doesn't have any usage examples, and
• the SvgIcon page examples all import from @mui/material, like import SvgIcon from '@mui/material/SvgIcon'

So I can't find any docs on how to use the @mui/icons-material package.

Context

Here is my particular situation: I am reviewing an internal PR that does this:

import { AvTimer } from '@mui/icons-material';

... 

const StyledAvTimer = styled(AvTimer)(() => ({
    height: '16px',
    width: '16px',
    marginRight: '4px',
}));

While I suspect that wrapping an icon like this is not intended usage, I also wonder if the icon (AvTimer) should be wrapped in an SvgIcon.

I need some authoritative docs to reference.

Search keywords: @mui/icons-material icons package usage intended

[danilo-leal]

Heya @matthias-ccri, thanks for opening this issue up! Much of the foundational information about the Material Icons is available in the SVG Icon component section — which is already used under the hood by each icon — of the Icons page. But, from your issue, I'm sensing that page & instructions are not as discoverable as they could be. So, to ease that a little bit, I opened the above-linked PR where we add a few sections to the Material Icons page, exposing just the most basic stuff (imports, size, and colors), which seems to be this "authoritative" reference documentation you're looking for!

[matthias-ccri]

Thank you!

[oliviertassinari]

I feel that the root issue is that:

1. we don't correctly link to https://mui.com/material-ui/icons/#material-svg-icons from the relevant places. For example in https://mui.com/material-ui/material-icons/ why does it link Material UI installation docs?

I would expect a link to the package docs, so https://mui.com/material-ui/icons/#material-svg-icons

2. that section in https://mui.com/material-ui/icons/#material-svg-icons might not be complete enough.