Material-ui: FontAwesome icons not working in Docs

[whitneymarkov]

• [x] This is not a v0.x issue.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

FontAwesome Icons should be rendered.

Current Behavior 😯

Steps to Reproduce 🕹

Link:

1. https://material-ui.com/style/icons/#font-awesome
   2.
   3.
   4.

Context 🔦

Your Environment 🌎

| Tech | Version |
|--------------|---------|
| Material-UI | v3.?.? |
| React | |
| Browser | |
| TypeScript | |
| etc. | |

[oliviertassinari]

@whitneymarkov Thank you for reporting the problem. It's a conflict between the injection order of the CSS for:

• FontAwesome font icons https://use.fontawesome.com/releases/v5.1.0/css/all.css
• And Material Design font icons https://fonts.googleapis.com/icon?family=Material+Icons

The regression was released this weekend.

[oliviertassinari]

We need to reverse the injection order. A diff like this can make it work:

--- a/docs/src/modules/components/AppSearch.js
+++ b/docs/src/modules/components/AppSearch.js
@@ -19,12 +19,10 @@ function loadDependencies() {
   if (dependenciesLoaded) {
     return;
   }
-
   dependenciesLoaded = true;
-
   loadCSS(
     'https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css',
-    document.querySelector('#insertion-point-jss'),
+    document.querySelector('#app-search'),
   );
   loadScript(
     'https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js',
diff --git a/docs/src/modules/components/AppWrapper.js b/docs/src/modules/components/AppWrapper.js
index ffb2b0fa6..a471bbc93 100644
--- a/docs/src/modules/components/AppWrapper.js
+++ b/docs/src/modules/components/AppWrapper.js
@@ -12,17 +12,6 @@ import { updatePageContext } from 'docs/src/modules/styles/getPageContext';
 import { getCookie } from 'docs/src/modules/utils/helpers';
 import { ACTION_TYPES, LANGUAGES } from 'docs/src/modules/constants';

-// Inject the insertion-point-jss after docssearch
-if (process.browser && !global.__INSERTION_POINT__) {
-  global.__INSERTION_POINT__ = true;
-  const styleNode = document.createComment('insertion-point-jss');
-  const docsearchStylesSheet = document.querySelector('#insertion-point-jss');
-
-  if (document.head && docsearchStylesSheet) {
-    document.head.insertBefore(styleNode, docsearchStylesSheet.nextSibling);
-  }
-}
-
 function themeSideEffect(reduxTheme) {
   setPrismTheme(reduxTheme.paletteType === 'light' ? lightTheme : darkTheme);
   document.body.dir = reduxTheme.direction;
diff --git a/docs/src/modules/styles/getPageContext.js b/docs/src/modules/styles/getPageContext.js
index 775387259..cb4327739 100644
--- a/docs/src/modules/styles/getPageContext.js
+++ b/docs/src/modules/styles/getPageContext.js
@@ -25,7 +25,7 @@ const theme = getTheme(themeInitialState);
 // Configure JSS
 const jss = create({
   plugins: [...jssPreset().plugins, rtl()],
-  insertionPoint: 'insertion-point-jss',
+  insertionPoint: process.browser ? document.querySelector('#insertion-point-jss') : null,
 });

 function createPageContext() {
diff --git a/docs/src/pages/style/icons/FontAwesome.js b/docs/src/pages/style/icons/FontAwesome.js
index b18e1964b..f394b12b5 100644
--- a/docs/src/pages/style/icons/FontAwesome.js
+++ b/docs/src/pages/style/icons/FontAwesome.js
@@ -27,7 +27,7 @@ class FontAwesome extends React.Component {
   componentDidMount() {
     loadCSS(
       'https://use.fontawesome.com/releases/v5.1.0/css/all.css',
-      document.querySelector('#insertion-point-jss'),
+      document.querySelector('#font-awesome'),
     );
   }

diff --git a/pages/_app.js b/pages/_app.js
index 7504cccb9..3cf41e7ea 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -19,12 +19,10 @@ function loadDependencies() {
   if (dependenciesLoaded) {
     return;
   }
-
   dependenciesLoaded = true;
-
   loadCSS(
     'https://fonts.googleapis.com/icon?family=Material+Icons',
-    document.querySelector('#insertion-point-jss'),
+    document.querySelector('#material-icon-font'),
   );
   loadScript('https://www.google-analytics.com/analytics.js', document.querySelector('head'));
 }
diff --git a/pages/_document.js b/pages/_document.js
index 569f7000c..08f8b442b 100644
--- a/pages/_document.js
+++ b/pages/_document.js
@@ -59,6 +59,9 @@ class MyDocument extends Document {
             This includes DNS lookups, TLS negotiations, TCP handshakes.
           */}
           <link href="https://fonts.gstatic.com" rel="preconnect" crossOrigin="anonymous" />
+          <style id="material-icon-font" />
+          <style id="font-awesome" />
+          <style id="app-search" />
           <style id="insertion-point-jss" />
         </Head>
         <body>

[oliviertassinari]

@whitneymarkov If you want to give it a try, we would be happy to review your pull-request :).

[Relaxe111]

It looks that problem still persist. I installed latest version of the material ui and have same behavior with fa icons
my code is:
<Icon className={classNames(classes.icon, "fas fa-user-check fa-lg")}/>

[Relaxe111]

and in material ui same situation

[oliviertassinari]

@Relaxe111 A live working example: https://next.material-ui.com/style/icons/#font-awesome. The problem is with the CSS injection order. Try the <StylesProvider injectFirst> option of Material-UI v4.
We should probably document the problem! Let me know if this fix your problem.

[Relaxe111]

this solves the problem, but this is in alfa. I asume that is not safe to use it in production. There is some others possible solutions ?

[oliviertassinari]

@Relaxe111 It will be a beta this weekend. You have a live example in https://codesandbox.io/s/vmv2mz9785. There is a lot more boilerplate with v3 regarding the insertionPoint option.

[oliviertassinari]

problem with this solution is that I get a warning from material-ui that childrenclassName is unkown props.

This prop is gone in v4. You will not have the warning.