[docs] Fix icon linking implementation concurrent safe (mui#30428)

docs/data/material/components/material-icons/SearchIcons.js

@@ -278,15 +278,15 @@ const DialogDetails = React.memo(function DialogDetails(props) {
     <Dialog fullWidth maxWidth="sm" open={open} onClose={handleClose}>
       {selectedIcon ? (
         <React.Fragment>
-          <DialogTitle disableTypography>
+          <DialogTitle>
             <Tooltip
               placement="right"
               title={copied1 ? t('copied') : t('clickToCopy')}
               TransitionProps={{
                 onExited: () => setCopied1(false),
               }}
             >
-              <Title component="h2" variant="h6" onClick={handleClick(1)}>
+              <Title component="span" variant="inherit" onClick={handleClick(1)}>
                 {selectedIcon.importName}
               </Title>
             </Tooltip>
@@ -452,10 +452,12 @@ const allIcons = Object.keys(mui)
  */
 function useLatest(value) {
   const latest = React.useRef(value);
-  if (value !== undefined && value !== null) {
-    latest.current = value;
-  }
-  return latest.current;
+  React.useEffect(() => {
+    if (value !== undefined && value !== null) {
+      latest.current = value;
+    }
+  }, [value]);
+  return value ?? latest.current;
 }
 
 export default function SearchIcons() {

test/e2e-website/material-icons.spec.ts

@@ -0,0 +1,16 @@
+import { test as base, expect } from '@playwright/test';
+import FEATURE_TOGGLE from 'docs/src/featureToggle';
+import { TestFixture } from './playwright.config';
+
+const test = base.extend<TestFixture>({});
+
+test('should see the selected icon popup that match the query', async ({ page }) => {
+  await page.goto(
+    FEATURE_TOGGLE.enable_redirects
+      ? '/components/material-icons/?selected=AcUnit'
+      : '/material-ui/material-icons/?selected=AcUnit',
+    { waitUntil: 'networkidle' },
+  );
+
+  await expect(page.locator('h2:has-text("AcUnit")')).toBeVisible();
+});