I am creating a react project and I'd like to know if it's okay to use FontAwesome icons on a ReactJS project that is using MaterialUI.

I tried to use the Material UI Icons and also use FontAwesome Icons but I thought that there's a repetition.

CodePudding user response：

React is completely flexible. You can use whatever you want, just don't forget about package sizes (which can get bad only in rare scenarios and certainly not with icons).

CodePudding user response：

It is generally okay to use both Material UI icons and FontAwesome icons in a React project. However, it's important to consider the potential for repetition and try to avoid using icons from both libraries that serve the same purpose. Instead, you may want to choose one library to use for all of your icons, or carefully select icons from each library that complement each other and provide a consistent visual style for your project.

Here are some examples of how you could use both Material UI icons and FontAwesome icons in your project without repeating yourself:

If you want to use icons to represent common actions like save, delete, and edit, you could use the Material UI icons for these actions. For example, you could use the <SaveIcon>, <DeleteIcon>, and <EditIcon> components from Material UI.

If you want to use icons to represent common file types like PDF, Excel, and Word documents, you could use FontAwesome icons for these file types. For example, you could use the <FontAwesomeIcon icon={['fas', 'file-pdf']} />, <FontAwesomeIcon icon={['fas', 'file-excel']} />, and <FontAwesomeIcon icon={['fas', 'file-word']} /> components from FontAwesome.

If you want to use icons to represent social media networks like Facebook, Twitter, and Instagram, you could use FontAwesome icons for these networks. For example, you could use the <FontAwesomeIcon icon={['fab', 'facebook']} />, <FontAwesomeIcon icon={['fab', 'twitter']} />, and <FontAwesomeIcon icon={['fab', 'instagram']} /> components from FontAwesome.

Remember, the key is to avoid using icons from both libraries that serve the same purpose and to carefully select icons that complement each other and provide a consistent visual style for your project.