Material Icons

The MIT License is a highly popular, extremely permissive open-source license. Under the MIT License, you are officially allowed to use Material Icons in any personal, commercial, or corporate software projects completely free of charge. You can modify the icons, distribute them, sell software containing them, and even sublicense them. The only requirement is that you must preserve the original copyright notice and permission notice in all copies of the software.

npm install @mui/icons-material @mui/material @emotion/styled @emotion/react

// Note: All four packages are required. @mui/material, @emotion/styled, and @emotion/react are peer dependencies that must be installed alongside the icons package.

npm install @mui/icons-material @mui/material @emotion/styled @emotion/react

// Note: Works with Next.js App Router. Icons render in Server Components without use client. For dev performance, use path imports (import HomeIcon from "@mui/icons-material/Home") instead of barrel imports — up to 6x faster dev server startup.

// No official Vue package. @mui/icons-material is React-only.
// For Vue, use Material Design Icons community package:
// npm install @mdi/vue3 @mdi/js

// No vanilla JS package. Use Google Material Icons web font for non-React projects:
// <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
// <span class="material-icons">home</span>

import HomeIcon from '@mui/icons-material/Home'
import SearchIcon from '@mui/icons-material/Search'
import SettingsIcon from '@mui/icons-material/Settings'

// ✅ Path imports — recommended for dev performance
export default function App() {
  return (
    <div>
      <HomeIcon />
      <SearchIcon sx={{ fontSize: 24, color: 'primary.main' }} />
      <SettingsIcon sx={{ fontSize: 24, color: 'text.secondary' }} />
    </div>
  )
}

// Every icon ships in 5 style variants
// Append the variant name to the icon name (Filled has no suffix)

import HomeIcon from '@mui/icons-material/Home'              // Filled (default)
import HomeOutlinedIcon from '@mui/icons-material/HomeOutlined'       // Outlined
import HomeRoundedIcon from '@mui/icons-material/HomeRounded'         // Rounded
import HomeSharpIcon from '@mui/icons-material/HomeSharp'             // Sharp
import HomeTwoToneIcon from '@mui/icons-material/HomeTwoTone'         // TwoTone

export function IconVariants() {
  return (
    <div style={{ display: 'flex', gap: 16 }}>
      <HomeIcon />          {/* bold, solid */}
      <HomeOutlinedIcon />  {/* minimal, stroke-style */}
      <HomeRoundedIcon />   {/* friendly, rounded */}
      <HomeSharpIcon />     {/* geometric, clinical */}
      <HomeTwoToneIcon />   {/* two-color depth */}
    </div>
  )
}

// Material Icons work with Tailwind className — avoid sx prop in Tailwind projects
import SearchIcon from '@mui/icons-material/Search'
import NotificationsIcon from '@mui/icons-material/Notifications'

export function Navbar() {
  return (
    <nav className="flex items-center gap-4">
      <button className="flex items-center gap-2 text-gray-500 hover:text-gray-900">
        <SearchIcon className="h-5 w-5" />
        <span>Search</span>
      </button>
      <button aria-label="Notifications">
        <NotificationsIcon className="h-6 w-6 text-gray-600" />
      </button>
    </nav>
  )
}

import DeleteIcon from '@mui/icons-material/Delete'
import StarIcon from '@mui/icons-material/Star'
import CheckCircleIcon from '@mui/icons-material/CheckCircle'

// Sizing — use fontSize prop or sx
<DeleteIcon fontSize="small" />    // 20px
<DeleteIcon fontSize="medium" />   // 24px (default)
<DeleteIcon fontSize="large" />    // 35px
<DeleteIcon sx={{ fontSize: 48 }} />  // custom pixel value

// Color — use color prop or sx
<StarIcon color="primary" />      // theme primary color
<StarIcon color="error" />        // theme error (red)
<StarIcon color="warning" />      // theme warning (orange)
<StarIcon color="disabled" />     // muted gray
<StarIcon sx={{ color: '#6366f1' }} />  // custom hex

// Combining size and color
<CheckCircleIcon
  sx={{ fontSize: 32, color: 'success.main' }}
/>

// ❌ Barrel import — named import from package root
// Works in production but 6x slower in development mode
import { Home, Delete, Search, Star } from '@mui/icons-material'

// ✅ Path import — direct file import (recommended by MUI)
// Same bundle size in production, 6x faster dev startup
import Home from '@mui/icons-material/Home'
import Delete from '@mui/icons-material/Delete'
import Search from '@mui/icons-material/Search'
import Star from '@mui/icons-material/Star'

// For TypeScript — both patterns are fully typed, no difference

// Material Icons work in Next.js Server Components — no 'use client' needed
// They render as static SVG HTML on the server

import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined'
import CheckCircleOutlinedIcon from '@mui/icons-material/CheckCircleOutlined'

// This is a Server Component — no 'use client' directive
export function StatusBadge({ status }: { status: 'ok' | 'info' }) {
  return (
    <div className="flex items-center gap-2">
      {status === 'ok'
        ? <CheckCircleOutlinedIcon sx={{ color: 'success.main' }} />
        : <InfoOutlinedIcon sx={{ color: 'info.main' }} />
      }
    </div>
  )
}