From c642d788676658d6def066e0f3fac112b99a32b8 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sat, 21 May 2022 17:14:56 +0200 Subject: [PATCH] [docs] Fix wrong link to Material Icons --- docs/data/material/components/icons/icons.md | 10 +++++----- .../components/material-icons/material-icons.md | 2 +- .../getting-started/installation/installation.md | 2 +- packages/mui-icons-material/README.md | 6 +++--- 4 files changed, 10 insertions(+), 10 deletions(-) diff --git a/docs/data/material/components/icons/icons.md b/docs/data/material/components/icons/icons.md index eb626c67811c8e..491402b837b59b 100644 --- a/docs/data/material/components/icons/icons.md +++ b/docs/data/material/components/icons/icons.md @@ -12,7 +12,7 @@ materialDesign: https://material.io/design/iconography/system-icons.html MUI provides icons support in three ways: -1. Standardized [Material Design icons](#material-svg-icons) exported as React components (SVG icons). +1. Standardized [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. @@ -152,7 +152,7 @@ import { ReactComponent as StarIcon } from './star.svg'; ### createSvgIcon -The `createSvgIcon` utility component is used to create the [Material icons](#material-icons). It can be used to wrap an SVG path with an SvgIcon component. +The `createSvgIcon` utility component is used to create the [Material Icons](#material-icons). It can be used to wrap an SVG path with an SvgIcon component. ```jsx const HomeIcon = createSvgIcon( @@ -186,7 +186,7 @@ Note: [mdi-material-ui](https://github.com/TeamWertarbyte/mdi-material-ui) has a The `Icon` component will display an icon from any icon font that supports ligatures. As a prerequisite, you must include one, such as the -[Material icon font](https://google.github.io/material-design-icons/#icon-font-for-the-web) in your project. +[Material Icons font](https://google.github.io/material-design-icons/#icon-font-for-the-web) in your project. To use an icon simply wrap the icon name (font ligature) with the `Icon` component, for example: @@ -199,7 +199,7 @@ import Icon from '@mui/material/Icon'; By default, an Icon will inherit the current text color. Optionally, you can set the icon color using one of the theme color properties: `primary`, `secondary`, `action`, `error` & `disabled`. -### Font Material icons +### Font Material Icons `Icon` will by default set the correct base class name for the Material Icons font (filled variant). All you need to do is load the font, for instance, via Google Web Fonts: @@ -260,7 +260,7 @@ Then, you can use the two-tone font directly: {{"demo": "FontAwesomeIcon.js"}} -Note that the Font Awesome icons weren't designed like the Material Design icons (compare the two previous demos). +Note that the Font Awesome icons weren't designed like the Material Icons (compare the two previous demos). The fa icons are cropped to use all the space available. You can adjust for this with a global override: ```js diff --git a/docs/data/material/components/material-icons/material-icons.md b/docs/data/material/components/material-icons/material-icons.md index e23c85b55e5567..e70bead0f7dc71 100644 --- a/docs/data/material/components/material-icons/material-icons.md +++ b/docs/data/material/components/material-icons/material-icons.md @@ -12,7 +12,7 @@ githubLabel: 'package: icons' The following npm package, [@mui/icons-material](https://www.npmjs.com/package/@mui/icons-material), -includes the 2,000+ official [Material icons](https://fonts.google.com/icons) converted to [`SvgIcon`](/material-ui/api/svg-icon/) components. +includes the 2,000+ official [Material Icons](https://fonts.google.com/icons?icon.set=Material+Icons) converted to [`SvgIcon`](/material-ui/api/svg-icon/) components. {{"component": "modules/components/ComponentLinkHeader.js"}} diff --git a/docs/data/material/getting-started/installation/installation.md b/docs/data/material/getting-started/installation/installation.md index 2a9dd2c6fbee7e..3512ffd7ad848c 100644 --- a/docs/data/material/getting-started/installation/installation.md +++ b/docs/data/material/getting-started/installation/installation.md @@ -51,7 +51,7 @@ For instance, via Google Web Fonts: ## Font icons -To use the font `Icon` component, you must first add the [Material icons](https://fonts.google.com/icons) font. +To use the font `Icon` component, you must first add the [Material Icons](https://fonts.google.com/icons?icon.set=Material+Icons) font. Here are [some instructions](/material-ui/icons/#font-icons) on how to do so. For instance, via Google Web Fonts: diff --git a/packages/mui-icons-material/README.md b/packages/mui-icons-material/README.md index 5c1b37eb770456..c9319ab9d29297 100644 --- a/packages/mui-icons-material/README.md +++ b/packages/mui-icons-material/README.md @@ -1,6 +1,6 @@ # @mui/icons-material -This package provides the Google [Material icons](https://fonts.google.com/icons) packaged as a set of [React](https://facebook.github.io/react/) components. +This package provides the Google [Material Icons](https://fonts.google.com/icons?icon.set=Material+Icons) converted to [`SvgIcon`](https://mui.com/material-ui/api/svg-icon/) components. ## Installation @@ -35,8 +35,8 @@ yarn add @mui/material -- [The documentation](https://mui.com/components/icons/#svg-material-icons) -- [The icons search](https://mui.com/components/material-icons/) +- [The documentation](https://mui.com/material-ui/icons/#svgicon) +- [The icons search](https://mui.com/material-ui/material-icons/) ## Contributing