[docs-infra] Add icon to callouts

docs/data/material/getting-started/faq/faq.md

@@ -139,15 +139,10 @@ const ref = React.createRef();
 const element = ref.current;
 ```
 
-If you're not sure if the Material UI component in question forwards its ref you
-can check the API documentation under "Props" e.g. the [Button API](/material-ui/api/button/#props)
-includes
+If you're not sure if the Material UI component in question forwards its ref you can check the API documentation under "Props".
+You should find the message below, like in the [Button API](/material-ui/api/button/#props), [Button API](/material-ui/api/button/#props)
 
-:::info
-The ref is forwarded to the root element.
-:::
-
-indicating that you can access the DOM element with a ref.
+> The ref is forwarded to the root element.
 
 ## My App doesn't render correctly on the server
 
@@ -376,8 +371,6 @@ Example of fix:
 ### [legacy] React class name hydration mismatch
 
 :::warning
-**⚠️ Warning**
-
 Prop className did not match.
 :::
 

docs/data/material/guides/composition/composition.md

@@ -77,7 +77,7 @@ function ListItemLink(props) {
 ```
 
 :::warning
-⚠️ However, since we are using an inline function to change the rendered component, React will remount the link every time `ListItemLink` is rendered. Not only will React update the DOM unnecessarily but the state will be lost, e.g. the ripple effect of the `ListItem` will also not work correctly.
+However, since we are using an inline function to change the rendered component, React will remount the link every time `ListItemLink` is rendered. Not only will React update the DOM unnecessarily but the state will be lost, e.g. the ripple effect of the `ListItem` will also not work correctly.
 :::
 
 The solution is simple: **avoid inline functions and pass a static component to the `component` prop** instead.
@@ -123,7 +123,7 @@ import { Link } from 'react-router-dom';
 ```
 
 :::warning
-⚠️ However, this strategy suffers from a limitation: prop name collisions.
+However, this strategy suffers from a limitation: prop name collisions.
 The component receiving the `component` prop (e.g. ListItem) might intercept the prop (e.g. to) that is destined to the leave element (e.g. Link).
 :::
 

docs/data/material/guides/next-js-app-router/next-js-app-router.md

@@ -203,7 +203,7 @@ export default function Page() {
 ```
 
 :::error
-🚨 This code snippet _doesn't work_, because the Button's click handler is **non-serializable**:
+This code snippet _doesn't work_, because the Button's click handler is **non-serializable**:
 
 ```tsx
 // page.tsx

docs/data/material/migration/migration-v4/migration-v4.md

@@ -107,7 +107,7 @@ If your project includes these packages, you'll need to update them:
 - `@types/react-dom`
 
 :::warning
-📝 Make sure that your application is still running without errors, and commit the changes before continuing to the next step.
+Make sure that your application is still running without errors, and commit the changes before continuing to the next step.
 :::
 
 ## Set up `ThemeProvider`
@@ -138,7 +138,7 @@ function App() {
 ```
 
 :::warning
-📝 Make sure that your application is still running without errors, and commit the changes before continuing to the next step.
+Make sure that your application is still running without errors, and commit the changes before continuing to the next step.
 :::
 
 ## Update MUI packages
@@ -217,7 +217,7 @@ Note that if your app uses server-side rendering (SSR), there is a [known bug](h
 We strongly recommend using the default setup with Emotion instead.
 
 :::warning
-📝 Make sure that your application is still running without errors, and commit the changes before continuing to the next step.
+Make sure that your application is still running without errors, and commit the changes before continuing to the next step.
 :::
 
 ### Replace all imports

docs/data/material/migration/migration-v4/v5-component-changes.md

@@ -702,8 +702,8 @@ Change the default variant from `standard` to `outlined`.
 
 `standard` has been removed from the Material Design guidelines.
 
-:::warning
-✅ This is handled in [variant-prop codemod](#variant-prop)—read the details before running this codemod.
+:::success
+This is handled in [variant-prop codemod](#variant-prop)—read the details before running this codemod.
 :::
 
 ```diff
@@ -829,7 +829,7 @@ Use CSS `object-fit`. For IE11 support either use a polyfill such as
 
 This component is deprecated because its functionality can be created with the [`sx`](/system/getting-started/the-sx-prop/) prop or the [`useMediaQuery`](/material-ui/react-use-media-query/) hook.
 
-:::warning
+:::success
 This is handled in the [preset-safe codemod](#preset-safe) by applying fake `Hidden` component to prevent application crash, but further fixes are required.
 :::
 
@@ -907,8 +907,8 @@ The default `underline` prop is changed from `"hover"` to `"always"`.
 
 To recreate the behavior from v4, apply `defaultProps` in the theme.
 
-:::warning
-✅ This is handled in [link-underline-hover codemod](#link-underline-hover)—read the details before running this codemod.
+:::success
+This is handled in [link-underline-hover codemod](#link-underline-hover)—read the details before running this codemod.
 :::
 
 ```js
@@ -1257,7 +1257,7 @@ You can get a reference to the underlying DOM node of our components via `ref` p
 
 The component relied on [`ReactDOM.findDOMNode`](https://react.dev/reference/react-dom/findDOMNode) which is [deprecated in `React.StrictMode`](https://react.dev/reference/react/StrictMode#warning-about-deprecated-finddomnode-usage).
 
-:::warning
+:::success
 This is handled in the [preset-safe codemod](#preset-safe) by applying fake `RootRef` component to prevent application crash, but further fixes are required.
 :::
 
@@ -1279,7 +1279,7 @@ Change the default variant from `standard` to `outlined`.
 If you are composing the `Select` with a form control component, you only need to update `FormControl`—the select inherits the variant from its context.
 
 :::success
-✅ This is handled in [variant-prop codemod](#variant-prop)—read the details before running this codemod.
+This is handled in [variant-prop codemod](#variant-prop)—read the details before running this codemod.
 :::
 
 ```diff
@@ -1682,7 +1682,7 @@ Change the default variant from `standard` to `outlined`.
 `standard` has been removed from the Material Design guidelines.
 
 :::success
-✅ This is handled in [variant-prop codemod](#variant-prop)—read the details before running this codemod.
+This is handled in [variant-prop codemod](#variant-prop)—read the details before running this codemod.
 :::
 
 ```diff

docs/pages/experiments/docs/callouts.md

@@ -7,14 +7,21 @@
 :::info
 This is an info callout.
 It says, "Here's a bit of extra insight to help you understand this feature."
-Add some **bold text** and a [link](#link).
+
+- emphasised: **bold text**
+- some code `<div/>`
+- a [link](#link).
+
 :::
 
 ```markup
 :::info
 This is an info callout.
 It says, "Here's a bit of extra insight to help you understand this feature."
-Add some **bold text** and a [link](#link).
+
+- emphasised: **bold text**
+- some code `<div/>`
+- a [link](#link).
 :::
 ```
 
@@ -23,14 +30,21 @@ Add some **bold text** and a [link](#link).
 :::success
 This is a success callout.
 It says, "Here's an actionable suggestion to help you succeed."
-Add some **bold text** and a [link](#link).
+
+- emphasised: **bold text**
+- some code `<div/>`
+- a [link](#link).
+
 :::
 
 ```markup
 :::success
 This is a success callout.
 It says, "Here's an actionable suggestion to help you succeed."
-Add some **bold text** and a [link](#link).
+
+- emphasised: **bold text**
+- some code `<div/>`
+- a [link](#link).
 :::
 ```
 
@@ -39,14 +53,21 @@ Add some **bold text** and a [link](#link).
 :::warning
 This is a warning callout.
 It says, "Be careful! Keep this detail in mind to avoid potential issues."
-Add some **bold text** and a [link](#link).
+
+- emphasised: **bold text**
+- some code `<div/>`
+- a [link](#link).
+
 :::
 
 ```markup
 :::warning
 This is a warning callout.
 It says, "Be careful! Keep this detail in mind to avoid potential issues."
-Add some **bold text** and a [link](#link).
+
+- emphasised: **bold text**
+- some code `<div/>`
+- a [link](#link).
 :::
 ```
 
@@ -55,13 +76,45 @@ Add some **bold text** and a [link](#link).
 :::error
 This is an error callout.
 It says, "You will fail if you don't heed this dire warning."
-Add some **bold text** and a [link](#link).
+
+- emphasised: **bold text**
+- some code `<div/>`
+- a [link](#link).
+
 :::
 
 ```markup
 :::error
 This is an error callout.
 It says, "You will fail if you don't heed this dire warning."
-Add some **bold text** and a [link](#link).
+
+- emphasised: **bold text**
+- some code `<div/>`
+- a [link](#link).
+:::
+```
+
+## Empty
+
+Should not be used, here just to ensure forgetting the token is not a big deal.
+
+:::
+This is a callout.
+It says, "You will fail if you don't heed this dire warning."
+
+- emphasised: **bold text**
+- some code `<div/>`
+- a [link](#link).
+
+:::
+
+```markup
+:::
+This is a callout.
+It says, "You will fail if you don't heed this dire warning."
+
+- emphasised: **bold text**
+- some code `<div/>`
+- a [link](#link).
 :::
 ```