[docs] Make it easier to find material icons (#16956)

* [docs] Make it easier to find material icons

* Josh review

* Matt feedback, add ellipsis

* Use radio for icon themes

* add josh suggestion

docs/package.json

@@ -55,6 +55,7 @@
     "emotion-theming": "^10.0.14",
     "fg-loadcss": "^2.0.1",
     "final-form": "^4.18.2",
+    "flexsearch": "^0.6.30",
     "isomorphic-fetch": "^2.2.1",
     "json2mq": "^0.2.0",
     "jss-plugin-template": "^10.0.0-alpha.23",

docs/pages/api/icon.md

@@ -60,4 +60,5 @@ The component is fully [StrictMode](https://reactjs.org/docs/strict-mode.html) c
 ## Demos
 
 - [Icons](/components/icons/)
+- [Material Icons](/components/material-icons/)
 

docs/pages/api/svg-icon.md

@@ -64,4 +64,5 @@ The component is fully [StrictMode](https://reactjs.org/docs/strict-mode.html) c
 ## Demos
 
 - [Icons](/components/icons/)
+- [Material Icons](/components/material-icons/)
 

docs/pages/components/material-icons.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import Markdown from 'docs/src/pages/components/material-icons/material-icons.md';
+import SearchIcons from 'docs/src/pages/components/material-icons/SearchIcons';
+
+const req = name => {
+  const map = {
+    'material-icons.md': Markdown,
+    'SearchIcons.js': {
+      default: SearchIcons,
+    },
+  };
+  return map[name];
+};
+req.keys = () => ['material-icons.md', 'SearchIcons.js'];
+const reqPrefix = 'pages/components/material-icons';
+
+function Page() {
+  return <MarkdownDocs disableToc req={req} reqSource={() => {}} reqPrefix={reqPrefix} />;
+}
+
+export default Page;

docs/src/modules/components/MarkdownElement.js

@@ -40,7 +40,12 @@ renderer.heading = (text, level) => {
   );
 };
 
-const externs = ['https://material.io/', 'https://getbootstrap.com/', 'https://www.amazon.com'];
+const externs = [
+  'https://material.io/',
+  'https://getbootstrap.com/',
+  'https://www.amazon.com',
+  'https://materialdesignicons.com',
+];
 
 renderer.link = (href, title, text) => {
   let more = '';
@@ -148,7 +153,7 @@ const styles = theme => ({
     '& h1': {
       ...theme.typography.h3,
       fontSize: 40,
-      margin: '24px 0 16px',
+      margin: '16px 0',
     },
     '& .description': {
       ...theme.typography.h5,

docs/src/pages.js

@@ -85,6 +85,7 @@ const pages = [
           { pathname: '/components/chips' },
           { pathname: '/components/dividers' },
           { pathname: '/components/icons' },
+          { pathname: '/components/material-icons' },
           { pathname: '/components/lists' },
           { pathname: '/components/tables' },
           { pathname: '/components/tooltips' },

docs/src/pages/components/icons/icons.md

@@ -30,23 +30,21 @@ Optionally, you can set the icon color using one of the theme color properties:
 ### SVG Material icons
 
 It's interesting to have the building blocks needed to implement custom icons, but what about presets?
-We provide a separate npm package,
-[@material-ui/icons](https://www.npmjs.com/package/@material-ui/icons),
-that includes the 1,000+ official [Material icons](https://material.io/tools/icons/?style=baseline) converted to `SvgIcon` components.
+[@material-ui/icons](https://www.npmjs.com/package/@material-ui/icons) is an npm package that includes the 1,000+ official [Material icons](https://material.io/tools/icons/?style=baseline) converted to `SvgIcon` components.
 
-<a href="https://material.io/tools/icons/?icon=3d_rotation&style=baseline">
+<a href="/components/material-icons/">
   <img src="/static/images/icons/icons.png" alt="Official material icons" style="width: 566px" />
 </a>
 
 #### Usage
 
-You can use [material.io/tools/icons](https://material.io/tools/icons/?style=baseline) to find a specific icon.
+You can use our [internal search](/components/material-icons/) or [material.io/tools/icons](https://material.io/tools/icons/?style=baseline) to find a specific icon.
 When importing an icon, keep in mind that the names of the icons are `PascalCase`, for instance:
 
 - [`delete`](https://material.io/tools/icons/?icon=delete&style=baseline) is exposed as `@material-ui/icons/Delete`
 - [`delete forever`](https://material.io/tools/icons/?icon=delete_forever&style=baseline) is exposed as `@material-ui/icons/DeleteForever`
 
-For *"themed"* icons, append the theme name to the icon name. For instance with the
+For "themed" icons, append the theme name to the icon name. For instance with the
 
 - The Outlined [`delete`](https://material.io/tools/icons/?icon=delete&style=outline) icon is exposed as `@material-ui/icons/DeleteOutlined`
 - The Rounded [`delete`](https://material.io/tools/icons/?icon=delete&style=rounded) icon is exposed as `@material-ui/icons/DeleteRounded`
@@ -63,18 +61,23 @@ There are three exceptions to this rule:
 
 #### Imports
 
-- If your environment doesn't support tree-shaking, the **recommended** way to import the icons is the following:
-```jsx
-import AccessAlarmIcon from '@material-ui/icons/AccessAlarm';
-import ThreeDRotation from '@material-ui/icons/ThreeDRotation';
-```
+You can import the icons with one of these two options:
 
-- If your environment support tree-shaking you can also import the icons this way:
-```jsx
-import { AccessAlarm, ThreeDRotation } from '@material-ui/icons';
-```
+- Option n°1:
+
+  ```jsx
+  import AccessAlarmIcon from '@material-ui/icons/AccessAlarm';
+  import ThreeDRotation from '@material-ui/icons/ThreeDRotation';
+  ```
+- Option n2:
+
+  ```jsx
+  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](https://webpack.js.org/guides/tree-shaking/). It may also impact Hot Module Reload performance.
+The safest option is n°1 but option n°2 can yield the best experience.
+Make sure you follow our [minimizing bundle size guide](/guides/minimizing-bundle-size/#option-2) before using the approach n°2.
+We encourage the configuration of a Babel plugin.
 
 ### More SVG icons