[docs][material-ui] Fixed Google Fonts link for material two-tone ico…

…ns in CodeSandbox and Stackblitz (#38247)
mui · Aug 16, 2023 · 2ac3eaa · 2ac3eaa
1 parent 85c3c77
commit 2ac3eaa
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 1 deletion.
diff --git a/docs/src/modules/sandbox/CodeSandbox.test.js b/docs/src/modules/sandbox/CodeSandbox.test.js
@@ -243,4 +243,23 @@ ReactDOM.createRoot(document.querySelector("#root")!).render(
       '<script src="https://cdn.tailwindcss.com"></script>',
     );
   });
+
+  it('should generate the correct stylesheet font link in index.html for Material Two Tones icons', () => {
+    const raw = `import * as React from 'react';
+    import Icon from '@mui/material/Icon';
+
+    export default function TwoToneIcons() {
+      return <Icon baseClassName="material-icons-two-tone">add_circle</Icon>;
+    }
+    `;
+
+    const result = CodeSandbox.createReactApp({
+      raw,
+      codeVariant: 'JS',
+    });
+
+    expect(result.files['public/index.html'].content).to.contain(
+      'https://fonts.googleapis.com/icon?family=Material+Icons+Two+Tone',
+    );
+  });
 });
diff --git a/docs/src/modules/sandbox/CreateReactApp.ts b/docs/src/modules/sandbox/CreateReactApp.ts
@@ -4,10 +4,12 @@ export const getHtml = ({
   title,
   language,
   codeStyling,
+  raw,
 }: {
   title: string;
   language: string;
   codeStyling?: 'Tailwind' | 'MUI System';
+  raw?: string;
 }) => {
   return `<!DOCTYPE html>
 <html lang="${language}">
@@ -23,7 +25,9 @@ export const getHtml = ({
     <!-- Icons to support Material Design -->
     <link
       rel="stylesheet"
-      href="https://fonts.googleapis.com/icon?family=Material+Icons"
+      href="https://fonts.googleapis.com/icon?family=Material+Icons${
+        raw?.includes('material-icons-two-tone') ? '+Two+Tone' : ''
+      }"
     />${
       codeStyling === 'Tailwind'
         ? `

diff --git a/docs/src/modules/sandbox/StackBlitz.test.js b/docs/src/modules/sandbox/StackBlitz.test.js
@@ -210,4 +210,23 @@ ReactDOM.createRoot(document.querySelector("#root")!).render(
       '<script src="https://cdn.tailwindcss.com"></script>',
     );
   });
+
+  it('should generate the correct stylesheet font link in index.html for Material Two Tones icons', () => {
+    const raw = `import * as React from 'react';
+    import Icon from '@mui/material/Icon';
+
+    export default function TwoToneIcons() {
+      return <Icon baseClassName="material-icons-two-tone">add_circle</Icon>;
+    }
+    `;
+
+    const result = StackBlitz.createReactApp({
+      raw,
+      codeVariant: 'JS',
+    });
+
+    expect(result.files['index.html']).to.contain(
+      'https://fonts.googleapis.com/icon?family=Material+Icons+Two+Tone',
+    );
+  });
 });