diff --git a/docs/src/pages/style/icons/icons.md b/docs/src/pages/style/icons/icons.md index 1fe7d47b1f7714..1d0d6fafe66f80 100644 --- a/docs/src/pages/style/icons/icons.md +++ b/docs/src/pages/style/icons/icons.md @@ -132,9 +132,9 @@ We add the `aria-hidden=true` and `role="img"` attributes so that your icons are ### Semantic SVG Icons -If your icon has semantic meaning, all you need to do is throw a `titleAccess="meaning"` property. It should be enough but you can always use the `moreChildren` property to add a `desc` description element. +If your icon has semantic meaning, all you need to do is throw in a `titleAccess="meaning"` property. -In the case of focusable interactive elements, like when used with a icon button, you can use the `aria-label` property: +In the case of focusable interactive elements, like when used with an icon button, you can use the `aria-label` property: ```jsx import IconButton from '@material-ui/core/IconButton'; @@ -156,7 +156,7 @@ We add the `aria-hidden=true` attribute so that your icons are properly accessib ### Semantic Font Icons -If your icons have semantic meaning, you need to provide a text alternative only visible assisitive technologies. +If your icons have semantic meaning, you need to provide a text alternative only visible to assisitive technologies. ```css .sr-only { diff --git a/packages/material-ui/src/SvgIcon/SvgIcon.d.ts b/packages/material-ui/src/SvgIcon/SvgIcon.d.ts index 002053858d3c1f..39a2b64659fa5c 100644 --- a/packages/material-ui/src/SvgIcon/SvgIcon.d.ts +++ b/packages/material-ui/src/SvgIcon/SvgIcon.d.ts @@ -6,7 +6,6 @@ export interface SvgIconProps color?: PropTypes.Color | 'action' | 'disabled' | 'error'; component?: React.ReactType; fontSize?: 'inherit' | 'default'; - moreChildren?: React.ReactNode; nativeColor?: string; titleAccess?: string; viewBox?: string; diff --git a/packages/material-ui/src/SvgIcon/SvgIcon.js b/packages/material-ui/src/SvgIcon/SvgIcon.js index 2fc71cdb691a25..e4e6ffaa3a0599 100644 --- a/packages/material-ui/src/SvgIcon/SvgIcon.js +++ b/packages/material-ui/src/SvgIcon/SvgIcon.js @@ -52,7 +52,6 @@ function SvgIcon(props) { color, component: Component, fontSize, - moreChildren, nativeColor, titleAccess, viewBox, @@ -80,7 +79,6 @@ function SvgIcon(props) { > {children} {titleAccess ? {titleAccess} : null} - {moreChildren} ); } @@ -113,11 +111,6 @@ SvgIcon.propTypes = { * The fontSize applied to the icon. Defaults to 24px, but can be configure to inherit font size. */ fontSize: PropTypes.oneOf(['inherit', 'default']), - /** - * Provide more children the svg icon. - * It can be used to inject a `desc` element for accessibility. - */ - moreChildren: PropTypes.node, /** * Applies a color attribute to the SVG element. */ diff --git a/pages/api/svg-icon.md b/pages/api/svg-icon.md index f7fd5aef5503a5..bb085a923f8863 100644 --- a/pages/api/svg-icon.md +++ b/pages/api/svg-icon.md @@ -24,7 +24,6 @@ import SvgIcon from '@material-ui/core/SvgIcon'; | color | enum: 'inherit', 'primary', 'secondary', 'action', 'error', 'disabled'
| 'inherit' | The color of the component. It supports those theme colors that make sense for this component. You can use the `nativeColor` property to apply a color attribute to the SVG element. | | component | union: string |
 func |
 object
| 'svg' | The component used for the root node. Either a string to use a DOM element or a component. | | fontSize | enum: 'inherit' |
 'default'
| 'default' | The fontSize applied to the icon. Defaults to 24px, but can be configure to inherit font size. | -| moreChildren | node |   | Provide more children the svg icon. It can be used to inject a `desc` element for accessibility. | | nativeColor | string |   | Applies a color attribute to the SVG element. | | titleAccess | string |   | Provides a human-readable title for the element that contains it. https://www.w3.org/TR/SVG-access/#Equivalent | | viewBox | string | '0 0 24 24' | Allows you to redefine what the coordinates without units mean inside an SVG element. For example, if the SVG element is 500 (width) by 200 (height), and you pass viewBox="0 0 50 20", this means that the coordinates inside the SVG will go from the top left corner (0,0) to bottom right (50,20) and each unit will be worth 10px. |