Skip to content

Commit

Permalink
[docs][material-ui] Small revision to the Icons page (#38840)
Browse files Browse the repository at this point in the history
  • Loading branch information
danilo-leal authored Sep 27, 2023
1 parent 0483728 commit 75404f9
Showing 1 changed file with 14 additions and 9 deletions.
23 changes: 14 additions & 9 deletions docs/data/material/components/icons/icons.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,30 +12,35 @@ materialDesign: https://m2.material.io/design/iconography/system-icons.html

Material UI provides icon support in three ways:

1. Standardized [Material Icons](#material-svg-icons) exported as React components (SVG icons).
1. With [Material Icons](#material-svg-icons) exported as React components (SVG icons).
1. With the [SvgIcon](#svgicon) component, a React wrapper for custom SVG icons.
1. With the [Icon](#icon-font-icons) component, a React wrapper for custom font icons.

## Material SVG icons

Google has created over 2,100 official Material icons, each in five different "themes" (see below).
Google has created over 2,100 official [Material icons](https://fonts.google.com/icons?icon.set=Material+Icons), each in five different "themes" (see below).
For each SVG icon, we export the respective React component from the `@mui/icons-material` package.
You can [search the full list of these icons](/material-ui/material-icons/).

### Installation

To install and save in your `package.json` dependencies, run the command below using **npm**:
Run one of the following commands to install it and save it to your `package.json` dependencies:

```bash
<codeblock storageKey="package-manager">
```bash npm
npm install @mui/icons-material
```

Or **yarn**:

```bash
```bash yarn
yarn add @mui/icons-material
```

```bash pnpm
pnpm add @mui/icons-material
```

</codeblock>

These components use the Material UI `SvgIcon` component to render the SVG path for each icon, and so have a peer-dependency on `@mui/material`.

If you aren't already using Material UI in your project, you can add it following the [installation guide](/material-ui/getting-started/installation/).
Expand Down Expand Up @@ -181,7 +186,7 @@ Below is a comparison of the `FontAwesomeIcon` component and a wrapped `SvgIcon`

FontAwesomeIcon's `fullWidth` prop can also be used to approximate the correct dimensions, but it isn't perfect.

### Other Libraries
### Other libraries

#### MDI

Expand Down Expand Up @@ -290,7 +295,7 @@ const theme = createTheme({

{{"demo": "FontAwesomeIconSize.js"}}

## Font vs SVG. Which approach to use?
## Font vs. SVGs: Which approach to use?

Both approaches work fine, however there are some subtle differences, especially in terms of performance and rendering quality.
Whenever possible SVG is preferred as it allows code splitting, supports more icons, and renders faster and better.
Expand Down

0 comments on commit 75404f9

Please sign in to comment.