'Font Awesome Icons in material-ui Button

I want to use the fontawesome icons in my material-ui Button component. But I couldn't do that. Do you know why? ( I'm using React and react-admin framework. )

import '../../../node_modules/font-awesome/css/font-awesome.min.css';
import Button from '@material-ui/core/Button';

....

<Button style={{
                    backgroundColor: '#5cb85c',
                    color: 'white'
                }}
                onClick={() => this.codeGenerate()}>
                <i className="fa fa-star"></i>
            </Button>

Solution 1:^[1]

Well, I am not sure if you have read the font-awesome official guide/documentation, but they recommend using "react-fontawesome".

https://github.com/FortAwesome/react-fontawesome

It is simple as:

import ReactDOM from 'react-dom'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'

const element = <FontAwesomeIcon icon={faCoffee} />

ReactDOM.render(element, document.body)

Taken from the link I've provided above.

I've successfully used it in my Material UI project. Let me know if you have more questions.

Solution 2:^[2]

You can use Icon component from Material-UI to use icons

ex:

<Button
 style={{
 backgroundColor: "#5cb85c",
 color: "white"
 }}
 >
  <Icon className={classNames(classes.icon, "fa fa-plus-circle")} />
</Button>

here is a working example : https://codesandbox.io/s/ly4n0z2oz9

and you can use font-awesome as

npm install --save font-awesome

import "font-awesome/css/font-awesome.css";

as described in this thread: https://github.com/facebook/create-react-app/issues/2872

Solution 3:^[3]

If you are using just a couple of SVG icons from Font Awesome then you don't need to add entire FA library to your project.

Simply download that SVG icon and open it in Google chrome, right click on it to see source code. Copy the SVG path of that icon and paste it in SVG Icon button like this:

<Tooltip title="GitHub ">
            <Button
              variant="fab"
              mini
              aria-label="GitHub"
              style={{ backgroundColor: "#4078c0", color: "#FFF" }}
              onClick={() =>
                window.open("https://github.com/hiteshsahu", "_blank")
              }
              className={classes.button}
            >
              <SvgIcon>
                <svg
                  aria-hidden="true"
                  data-prefix="fab"
                  data-icon="github-alt"
                  role="img"
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 480 512"
                >
                  <path
                    fill="currentColor"
                    d="M186.1 328.7c0 20.9-10.9 55.1-36.7 55.1s-36.7-34.2-36.7-55.1 10.9-55.1 36.7-55.1 36.7 34.2 36.7 55.1zM480 278.2c0 31.9-3.2 65.7-17.5 95-37.9 76.6-142.1 74.8-216.7 74.8-75.8 0-186.2 2.7-225.6-74.8-14.6-29-20.2-63.1-20.2-95 0-41.9 13.9-81.5 41.5-113.6-5.2-15.8-7.7-32.4-7.7-48.8 0-21.5 4.9-32.3 14.6-51.8 45.3 0 74.3 9 108.8 36 29-6.9 58.8-10 88.7-10 27 0 54.2 2.9 80.4 9.2 34-26.7 63-35.2 107.8-35.2 9.8 19.5 14.6 30.3 14.6 51.8 0 16.4-2.6 32.7-7.7 48.2 27.5 32.4 39 72.3 39 114.2zm-64.3 50.5c0-43.9-26.7-82.6-73.5-82.6-18.9 0-37 3.4-56 6-14.9 2.3-29.8 3.2-45.1 3.2-15.2 0-30.1-.9-45.1-3.2-18.7-2.6-37-6-56-6-46.8 0-73.5 38.7-73.5 82.6 0 87.8 80.4 101.3 150.4 101.3h48.2c70.3 0 150.6-13.4 150.6-101.3zm-82.6-55.1c-25.8 0-36.7 34.2-36.7 55.1s10.9 55.1 36.7 55.1 36.7-34.2 36.7-55.1-10.9-55.1-36.7-55.1z"
                  />
                </svg>{" "}
              </SvgIcon>
            </Button>
          </Tooltip>

It will work perfectly

Solution 4:^[4]

Although this isn't needed just for this example context, it's useful to wrap the content from FontAwesomeIcon with SvgIcon so you can use it for things like input adornments in MUI. Here's a nice type-safe way to ensure you have all the icons defined. ICON_NAME is an enum with string values.

import React from 'react';
import { IconName, library } from '@fortawesome/fontawesome-svg-core';
import {
  faBars, faCampground, faSun, IconDefinition,
} from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { SvgIcon, SvgIconProps } from '@mui/material';
import { ICON_NAME } from '../types/IconName';

const nameToIcon: { [k in ICON_NAME]: IconDefinition } = {
  [ICON_NAME.CAMPGROUND]: faCampground,
  [ICON_NAME.SUN]: faSun,
  [ICON_NAME.BARS]: faBars,
};

library.add(...Object.values(nameToIcon));

export function FaIcon({ iconName, ...rest }: SvgIconProps & { iconName: ICON_NAME }) {
  return (
    <SvgIcon {...rest}>
      <FontAwesomeIcon icon={iconName as IconName} />
    </SvgIcon>
  );
}

Solution 5:^[5]

As per instructions on: https://fontawesome.com/how-to-use/on-the-web/using-with/react.

According to the Font Awesome ,they have asked to import the font-awesome-svg-core and free-solid-svg-icons to App.js file.

But it didn't seem to help me when using icon inside componenet. So, this is what I used. I imported below files to my component:

import { library } from '@fortawesome/fontawesome-svg-core'
import { faFileDownload } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

library.add(faFileDownload)

after importing above files and the code, you can add icon to a button this way,

<Button
color='primary'
variant="contained">

<FontAwesomeIcon icon="file-download"/>
button_text

</Button>

Solution 6:^[6]

for font awesome brand icons ... took me time to figure it out

import { library } from '@fortawesome/fontawesome-svg-core'
import { fab, faGooglePlay } from '@fortawesome/free-brand-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

library.add(fab);

class FabTest extends Component{
      render(){
          return(
             <Button variant="contained" color="primary">
                  <FontAwesomeIcon icon={faGooglePlay}/>
                      <div>
                         <span> Get it on </span>
                          <p> PlayStore</p>
                      </div>
             </Button>
          )
      }
}

Solution 7:^[7]

The following worked well for me.

I loaded the CSS from Font Awesome in my root component per the MUI Readme:

    useEffect(() => {
      const node = loadCSS(
        'https://use.fontawesome.com/releases/v5.12.0/css/all.css',
        document.querySelector('#font-awesome-css') as HTMLElement,
      );

      return () => {
        node.parentNode?.removeChild(node);
      };
    }, []);

Then I added these overrides in the theme:

createTheme({
  overrides: {
    MuiIcon: {
      root: {
        width: 'auto',
        height: 'auto',
        fontSize: '1.25rem',
        padding: '.25rem',
      },
      fontSizeSmall: {
        fontSize: '1rem',
      },
      fontSizeLarge: {
        fontSize: '1.75rem',
      },
    },
    MuiButton: {
      iconSizeSmall: {
        '& > span:first-child': {
          fontSize: '1rem',
          marginBottom: '.1rem',
        },
      },
      iconSizeMedium: {
        '& > span:first-child': {
          fontSize: '1.1rem',
          marginBottom: '.1rem',
        },
      },
      iconSizeLarge: {
        '& > span:first-child': {
          fontSize: '1.2rem',
          marginBottom: '.1rem',
        },
      },
    },
    MuiIconButton: {
      root: {
        width: '2em',
        height: '2em',
      },
    },
  },
});

With these changes, I can simply add the FontAwesome classes to any icon and it renders as it should :D

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Faheem
Solution 2	Nadun
Solution 3	Hitesh Sahu
Solution 4	user17783468
Solution 5	Apurva.W
Solution 6	Senninseyi
Solution 7

'Font Awesome Icons in material-ui Button

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]