diff --git a/docs/src/pages/components/icons/icons.md b/docs/src/pages/components/icons/icons.md index 8ac98c09a89087..3300cc781f7587 100644 --- a/docs/src/pages/components/icons/icons.md +++ b/docs/src/pages/components/icons/icons.md @@ -15,11 +15,11 @@ Material-UI provides icons support in three ways: ## Material Icons -Material Design has standardized over 1,000 official 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 our [built-in search page](/components/material-icons/). +Material Design has standardized over 1,000 official 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 our [built-in search page](/components/material-icons/). ### Usage -Install `@material-ui/icons`. Import icons using one of these two options: +Install @material-ui/icons. Import icons using one of these two options: - Option 1: @@ -38,15 +38,15 @@ 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. -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: +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*. +- 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`, +- Twotone "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`. +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"}}