Font Awesome Icons in material-ui Button

Question

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>

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

Answer 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

Answer 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

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