Fontawesome icon is hidden when inside a button element

Question

I just upgraded my fontawesome to 6.0.0

"@fortawesome/fontawesome-svg-core": "^1.2.36",
"@fortawesome/free-brands-svg-icons": "^6.0.0",
"@fortawesome/free-regular-svg-icons": "^6.0.0",
"@fortawesome/free-solid-svg-icons": "^6.0.0",
"@fortawesome/react-fontawesome": "^0.1.16",

The problem I am facing is when adding an Icon inside a button with a parent div.

This does not show the Icon

<div>
    <button>
    <FontAwesomeIcon
      icon={faHeart}
      size="2x"
      className={`transform motion-safe:group-focus:scale-110 p-1.5 z-10`}
      aria-hidden="true"
    />
    </button> 
</div>

If I change it to a simple parent div it shows up correctly.

<div>
    <div>
    <FontAwesomeIcon
      icon={faHeart}
      size="2x"
      className={`transform motion-safe:group-focus:scale-110 p-1.5 z-10`}
      aria-hidden="true"
    />
    </div>
</div>

Does anyone one why or how to make it work with a button?

Your first snippet works when dropped in a [sample app](https://codesandbox.io/embed/react-with-fontawesome-demo-sd1xj?fontsize=14&hidenavigation=1&theme=dark). Please provide more information or a functioning demo. — isherwood, Feb 25 '22 at 16:49

Ramakay · Answer 1 · 2022-02-25T16:45:18.817

please post your import statements, I suspect that or surrounding code is causing your issue - I was able to get the code working if the complete code looks like below:

import React, { Component } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faHeart } from "@fortawesome/free-solid-svg-icons";

class App extends Component {
  render() {
    return (
      <div className="container w-50">
        <div className="row">
            <button>
              <FontAwesomeIcon
                icon={faHeart}
                size="2x"
                className={`transform motion-safe:group-focus:scale-110 p-1.5 z-10`}
                aria-hidden="true"
              />
            </button>
        </div>
      </div>
    );
  }
}

export default App;

https://codesandbox.io/s/react-fontawesome-forked-moi0x5?file=/src/page/App.js

score 0 · Accepted Answer · answered Mar 02 '22 at 20:01

thank you all for your answers, but I found the issue.

I was apparently missing some config and that was breaking it all with the latest version.

these needed to be added in my _app.tsx (documentation)

import { config } from "@fortawesome/fontawesome-svg-core";
import "@fortawesome/fontawesome-svg-core/styles.css";
config.autoAddCss = false;

Fontawesome icon is hidden when inside a button element

2 Answers2