If you're looking to incorporate icons into your Material-UI project, the Icon component is a great tool to achieve this.

For example:

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

For a live demonstration, check out this working example: https://codesandbox.io/s/ly4n0z2oz9

You can also utilize font-awesome by following these steps:

npm install --save font-awesome

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

More information on incorporating font-awesome can be found in this thread: https://github.com/facebook/create-react-app/issues/2872

If you only need a few SVG icons from Font Awesome, there's no need to include the entire library in your project.

Simply download the specific SVG icon and open it in Google Chrome. Right-click on the icon to view the source code. Copy the SVG path of the icon and paste it into the SVG Icon button as shown below:

<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>

This method will work perfectly for using individual SVG icons without importing the entire Font Awesome library.

While not strictly necessary for this specific scenario, it can be beneficial to envelop the content from FontAwesomeIcon with SvgIcon in order to utilize it for tasks like input adornments within MUI. This approach provides a type-safe method to ensure all icons are properly defined. ICON_NAME serves as an enumeration containing 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>
  );
}

Following the guidelines found at: https://fontawesome.com/how-to-use/on-the-web/using-with/react.

Instructions from Font Awesome suggest importing font-awesome-svg-core and free-solid-svg-icons to the App.js file.

However, this approach did not work for me when using icons within a component. Instead, I opted to import the following files directly into 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 the necessary files and code, you can easily add an icon to a button like this:

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

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

</Button>

Discovering how to use font awesome brand icons was a learning curve for me.

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>
          )
      }
}

This method worked perfectly for me.

I included the CSS from Font Awesome directly in my main component following the guidelines outlined in 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);
      };
    }, []);

After that, I made these customizations 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',
      },
    },
  },
});

These adjustments allowed me to easily apply FontAwesome classes to any icon and have it display correctly :D