From fb19b756b0acf84fba4c9e3c621ef630beaf3d02 Mon Sep 17 00:00:00 2001 From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com> Date: Wed, 6 Sep 2023 15:04:51 -0300 Subject: [PATCH 1/2] add a small revision to the icons page --- docs/data/material/components/icons/icons.md | 23 ++++++++++++-------- 1 file changed, 14 insertions(+), 9 deletions(-) diff --git a/docs/data/material/components/icons/icons.md b/docs/data/material/components/icons/icons.md index ef0fafe9a5991d..472f72bcd7675a 100644 --- a/docs/data/material/components/icons/icons.md +++ b/docs/data/material/components/icons/icons.md @@ -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 + +```bash npm npm install @mui/icons-material ``` -Or **yarn**: - -```bash +```bash yarn yarn add @mui/icons-material ``` +```bash pnpm +pnpm add @mui/icons-material +``` + + + 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/). @@ -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 @@ -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. From 3ed43bc451a3429a9831572f7530808acf95c9b8 Mon Sep 17 00:00:00 2001 From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com> Date: Fri, 8 Sep 2023 07:52:30 -0300 Subject: [PATCH 2/2] trigger tests again