[docs] Reword icons page

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

@@ -7,61 +7,21 @@ components: Icon, SvgIcon
 
 <p class="description">Guidance and suggestions for using icons with Material-UI.</p>
 
-A [system icon](https://material.io/design/iconography/system-icons.html) or UI 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.
-Google has provided a set of [Material icons](https://material.io/tools/icons/?style=baseline) that follow these guidelines.
+Material-UI provides icons support in three ways.
 
-Material-UI provides two components to render system icons: `SvgIcon` for rendering SVG paths, and `Icon` for rendering font icons.
+- Standardized Material Design icons are exported as React components from `@material-ui/icons` package (Material Icons).
+- With the `SvgIcon` component, a React wrapper for a custom SVG icon, exported from `@material-ui/core`.
+- With the `Icon` component, used to render custom font icons, exported from `@material-ui/core`.
 
-## SVG Icons
+## Material Icons (recommended)
 
-The `SvgIcon` component takes an SVG `path` element as its child and converts it to a React component that displays the path,
-and allows the icon to be styled and respond to mouse events. SVG elements should be scaled for a 24x24px viewport.
+Material Design has standardized over 1,000 commonly needed icons, each in five different "themes" (see below). For each SVG icon, we export the respective React component from the `@material-ui/icons` package. You can search the full list of these icons in [Material Icons](/components/material-icons/).
 
-The resulting icon can be used as is,
-or included as a child for other Material-UI components that use icons.
-By default, an Icon will inherit the current text color.
-Optionally, you can set the icon color using one of the theme color properties: `primary`, `secondary`, `action`, `error` & `disabled`.
-
-{{"demo": "pages/components/icons/SvgIcons.js"}}
-
-### SVG Material icons
-
-It's interesting to have the building blocks needed to implement custom icons, but what about presets?
-[@material-ui/icons](https://www.npmjs.com/package/@material-ui/icons) is an npm package that includes the 1,000+ official [Material icons](/components/material-icons/) converted to `SvgIcon` components.
-
-<a href="/components/material-icons/">
-  <img src="/static/images/icons/icons.png" alt="Official material icons" style="width: 566px" />
-</a>
+### Usage
 
-#### Usage
-
-You can use the [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
-
-- 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`
-- The Two Tone [`delete`](https://material.io/tools/icons/?icon=delete&style=twotone) icon is exposed as `@material-ui/icons/DeleteTwoTone`
-- The Sharp [`delete`](https://material.io/tools/icons/?icon=delete&style=sharp) icon is exposed as `@material-ui/icons/DeleteSharp`
-
-There are three exceptions to this rule:
-
-- [`3d_rotation`](https://material.io/tools/icons/?icon=3d_rotation&style=baseline) is exposed as `@material-ui/icons/ThreeDRotation`
-- [`4k`](https://material.io/tools/icons/?icon=4k&style=baseline) is exposed as `@material-ui/icons/FourK`
-- [`360`](https://material.io/tools/icons/?icon=360&style=baseline) is exposed as `@material-ui/icons/ThreeSixty`
-
-{{"demo": "pages/components/icons/SvgMaterialIcons.js"}}
+Install `@material-ui/icons`.
 
-#### Imports
-
-You can import the icons with one of these two options:
+Import icons using one of these two options:
 
 - Option 1:
 
@@ -80,13 +40,39 @@ The safest is option 1 but option 2 can yield the best developer experience.
 Make sure you follow the [minimizing bundle size guide](/guides/minimizing-bundle-size/#option-2) before using the second approach.
 The configuration of a Babel plugin is encouraged.
 
-### More SVG icons
+Each icon also has a "theme": `Filled` (default), `Outlined`, `Rounded`, `Two tone` and `Sharp`. If you want to import the icon component with a "theme" different than default, append the "theme" name to the icon name. For example `@material-ui/icons/Delete` icon with:
+
+- `Filled` "theme" (default) is exported as `@material-ui/icons/Delete`,
+- `Outlined` "theme" is exported as `@material-ui/icons/DeleteOutlined`,
+- `Rounded` "theme" is exported as `@material-ui/icons/DeleteRounded`,
+- `Two tone` "theme" is exported as `@material-ui/icons/DeleteTwoTone`,
+- `Sharp` "theme" is exported as `@material-ui/icons/DeleteSharp`.
+
+NOTE: The Material Design specification names the icons using "snake_case" naming (for example `delete_forever`, `add_a_photo`), while `@material-ui/icons` exports the respective icons using "PascalCase" naming (for example `DeleteForever`, `AddAPhoto`). There are three exceptions to this naming rule: `3d_rotation` exported as `ThreeDRotation`, `4k` exported as `FourK`, and `360` exported as `ThreeSixty`.
+
+{{"demo": "pages/components/icons/SvgMaterialIcons.js"}}
+
+## `SvgIcon`
+
+If you need a custom SVG icon (not available in Material Icons) you should use the `SvgIcon` wrapper.
+The `SvgIcon` component takes the SVG `path` element as its child and converts it to a React component that displays this SVG icon, and allows the icon to be styled and respond to mouse events.
+SVG elements should be scaled for a 24x24px viewport.
+
+The resulting icon can be used as is,
+or included as a child for other Material-UI components that use icons.
+By default, an Icon will inherit the current text color.
+Optionally, you can set the icon color using one of the theme color properties: `primary`, `secondary`, `action`, `error` & `disabled`.
+
+{{"demo": "pages/components/icons/SvgIcons.js"}}
+
+### Libraries of SVG icons
+
+There are many projects that provide SVG icons. For example [https://materialdesignicons.com](https://materialdesignicons.com/) provides over 2,000 icons.
+For the wanted icon, copy the SVG `path` they provide, and use it as the child of the `SvgIcon` component.
 
-Looking for even more SVG icons? There are a lot of projects out there,
-but [https://materialdesignicons.com](https://materialdesignicons.com/) provides over 2,000 official and community provided icons.
-[mdi-material-ui](https://github.com/TeamWertarbyte/mdi-material-ui) packages these icons as Material-UI SvgIcons in much the same way as [@material-ui/icons](https://www.npmjs.com/package/@material-ui/icons) does for the official icons.
+NOTE: [mdi-material-ui](https://github.com/TeamWertarbyte/mdi-material-ui) has already wrapped each of these SVG icons with the `SvgIcon` component, so you don't have to do it yourself.
 
-## Font Icons
+## `Icon` (Font icons)
 
 The `Icon` component will display an icon from any icon font that supports ligatures.
 As a prerequisite, you must include one, such as the