How to use Material UI Icons ?

Material UI Icons is a library that provides a collection of pre-designed icons following Google’s Material Design guidelines. These icons can be easily integrated into React applications to enhance visual elements and improve user experience.

Installation

// Package containing Material UI icon components.
npm install @mui/icons-material

Features

• Rich Icon Collection: Material UI Icons offer many icons covering various categories such as action, alert, communication, and more.
• Easy Integration: Icons can be easily imported and used as React components, simplifying the process of adding icons to the application.
• Customization: Icons can be customized using props like size, color, and style to fit the design requirements of the application.
• SVG Icons: Material UI Icons are SVG-based, ensuring scalability and crispness on different screen resolutions.

Example

import React from 'react';
import { Alarm } from '@mui/icons-material';

function MyAlarmIcon() {
  return <Alarm fontSize="large" color="primary" />;
}

export default MyAlarmIcon;