How To Use Material UI Icons In ReactJS Application

Introduction 

 

In this article we will learn how to use Material-UI Icons in a React application.React Material UI provide more than 1000 icons. Material UI is one of the most popular UI frameworks developed by Google.The Material UI library is designed for faster, easier and developer-friendly user interface development. Now Material-UI supported by all major browsers and platforms.

 

You can check my previous articles in which we discussed the basics of Material UI, from the below mentioned links

• Add Material UI In React Application
• Add Material-UI Table In ReactJS Application
• React Material UI Expansion Panel And Dialogs

Prerequisites

• Basic knowledge of React.js
• Visual Studio Code IDE

Create ReactJS project

 

Let's first create a React application using the following command.

npx create-react-app matform

Open the newly-created project in Visual Studio Code and install Material-UI and Material-UI icons by using following commands.

 

Install Material-UI

npm install @material-ui/core --save

Install Material-UI icons

npm install @material-ui/icons

Now, right click on "src" folder and add a new component named 'MatIcon.js'. import following icons in this component.

import Home from '@material-ui/icons/Home';
import  Notifications  from '@material-ui/icons';
import ContactsIcon from '@material-ui/icons/Contacts';

 Add the following code in this component.

import React, { Component } from 'react'
import Home from '@material-ui/icons/Home';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import { Notifications } from '@material-ui/icons';
import ContactsIcon from '@material-ui/icons/Contacts';
export class MatIcon extends Component {
        render() {
                return (
                        <div>
                                <AppBar className="mrg" position="static">

                                        <Toolbar>
                                        <Home/>   <Notifications/>  <ContactsIcon/>
                                        <div style={{ 'paddingLeft': "600px" }}>   Material UI Icons</div>
                          </Toolbar>
                                </AppBar>

                                <Home/> Home Icon <br></br>
                                <Notifications/> Notification Icon<br></br>
                                <ContactsIcon/> Contact

                        </div>
                )
        }
}

export default MatIcon

Now add reference of this component in app.js file and run by using 'npm start' command,

 

Now add one more component, named 'MatIcon1.js', ,in this component we add social media icons. Add the following code in this component

import React, { Component } from 'react'
import FacebookIcon from '@material-ui/icons/Facebook';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import TwitterIcon from '@material-ui/icons/Twitter';
import LinkedInIcon from '@material-ui/icons/LinkedIn';
import MailIcon from '@material-ui/icons/Mail';
import InstagramIcon from '@material-ui/icons/Instagram';
import YouTubeIcon from '@material-ui/icons/YouTube';
export class Maticon1 extends Component {
        render() {
                return (
                        <div>
                                <AppBar className="mrg" position="static">
                                        <Toolbar>
                                                <div style={{ 'paddingLeft': "600px" }}>   Material UI Social media Icons</div>
                                        </Toolbar>
                                </AppBar>
                                <FacebookIcon/><br></br>
                                <TwitterIcon/> <br></br>
                                <LinkedInIcon/><br></br>
                                <MailIcon/><br></br>
                                <InstagramIcon/><br></br>
                                <YouTubeIcon/><br></br>

                        </div>
                )
        }
}

export default Maticon1

Now add reference of this component in app.js file and run by using 'npm start' command,

 

We also add css to the icons to change styles.

import React, { Component } from 'react'
import FacebookIcon from '@material-ui/icons/Facebook';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import YouTubeIcon from '@material-ui/icons/YouTube';
export class Maticon1 extends Component {
        render() {
                return (
                        <div>
                                <AppBar className="mrg" position="static">
                                        <Toolbar>
                                                <div style={{ 'paddingLeft': "600px" }}>   Material UI Social media Icons</div>
                                        </Toolbar>
                                </AppBar>
                                <FacebookIcon style={{ 'color': "Blue" }}/><br></br>
                                <YouTubeIcon style={{ 'color': "red" }}/><br></br>
                        </div>
                )
        }
}

export default Maticon1

Now add reference of these components in app.js file,

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Maticon1 from './Maticon1'

function App() {
  return (
    <div className="App">
      <Maticon1/>
    </div>
  );
}

export default App;

Now run the project and check result.

 

Summary

 

In this article, we learned how to use the Material-UI Icons in a React application. React Material UI provides more then 1000 icons. Material UI is one of the most popular UI frameworks developed by Google. The Material UI library is designed for faster, easier and developer friendly user interface development.