"icon" props is not working as the documentation described

[namti]

Describe the bug <FontAwesomeIcon /> icon is not working as the documentation describes.

Reproducible test case Source code

Expected behavior These icon props should work.

<FontAwesomeIcon icon="coffee" />
<FontAwesomeIcon icon={['fas', 'coffee']} />
<FontAwesomeIcon icon={faCoffee} />

Desktop (please complete the following information):

• Browser [e.g. chrome, safari]
• Chrome
• Safari
• Firefox

[tickoosunny]

Yes, even not working for me :(

[Minho-Lee]

According to the docs, if you want to use icon="coffee" or icon={['fas', 'coffee']} format, you have to add icons globally first.

So in your code snippet, if you add,

import { fas, faCoffee } from "@fortawesome/free-solid-svg-icons";
import { library } from '@fortawesome/fontawesome-svg-core';

and

componentDidMount() {
    library.add(fas, faCoffee);
  }

You will see

For more info, here

[namti]

Thanks @Minho-Lee