How To Use (Font Awesome, Material Design) Icons In React

How to use (Font Awesome, Material Design) Icons in React

In this post we will give you information about How to use (Font Awesome, Material Design) Icons in React. Hear we will give you detail about How to use (Font Awesome, Material Design) Icons in ReactAnd how to use it also give you demo for it if it is necessary.

we are going to learn about how to use Font Awesome, Material Design icons in react.

Installing the react-icons

First, we need to install a package called react-icons which provides us different types of icons (fontawesome, Material design, Ionicons, devicons) as a react components.

npm install react-icons --save

Using the FontAwesome Icons

App.js

import React from "react";import ReactDOM from "react-dom";import { FaAccessibleIcon } from "react-icons/fa";function App() {  return (    &lt;div className="App"&gt;      &lt;p&gt;        Accessible icon &lt;FaAccessibleIcon /&gt;      &lt;/p&gt;    &lt;/div&gt;  );}export default App;

In the above code, we first imported FaAcessibleIcon from the react-icons/fa package and used itas a component.

Changing the icon sizes

We can change the icon size by adding a size prop to the Icon component.

App.js

import React from "react";import ReactDOM from "react-dom";<span>import { FaAccessibleIcon } from "react-icons/fa";function App() {  return (    &lt;div className="App"&gt;      &lt;p&gt;        Accessible icon &lt;FaAccessibleIcon size="50px" /&gt;      &lt;/p&gt;    &lt;/div&gt;  );}export default App;

Changing the Icon colors

We can also change the icon color by adding a color prop to the Icon component.

App.js

import React from "react";import ReactDOM from "react-dom";import { FaAccessibleIcon } from "react-icons/fa";function App() {  return (    &lt;div className="App"&gt;      &lt;p&gt;        Accessible icon &lt;FaAccessibleIcon size="50px" color="red" /&gt;      &lt;/p&gt;    &lt;/div&gt;  );}export default App;

Using Material Design icons

Similarly, we can import Material Design icons by changing the package path to react-icons/md.

App.js

import React from "react";import ReactDOM from "react-dom";<span>import { MdDns } from "react-icons/md";function App() {  return (    &lt;div className="App"&gt;      &lt;p&gt;        Dns Icon &lt;MdDns size="30px" color="green" /&gt;      &lt;/p&gt;    &lt;/div&gt;  );}export default App;

You can checkout all available icon names in react-icons website.

Hope this code and post will helped you for implement How to use (Font Awesome, Material Design) Icons in React. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github