Creat-react-app Use Material-design-icons

Updated date Jan 17, 2020

46.3k
7

In this article, you will learn 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

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' ;
exportclass 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>
)
}
}
exportdefault MatIcon

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

How To Use Material UI Icons In ReactJS Application

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' ;
exportclass 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>
)
}
}
exportdefault Maticon1

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

How To Use Material UI Icons In ReactJS Application

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' ;
exportclass 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>
)
}
}
exportdefault 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>
);
}
exportdefault App;

Now run the project and check result.

How To Use Material UI Icons In ReactJS Application

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.