How to create Music Player UI Controls Component in ReactJS?

How to use Icon Component in React JS?

Last Updated : 04 Dec, 2023

Every application requires icons for UI purposes, and integrating them with Material UI for React is seamless. Utilize the Icon Component in ReactJS effortlessly by following this straightforward approach.

Prerequisites:

Steps to create React Application And Installing Module:

Step 1: Create a React application using the following command.

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command.

cd foldername

Step 3: After creating the ReactJS application, Install the material-ui modules using the following command.

npm install @material-ui/icons

Project Structure:

Project Structure

The updated dependencies in package.json file will look like:

"dependencies": {
    "@material-ui/core": "^4.12.4",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4",
}

Example: Now write down the following code in the App.js file.

Javascript

// App.js
 
import React from "react";
import DeleteIcon from "@material-ui/icons/Delete";
import Home from "@material-ui/icons/Home";
import Person from "@material-ui/icons/Person";
 
export default function App() {
    return (
        <div style={{ display: "block", padding: 30 }}>
            <h4>How to use Icon Component in ReactJS?</h4>
            <pre>
                Sample Delete Icon: <DeleteIcon /> <br></br>
                Sample Home Icon: <Home /> <br></br>
                Sample Person Icon: <Person /> <br></br>
            </pre>
        </div>
    );
}

Step to Run Application: Run the application using the following command from the root directory of the project.

npm start

Output: Now open your browser and go to http://localhost:3000

How to create Music Player UI Controls Component in ReactJS?

gouravhammad

Improve

Article Tags :

Similar Reads

How to use List Component in ReactJS?

Lists are continuous, vertical indexes of text or images. Material UI for React has this component available for us, and it is very easy to integrate. We can use the List Component in ReactJS using the following approach. Prerequisites:NodeJS or NPMReactJSSteps to Create the React Application And In

How to use Link Component in React JS?

Material-UI provides a set of components that can be seamlessly integrated with React to create visually appealing and functional navigation elements. The Link component allows you to easily customize anchor elements with our own theme colors and typography styles. Material UI for React has this com

How to use Card Component in React JS?

Cards contain content and actions about a single subject. Material UI for React has this component available for us, and it is very easy to integrate. We can use the Card Component in ReactJS using the following approach. Prerequisites:React JS BasicsReact component lifecycleMaterial UI basicsApproa

How to use Alert Component in React JS?

React JS is a widely used JavaScript library for constructing user interfaces. It simplifies web development by adopting a component-based approach, facilitating the creation of engaging and responsive applications. An often-encountered need in applications is the presentation of alerts or notificat

How to use Skeleton Component in React JS ?

When data is not yet loaded, a Skeleton Component serves as a placeholder preview for the user. Material UI for React provides an easily integratable version of this component, and in React JS, the following approach can be employed to utilize the Skeleton Component. Prerequisites:React JSMaterial U

How to use Popper Component in ReactJS ?

A Popper is used to show the part of the content on top of another. It's an alternative feature for react-popper. Material UI for React has this component available for us, and it is simple and very easy to integrate. For perfect positioning, it uses 3rd party library which is Popper.js. Prerequisit

How to use Popover Component in ReactJS ?

A Popover is a graphical control which is a container-type element that hovers over the parent window, and it makes sure that all other interaction is blocked until it is selected. Material UI for React has this component available for us, and it is very easy to integrate. PrerequisitesA basic under

How to use Bootstrap Icons in React ?

ReactÂ is a free library for making websites look and feel cool. With React, your websites can be super interactive and lively. Itâ€™s great for making modern websites where everything happens on one page. The best part is that you can build and reuse different parts of your webpage, making it easy to

How to use Badge Component in ReactJS?

Badge generates a small badge to the top-right of its children component. Material UI for React has this component available for us, and it is very easy to integrate. We can use the Badge Component in ReactJS using the following approach. Prerequisites:NodeJS or NPMReact JSMaterial UISteps to Create

How to use React Icons in Next.js ?

Icons make the website beautiful and interactive. IconsÂ are an important part of a website's user interfaces, which are used in expressing objects, actions, and ideas. They are used to communicate the core idea and intent of a product or action and express the object visually. Here, we will learn to