Material-UI (MUI) includes a vast library of icons that you can easily integrate into your React applications. These icons are part of the Material Icons library, designed by Google, and are available in MUI’s @mui/icons-material package.
1. Install Material Icons
Before using Material Icons in your project, you need to install the icons package:
npm install @mui/icons-material
2. Usage of Icons
You can import any icon from @mui/icons-material and use it as a component in your JSX. Each icon in Material-UI is an SVG component.
Here’s how you can import and use an icon in your React component:
import React from 'react';
import HomeIcon from '@mui/icons-material/Home'; // Import the Home icon
function App() {
return (
<div>
<h1>Welcome to My App</h1>
<HomeIcon style={{ fontSize: 40, color: 'blue' }} /> {/* Use the icon */}
</div>
);
}
export default App;
3. Icon Styling
Material-UI icons can be styled just like any other component. You can adjust the size, color, and more via inline styles or CSS classes.
<HomeIcon style={{ fontSize: 40, color: 'red' }} />
4. List of Commonly Used Icons
Here’s a list of some popular icons from @mui/icons-material:
@mui/icons-material/AccountCircle@mui/icons-material/Home@mui/icons-material/Menu@mui/icons-material/Search@mui/icons-material/Settings@mui/icons-material/Notifications@mui/icons-material/CheckCircle@mui/icons-material/Delete@mui/icons-material/ShoppingCart@mui/icons-material/ArrowForward
5. Icons with Variants
Many icons come with different variants (filled, outlined, rounded, two-tone, sharp). You can import them similarly:
- Filled (default):
@mui/icons-material/Home - Outlined:
@mui/icons-material/HomeOutlined - Rounded:
@mui/icons-material/HomeRounded - Two-Tone:
@mui/icons-material/HomeTwoTone - Sharp:
@mui/icons-material/HomeSharp
For example, to use the Outlined version of the Home icon:
import HomeOutlinedIcon from '@mui/icons-material/HomeOutlined';
function App() {
return <HomeOutlinedIcon style={{ fontSize: 40 }} />;
}
6. Icon Buttons
You can also combine icons with MUI’s IconButton component to create clickable buttons with icons:
import React from 'react';
import IconButton from '@mui/material/IconButton';
import DeleteIcon from '@mui/icons-material/Delete';
function App() {
return (
<IconButton color="primary" aria-label="delete">
<DeleteIcon />
</IconButton>
);
}
export default App;
7. Using Icons in Buttons
Icons can be used inside buttons for better user experience and visual cues:
import React from 'react';
import Button from '@mui/material/Button';
import SendIcon from '@mui/icons-material/Send';
function App() {
return (
<Button variant="contained" endIcon={<SendIcon />}>
Send
</Button>
);
}
export default App;
Conclusion
Material-UI icons are easy to use and customizable. You can import, style, and integrate them into buttons, navigation, or any part of your React application. By leveraging the vast library of icons, you can quickly enhance the user interface of your app.
