[docs][joy] Clarify when CssVarsProvider is required (#36410)

docs/data/joy/getting-started/tutorial/tutorial.md

@@ -32,7 +32,6 @@ The [Sheet](/joy-ui/react-sheet/) component is a `<div>` container that supports
 
 Import Sheet and add it to your app as shown below.
 (If you're using Create React App, for example, all of this code should go in `App.js`.)
-Notice that Joy UI components must be nested within `<CssVarsProvider />`:
 
 ```jsx
 import * as React from 'react';

docs/data/joy/getting-started/usage/usage.md

@@ -8,15 +8,10 @@ The following code snippet demonstrates a simple app that uses the Joy UI [Butto
 
 ```jsx
 import * as React from 'react';
-import { CssVarsProvider } from '@mui/joy/styles';
 import Button from '@mui/joy/Button';
 
 export default function MyApp() {
-  return (
-    <CssVarsProvider>
-      <Button variant="solid">Hello World</Button>
-    </CssVarsProvider>
-  );
+  return <Button variant="solid">Hello World</Button>;
 }
 ```
 
@@ -31,10 +26,6 @@ In the Quickstart example above, you can see that the Button component is nested
 This provider unlocks a whole host of customization options powered by CSS variables.
 See [Using CSS variables](/joy-ui/customization/using-css-variables/) for more details.
 
-:::error
-`<CssVarsProvider />` is _required_ when working with Joy UI components.
-:::
-
 ## Globals
 
 Since Joy UI components are built to function in isolation, they don't require any kind of globally scoped styles.

docs/data/joy/guides/using-icon-libraries/using-icon-libraries.md

@@ -78,6 +78,10 @@ If you use TypeScript, you will need to update the TSConfig.
 
 :::
 
+:::error
+`<CssVarsProvider />` is _required_ when working with Material UI's icons inside an app using Joy UI, so that the components can correctly adjust the icons based on the usage.
+:::
+
 ### Usage
 
 By default, Joy UI components are able to control an icon's color, font size, and margins when its size or variant changes.