Cannot show toggle icon of FontAwesomeIcon in React

Question

I have a problem with showing a toggle off icon in my React app:
The icon is not appearing on the screen.
How can I fix that?

Here is my code snippet shown below.

import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
<FontAwesomeIcon icon="fa-solid fa-toggle-off" onClick={switchTheme}/>

Answer 1

As said in the doc it's not exactly how you display a FontAwesome object

You have 2 possible methods :

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

<FontAwesomeIcon icon={["fas", "toggle-off"]} />

or

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {faToggleOff} from "@fortawesome/free-solid-svg-icons";

<FontAwesomeIcon icon={faToggleOff} />