diff --git a/docs/src/modules/utils/generateMarkdown.js b/docs/src/modules/utils/generateMarkdown.js
index 3a1b4b3e70a65c..53c4b5957d2efd 100644
--- a/docs/src/modules/utils/generateMarkdown.js
+++ b/docs/src/modules/utils/generateMarkdown.js
@@ -248,7 +248,7 @@ function generateClasses(reactAPI) {
       .map(
         className =>
           `| <span class="prop-name">${className}</span> | ${
-            reactAPI.styles.descriptions[className] ? escapeCell(reactAPI.styles.descriptions[className]) : ''
+            reactAPI.styles.descriptions[className] ? reactAPI.styles.descriptions[className] : ''
           }`,
       )
       .join('\n');
diff --git a/packages/material-ui/src/Button/Button.js b/packages/material-ui/src/Button/Button.js
index e2975546eb90b1..7a652b6e33a33f 100644
--- a/packages/material-ui/src/Button/Button.js
+++ b/packages/material-ui/src/Button/Button.js
@@ -79,7 +79,7 @@ export const styles = theme => ({
       theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'
     }`,
   },
-  /* Styles applied to the root element if `variant="[contained | fab]"`. */
+  /* Styles applied to the root element if `variant="[contained \| fab]"`. */
   contained: {
     color: theme.palette.getContrastText(theme.palette.grey[300]),
     backgroundColor: theme.palette.grey[300],
@@ -106,7 +106,7 @@ export const styles = theme => ({
       },
     },
   },
-  /* Styles applied to the root element if `variant="[contained | fab]"` and `color="primary"`. */
+  /* Styles applied to the root element if `variant="[contained \| fab]"` and `color="primary"`. */
   containedPrimary: {
     color: theme.palette.primary.contrastText,
     backgroundColor: theme.palette.primary.main,
@@ -118,7 +118,7 @@ export const styles = theme => ({
       },
     },
   },
-  /* Styles applied to the root element if `variant="[contained | fab]"` and `color="secondary"`. */
+  /* Styles applied to the root element if `variant="[contained \| fab]"` and `color="secondary"`. */
   containedSecondary: {
     color: theme.palette.secondary.contrastText,
     backgroundColor: theme.palette.secondary.main,
@@ -136,7 +136,7 @@ export const styles = theme => ({
   raisedPrimary: {}, // legacy
   /* Styles applied to the root element for backwards compatibility with legacy variant naming. */
   raisedSecondary: {}, // legacy
-  /* Styles applied to the root element if `variant="[fab | extendedFab]"`. */
+  /* Styles applied to the root element if `variant="[fab \| extendedFab]"`. */
   fab: {
     borderRadius: '50%',
     padding: 0,
@@ -164,7 +164,7 @@ export const styles = theme => ({
   colorInherit: {
     color: 'inherit',
   },
-  /* Styles applied to the root element if `size="mini"` & `variant="[fab | extendedFab]"`. */
+  /* Styles applied to the root element if `size="mini"` & `variant="[fab \| extendedFab]"`. */
   mini: {
     width: 40,
     height: 40,
diff --git a/pages/api/button.md b/pages/api/button.md
index 4aba559281078a..76746b89597ed7 100644
--- a/pages/api/button.md
+++ b/pages/api/button.md
@@ -47,18 +47,18 @@ This property accepts the following keys:
 | <span class="prop-name">flatPrimary</span> | Styles applied to the root element for backwards compatibility with legacy variant naming.
 | <span class="prop-name">flatSecondary</span> | Styles applied to the root element for backwards compatibility with legacy variant naming.
 | <span class="prop-name">outlined</span> | Styles applied to the root element if `variant="outlined"`.
-| <span class="prop-name">contained</span> | Styles applied to the root element if `variant="[contained &#124; fab]"`.
-| <span class="prop-name">containedPrimary</span> | Styles applied to the root element if `variant="[contained &#124; fab]"` and `color="primary"`.
-| <span class="prop-name">containedSecondary</span> | Styles applied to the root element if `variant="[contained &#124; fab]"` and `color="secondary"`.
+| <span class="prop-name">contained</span> | Styles applied to the root element if `variant="[contained \| fab]"`.
+| <span class="prop-name">containedPrimary</span> | Styles applied to the root element if `variant="[contained \| fab]"` and `color="primary"`.
+| <span class="prop-name">containedSecondary</span> | Styles applied to the root element if `variant="[contained \| fab]"` and `color="secondary"`.
 | <span class="prop-name">raised</span> | Styles applied to the root element for backwards compatibility with legacy variant naming.
 | <span class="prop-name">raisedPrimary</span> | Styles applied to the root element for backwards compatibility with legacy variant naming.
 | <span class="prop-name">raisedSecondary</span> | Styles applied to the root element for backwards compatibility with legacy variant naming.
-| <span class="prop-name">fab</span> | Styles applied to the root element if `variant="[fab &#124; extendedFab]"`.
+| <span class="prop-name">fab</span> | Styles applied to the root element if `variant="[fab \| extendedFab]"`.
 | <span class="prop-name">extendedFab</span> | Styles applied to the root element if `variant="extendedFab"`.
 | <span class="prop-name">focusVisible</span> | Styles applied to the ButtonBase root element if the button is keyboard focused.
 | <span class="prop-name">disabled</span> | Styles applied to the root element if `disabled={true}`.
 | <span class="prop-name">colorInherit</span> | Styles applied to the root element if `color="inherit"`.
-| <span class="prop-name">mini</span> | Styles applied to the root element if `size="mini"` & `variant="[fab &#124; extendedFab]"`.
+| <span class="prop-name">mini</span> | Styles applied to the root element if `size="mini"` & `variant="[fab \| extendedFab]"`.
 | <span class="prop-name">sizeSmall</span> | Styles applied to the root element if `size="small"`.
 | <span class="prop-name">sizeLarge</span> | Styles applied to the root element if `size="large"`.
 | <span class="prop-name">fullWidth</span> | Styles applied to the root element if `fullWidth={true}`.