Material-ui: [docs] Implement a search + individual pages for the icons

[ousmaneMetso]

Tried importing this from material-ui and its not working.
It says: Module not found: Can't resolve '@material-ui/icons/Delete'

[ffjanhoeck]

Please check that you node_modules folder includes @material/icons, because it works pretty fine.
https://codesandbox.io/s/0oqo41426n

[joshwooding]

We would need a reproduction, as demonstrated above it works on codesandbox.

[oliviertassinari]

I was looking into the potential for improving the icons documentation page. We have two important leverages that we should use 🔥:

• Implement a search. We have 1k icons, with 5 variants each. It's not always simple to use material.io to navigate them.
• Leverage SEO for the 1k icons. We can make them easier to discover and generate more traffic.

[eps1lon]

Implement a search. We have 1k icons, with 5 variants each. It's not always simple to use material.io to navigate them.

I rather enjoyed https://material.io/tools/icons/ to be honest. What features do you think are lacking currently?

Leverage SEO for the 1k icons. We can make them easier to discover and generate more traffic.

I don't think that generates useful traffic. Somebody searching for an icon doesn't need a React component library for that.

[oliviertassinari]

I rather enjoyed https://material.io/tools/icons/ to be honest. What features do you think are lacking currently?

@eps1lon This way, we can provide the correct import code. We have started in this direction with #12720. I have the following user experience in mind https://fontawesome.com/icons/helicopter?style=solid. We can contextualize the icon in different contexts, we can provide the raw source, the import path, the different variants.

• https://stackoverflow.com/questions/50829728/how-to-use-material-ui-icons-in-react: 25 views a day.
• https://stackoverflow.com/questions/35210777/svg-icons-with-material-ui-where-to-find-how-to-style: 15 views a day.
• https://stackoverflow.com/questions/38714021/is-there-a-list-on-how-to-use-material-ui-icons-in-the-svg-icons-folder: 20 views a day.

=> 60 views a day. That's one of the top StackOverflow problem encountered by our users.

I don't think that generates useful traffic. Somebody searching for an icon doesn't need a React component library for that.

The goal is to save people time. We can look at the search volume on Google. It's still early enough so we can correctly position ourselves:

• "icons" Volume: 246 000/mo | CPC: $2.13
• "material icons" Volume: 165 000/mo | CPC: $0.39
• "react icons" Volume: 8 100/mo | CPC: $0.00
• "material icons react"Volume: 0/mo | CPC: $0.00

I have removed the important flag as you are raising some concern about the value it can bring.

[ousmaneMetso]

update: it works i had material-ui in my modules, but i still needed to do: npm install material-ui/icons.
I wonder why it comes as a separate package from material-ui

[oliviertassinari]

I wonder why it comes as a separate package from material-ui

@ousmaneMetso Bundle size: https://bundlephobia.com/result?p=@material-ui/icons@3.0.2.

[mbrookes]

What features do you think are lacking currently?

Aliases. It's hard to find certain icons without knowing their exact name. But it would be a huge job to improve that, and well outside the remit of Material-UI.