font awesome brands in material UI

For developers using material UI for the first time, implementing font-awesome-brands-icon in your Material UI project might be a bit cumbersome. So here's a quick rundown of how to get started.

NB: All dependencies should be installed through your terminal and linked to your project directory.

Installing font-awesome dependencies

Add SVG Core

npm i --save @fortawesome/fontawesome-svg-core

Add the brands-icon package

npm i --save @fortawesome/free-brands-svg-icons

Add the react dependency

npm i --save @fortawesome/react-fontawesome@latest

Creating the Babel Files

Install the Babel Macros dependency

npm install babel-plugin-macros

Create a babel.config.js file in your project directory. In this file, input the code below :

module.exports = function (api) {
  return {
    plugins: ['macros'],
  }
}

Create another babel-plugin-macros.config.js file in your project directory. In this file, input the code below :

module.exports = {
  'fontawesome-svg-core': {
    'license': 'free'
  }
}

Using the font-awesome-brands-icon in your Material UI project

This example will be done using the Twitter brand icon.

Create a new file, or in an existing file, in your Material UI project;

import React from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { library } from '@fortawesome/fontawesome-svg-core'
import Grid from '@material-ui/core/Grid';
import { fas } from '@fortawesome/free-solid-svg-icons'
import { faTwitter, faFontAwesome } from '@fortawesome/free-brands-svg-icons'

library.add(fas, faTwitter, faFontAwesome)

const Footer = () => {
return (
 <div>
<Grid container direction="column">
<Grid item>
<FontAwesomeIcon icon="fa-brands fa-twitter" />
 </Grid>
 </Grid>
</div>
  )
}

export default Footer

The code above gives an easier and clearer path to using the font-awesome-brands-icon in a Material UI project.

Further Reading: fontawesome.com/docs/web/use-with/react

Implementing font-awesome-brands-icon in Material UI