diff --git a/docs/src/modules/components/Demo.js b/docs/src/modules/components/Demo.js
index 1df8ca92ad480d..a3be4bafee5f3e 100644
--- a/docs/src/modules/components/Demo.js
+++ b/docs/src/modules/components/Demo.js
@@ -8,6 +8,7 @@ import { withStyles } from '@material-ui/core/styles';
 import IconButton from '@material-ui/core/IconButton';
 import useMediaQuery from '@material-ui/core/useMediaQuery';
 import Collapse from '@material-ui/core/Collapse';
+import NoSsr from '@material-ui/core/NoSsr';
 import EditIcon from '@material-ui/icons/Edit';
 import CodeIcon from '@material-ui/icons/Code';
 import GitHubIcon from '@material-ui/icons/GitHub';
@@ -75,6 +76,7 @@ const styles = theme => ({
       flip: false,
       top: 0,
       right: theme.spacing(1),
+      height: theme.spacing(6),
     },
     justifyContent: 'space-between',
   },
@@ -91,6 +93,7 @@ const styles = theme => ({
     },
     '& pre': {
       overflow: 'auto',
+      lineHeight: 1.5,
       margin: '0px !important',
       maxHeight: 1000,
     },
@@ -298,115 +301,121 @@ function Demo(props) {
       <div className={classes.anchorLink} id={`${demoName}.tsx`} />
       {demoOptions.hideHeader ? null : (
         <div className={classes.header}>
-          <DemoLanguages
-            demo={demo}
-            codeOpen={codeOpen}
-            codeVariant={codeVariant}
-            gaEventCategory={gaCategory}
-            onLanguageClick={handleCodeLanguageClick}
-          />
-          <div className={classes.headerButtons}>
-            <Tooltip
-              classes={{ popper: classes.tooltip }}
-              key={showSourceHint}
-              open={showSourceHint && match ? true : undefined}
-              PopperProps={{ disablePortal: true }}
-              title={showCodeLabel}
-              placement="top"
-            >
-              <IconButton
-                aria-label={showCodeLabel}
-                data-ga-event-category={gaCategory}
-                data-ga-event-action="expand"
-                onClick={handleClickCodeOpen}
-                color={demoHovered ? 'primary' : 'default'}
-              >
-                <CodeIcon fontSize="small" />
-              </IconButton>
-            </Tooltip>
-            <Tooltip classes={{ popper: classes.tooltip }} title={t('viewGitHub')} placement="top">
-              <IconButton
-                aria-label={t('viewGitHub')}
-                data-ga-event-category={gaCategory}
-                data-ga-event-action="github"
-                href={demoData.githubLocation}
-                target="_blank"
-                rel="noopener nofollow"
-              >
-                <GitHubIcon fontSize="small" />
-              </IconButton>
-            </Tooltip>
-            {demoOptions.hideEditButton ? null : (
+          <NoSsr>
+            <DemoLanguages
+              demo={demo}
+              codeOpen={codeOpen}
+              codeVariant={codeVariant}
+              gaEventCategory={gaCategory}
+              onLanguageClick={handleCodeLanguageClick}
+            />
+            <div className={classes.headerButtons}>
               <Tooltip
                 classes={{ popper: classes.tooltip }}
-                title={t('codesandbox')}
+                key={showSourceHint}
+                open={showSourceHint && match ? true : undefined}
+                PopperProps={{ disablePortal: true }}
+                title={showCodeLabel}
                 placement="top"
               >
                 <IconButton
-                  aria-label={t('codesandbox')}
+                  aria-label={showCodeLabel}
                   data-ga-event-category={gaCategory}
-                  data-ga-event-action="codesandbox"
-                  onClick={handleClickCodeSandbox}
+                  data-ga-event-action="expand"
+                  onClick={handleClickCodeOpen}
+                  color={demoHovered ? 'primary' : 'default'}
                 >
-                  <EditIcon fontSize="small" />
+                  <CodeIcon fontSize="small" />
                 </IconButton>
               </Tooltip>
-            )}
-            <IconButton
-              onClick={handleClickMore}
-              aria-owns={anchorEl ? 'demo-menu-more' : undefined}
-              aria-haspopup="true"
-              aria-label={t('seeMore')}
-            >
-              <MoreVertIcon fontSize="small" />
-            </IconButton>
-            <Menu
-              id="demo-menu-more"
-              anchorEl={anchorEl}
-              open={Boolean(anchorEl)}
-              onClose={handleCloseMore}
-              getContentAnchorEl={null}
-              anchorOrigin={{
-                vertical: 'top',
-                horizontal: 'right',
-              }}
-              transformOrigin={{
-                vertical: 'top',
-                horizontal: 'right',
-              }}
-            >
-              <MenuItem
-                data-ga-event-category={gaCategory}
-                data-ga-event-action="copy"
-                onClick={handleClickCopy}
+              <Tooltip
+                classes={{ popper: classes.tooltip }}
+                title={t('viewGitHub')}
+                placement="top"
               >
-                {t('copySource')}
-              </MenuItem>
-              {demoOptions.hideEditButton ? null : (
-                <MenuItem
+                <IconButton
+                  aria-label={t('viewGitHub')}
                   data-ga-event-category={gaCategory}
-                  data-ga-event-action="stackblitz"
-                  onClick={handleClickStackBlitz}
+                  data-ga-event-action="github"
+                  href={demoData.githubLocation}
+                  target="_blank"
+                  rel="noopener nofollow"
                 >
-                  {t('stackblitz')}
-                </MenuItem>
+                  <GitHubIcon fontSize="small" />
+                </IconButton>
+              </Tooltip>
+              {demoOptions.hideEditButton ? null : (
+                <Tooltip
+                  classes={{ popper: classes.tooltip }}
+                  title={t('codesandbox')}
+                  placement="top"
+                >
+                  <IconButton
+                    aria-label={t('codesandbox')}
+                    data-ga-event-category={gaCategory}
+                    data-ga-event-action="codesandbox"
+                    onClick={handleClickCodeSandbox}
+                  >
+                    <EditIcon fontSize="small" />
+                  </IconButton>
+                </Tooltip>
               )}
-              <MenuItem
-                data-ga-event-category={gaCategory}
-                data-ga-event-action="copy-js-source-link"
-                onClick={createHandleCodeSourceLink(`${demoName}.js`)}
+              <IconButton
+                onClick={handleClickMore}
+                aria-owns={anchorEl ? 'demo-menu-more' : undefined}
+                aria-haspopup="true"
+                aria-label={t('seeMore')}
               >
-                {t('copySourceLinkJS')}
-              </MenuItem>
-              <MenuItem
-                data-ga-event-category={gaCategory}
-                data-ga-event-action="copy-ts-source-link"
-                onClick={createHandleCodeSourceLink(`${demoName}.tsx`)}
+                <MoreVertIcon fontSize="small" />
+              </IconButton>
+              <Menu
+                id="demo-menu-more"
+                anchorEl={anchorEl}
+                open={Boolean(anchorEl)}
+                onClose={handleCloseMore}
+                getContentAnchorEl={null}
+                anchorOrigin={{
+                  vertical: 'top',
+                  horizontal: 'right',
+                }}
+                transformOrigin={{
+                  vertical: 'top',
+                  horizontal: 'right',
+                }}
               >
-                {t('copySourceLinkTS')}
-              </MenuItem>
-            </Menu>
-          </div>
+                <MenuItem
+                  data-ga-event-category={gaCategory}
+                  data-ga-event-action="copy"
+                  onClick={handleClickCopy}
+                >
+                  {t('copySource')}
+                </MenuItem>
+                {demoOptions.hideEditButton ? null : (
+                  <MenuItem
+                    data-ga-event-category={gaCategory}
+                    data-ga-event-action="stackblitz"
+                    onClick={handleClickStackBlitz}
+                  >
+                    {t('stackblitz')}
+                  </MenuItem>
+                )}
+                <MenuItem
+                  data-ga-event-category={gaCategory}
+                  data-ga-event-action="copy-js-source-link"
+                  onClick={createHandleCodeSourceLink(`${demoName}.js`)}
+                >
+                  {t('copySourceLinkJS')}
+                </MenuItem>
+                <MenuItem
+                  data-ga-event-category={gaCategory}
+                  data-ga-event-action="copy-ts-source-link"
+                  onClick={createHandleCodeSourceLink(`${demoName}.tsx`)}
+                >
+                  {t('copySourceLinkTS')}
+                </MenuItem>
+              </Menu>
+            </div>
+          </NoSsr>
         </div>
       )}
       <Collapse in={codeOpen || showPreview} unmountOnExit>
diff --git a/docs/src/modules/components/MarkdownElement.js b/docs/src/modules/components/MarkdownElement.js
index e0b611f2431534..7307a1d52bf570 100644
--- a/docs/src/modules/components/MarkdownElement.js
+++ b/docs/src/modules/components/MarkdownElement.js
@@ -29,15 +29,16 @@ renderer.heading = (text, level) => {
   // eslint-disable-next-line no-underscore-dangle
   const escapedText = textToHash(text, global.__MARKED_UNIQUE__);
 
-  return (
-    `
-    <h${level}>
-      <a class="anchor-link" id="${escapedText}"></a>${text}` +
-    `<a class="anchor-link-style" aria-label="anchor" href="#${escapedText}">
-        <svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><path d="M46.9 13.9c-.5-.6-1.2-.94-2.07-.94h-6.67l1.86-8.98c.17-.85 0-1.7-.52-2.3-.48-.6-1.2-.94-2.07-.94-1.6 0-3.2 1.27-3.54 2.93l-.5 2.42c0 .07-.07.13-.07.2l-1.37 6.62H20.7l1.88-8.96c.16-.85 0-1.7-.53-2.3-.48-.6-1.2-.94-2.07-.94-1.65 0-3.2 1.27-3.56 2.93l-.52 2.58v.08l-1.37 6.64H7.3c-1.67 0-3.22 1.3-3.58 2.96-.16.86 0 1.7.52 2.3.48.6 1.2.93 2.07.93h6.97l-2 9.65H4c-1.67 0-3.22 1.27-3.56 2.94-.2.8 0 1.67.5 2.27.5.6 1.2.93 2.08.93H10l-1.84 9.05c-.2.84 0 1.67.52 2.3.5.6 1.25.92 2.08.92 1.66 0 3.2-1.3 3.55-2.94l1.94-9.33h11.22l-1.87 9.05c-.15.84.03 1.67.53 2.3.5.6 1.2.92 2.07.92 1.65 0 3.22-1.3 3.56-2.94l1.9-9.33h7c1.6 0 3.2-1.28 3.53-2.93.2-.87 0-1.7-.52-2.3-.48-.62-1.2-.96-2.05-.96h-6.7l2.02-9.65h6.93c1.67 0 3.22-1.27 3.56-2.92.2-.85 0-1.7-.5-2.3l-.04.03zM17.53 28.77l1.95-9.65H30.7l-1.97 9.66H17.5h.03z"/></svg>
-      </a></h${level}>
-  `
-  );
+  return [
+    `<h${level}>`,
+    `<a class="anchor-link" id="${escapedText}"></a>${text}`,
+    typeof window !== 'undefined'
+      ? `<a class="anchor-link-style" aria-label="anchor" href="#${escapedText}">` +
+        `<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"/></svg>` +
+        `</a>`
+      : null,
+    `</h${level}>`,
+  ].join('');
 };
 
 const externs = [
@@ -194,21 +195,19 @@ const styles = theme => ({
         wordBreak: 'break-all',
       },
       '& .anchor-link-style': {
-        opacity: 0,
         // To prevent the link to get the focus.
         display: 'none',
       },
       '&:hover .anchor-link-style': {
         display: 'inline-block',
-        opacity: 1,
         padding: '0 8px',
-        color: theme.palette.text.hint,
+        color: theme.palette.text.secondary,
         '&:hover': {
-          color: theme.palette.text.secondary,
+          color: theme.palette.text.primary,
         },
         '& svg': {
-          width: '0.55em',
-          height: '0.55em',
+          width: '0.7em',
+          height: '0.7em',
           fill: 'currentColor',
         },
       },