From afa01a33322d90a23d967b94be779ab0a6abe28e Mon Sep 17 00:00:00 2001
From: Prakash Kumar <pgcet601@gmail.com>
Date: Tue, 9 Jun 2026 12:14:16 +0530
Subject: [PATCH 1/2] fix: improve icon dialog responsiveness on small screens

---
 .../components/material-icons/SearchIcons.js     | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/docs/data/material/components/material-icons/SearchIcons.js b/docs/data/material/components/material-icons/SearchIcons.js
index 077bd0607a1c4c..f515c4f78b4de4 100644
--- a/docs/data/material/components/material-icons/SearchIcons.js
+++ b/docs/data/material/components/material-icons/SearchIcons.js
@@ -399,6 +399,12 @@ const DialogDetails = React.memo(function DialogDetails(props) {
               onClick={handleClick(2)}
               code={`import ${selectedIcon.importName}Icon from '@mui/icons-material/${selectedIcon.importName}';`}
               language="js"
+              sx={{
+                '& pre': {
+                  whiteSpace: 'pre-wrap',
+                  wordBreak: 'break-all',
+                },
+              }}
             />
           </Tooltip>
           <ImportLink
@@ -409,13 +415,13 @@ const DialogDetails = React.memo(function DialogDetails(props) {
             {t('searchIcons.learnMore')}
           </ImportLink>
           <DialogContent>
-            <Grid container>
-              <Grid size="grow">
-                <Grid container sx={{ justifyContent: 'center' }}>
+            <Grid container spacing={2} sx={{ rowGap: { xs: 3, sm: 0 } }}>
+              <Grid size={{ xs: 12, sm: 6 }}>
+                <Grid container sx={{ justifyContent: 'center', alignItems: 'center', height: '100%' }}>
                   <CanvasComponent as={selectedIcon.Component} />
                 </Grid>
               </Grid>
-              <Grid size="grow">
+              <Grid size={{ xs: 12, sm: 6 }}>
                 <Grid
                   container
                   sx={{ alignItems: 'flex-end', justifyContent: 'center' }}
@@ -442,7 +448,7 @@ const DialogDetails = React.memo(function DialogDetails(props) {
                     </Tooltip>
                   </Grid>
                 </Grid>
-                <Grid container sx={{ justifyContent: 'center' }}>
+                <Grid container sx={{ justifyContent: 'center', mt: 1 }}>
                   <ContextComponent
                     as={selectedIcon.Component}
                     contextColor="primary"

From 9638020acd129c948e28f0469c77336166257fb6 Mon Sep 17 00:00:00 2001
From: Prakash Kumar <pgcet601@gmail.com>
Date: Thu, 11 Jun 2026 17:10:29 +0530
Subject: [PATCH 2/2] style: run prettier

---
 .../material/components/material-icons/SearchIcons.js    | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/docs/data/material/components/material-icons/SearchIcons.js b/docs/data/material/components/material-icons/SearchIcons.js
index f515c4f78b4de4..4ca49ff8aacf35 100644
--- a/docs/data/material/components/material-icons/SearchIcons.js
+++ b/docs/data/material/components/material-icons/SearchIcons.js
@@ -417,7 +417,14 @@ const DialogDetails = React.memo(function DialogDetails(props) {
           <DialogContent>
             <Grid container spacing={2} sx={{ rowGap: { xs: 3, sm: 0 } }}>
               <Grid size={{ xs: 12, sm: 6 }}>
-                <Grid container sx={{ justifyContent: 'center', alignItems: 'center', height: '100%' }}>
+                <Grid
+                  container
+                  sx={{
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    height: '100%',
+                  }}
+                >
                   <CanvasComponent as={selectedIcon.Component} />
                 </Grid>
               </Grid>