You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/src/pages/components/icons/icons.md
+9-9Lines changed: 9 additions & 9 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -15,11 +15,11 @@ Material-UI provides icons support in three ways:
15
15
16
16
## Material Icons
17
17
18
-
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/).
18
+
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/).
19
19
20
20
### Usage
21
21
22
-
Install `@material-ui/icons`. Import icons using one of these two options:
22
+
Install @material-ui/icons. Import icons using one of these two options:
23
23
24
24
- Option 1:
25
25
@@ -38,15 +38,15 @@ The safest is Option 1 but Option 2 can yield the best developer experience.
38
38
Make sure you follow the [minimizing bundle size guide](/guides/minimizing-bundle-size/#option-2) before using the second approach.
39
39
The configuration of a Babel plugin is encouraged.
40
40
41
-
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:
41
+
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:
42
42
43
-
-`Filled` "theme" (default) is exported as *@material-ui/icons/Delete*,
44
-
-`Outlined` "theme" is exported as *@material-ui/icons/DeleteOutlined*,
45
-
-`Rounded` "theme" is exported as *@material-ui/icons/DeleteRounded*,
46
-
-`Two tone` "theme" is exported as *@material-ui/icons/DeleteTwoTone*,
47
-
-`Sharp` "theme" is exported as *@material-ui/icons/DeleteSharp*.
43
+
- Filledtheme (default) is exported as `@material-ui/icons/Delete`,
44
+
- Outlinedtheme is exported as `@material-ui/icons/DeleteOutlined`,
45
+
- Roundedtheme is exported as `@material-ui/icons/DeleteRounded`,
46
+
-Twotone theme is exported as `@material-ui/icons/DeleteTwoTone`,
47
+
- Sharptheme is exported as `@material-ui/icons/DeleteSharp`.
48
48
49
-
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`.
49
+
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`.
0 commit comments