Skip to content

Commit

Permalink
Matt review
Browse files Browse the repository at this point in the history
  • Loading branch information
oliviertassinari committed Nov 25, 2019
1 parent 8c34fb8 commit 1d6c6e9
Showing 1 changed file with 9 additions and 9 deletions.
18 changes: 9 additions & 9 deletions docs/src/pages/components/icons/icons.md
Original file line number Diff line number Diff line change
Expand Up @@ -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:

Expand All @@ -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"}}

Expand Down

0 comments on commit 1d6c6e9

Please sign in to comment.