> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/react-icons/react-icons/llms.txt
> Use this file to discover all available pages before exploring further.

# Material Design Icons

> Use 4,300+ Material Design icons from Google in your React application

Material Design Icons is the official icon library from Google, providing a comprehensive set of icons that follow Material Design guidelines.

## Installation

Material Design icons are included with React Icons:

```bash theme={null}
npm install react-icons
```

## Import Path

```jsx theme={null}
import { MdHome, MdSettings, MdSearch } from 'react-icons/md';
```

## Library Details

<CardGroup cols={2}>
  <Card title="Material Design Icons" icon="material-symbols">
    **Icon Count:** 4,341

    **Version:** 4.0.0

    **Import:** `react-icons/md`

    **Prefix:** `Md`, `MdOutline`
  </Card>

  <Card title="License & Project" icon="link">
    **License:** [Apache License 2.0](https://github.com/google/material-design-icons/blob/master/LICENSE)

    **Project:** [google.github.io/material-design-icons](http://google.github.io/material-design-icons/)

    **Source:** Google
  </Card>
</CardGroup>

## Usage Examples

### Basic Usage

```jsx theme={null}
import { MdHome, MdSettings, MdSearch } from 'react-icons/md';

function App() {
  return (
    <div>
      <MdHome />
      <MdSettings />
      <MdSearch />
    </div>
  );
}
```

### Icon Variants

Material Design icons come in two main variants:

<Tabs>
  <Tab title="Filled (Default)">
    ```jsx theme={null}
    import {
      MdHome,
      MdFavorite,
      MdAccountCircle,
      MdStar
    } from 'react-icons/md';

    function FilledIcons() {
      return (
        <div>
          <MdHome />           {/* Filled home */}
          <MdFavorite />       {/* Filled heart */}
          <MdAccountCircle />  {/* Filled account */}
          <MdStar />           {/* Filled star */}
        </div>
      );
    }
    ```

    <Note>
      Default Material Design icons use the `Md` prefix and are filled.
    </Note>
  </Tab>

  <Tab title="Outlined">
    ```jsx theme={null}
    import {
      MdOutlineHome,
      MdOutlineFavoriteBorder,
      MdOutlineAccountCircle,
      MdOutlineStarBorder
    } from 'react-icons/md';

    function OutlinedIcons() {
      return (
        <div>
          <MdOutlineHome />           {/* Outlined home */}
          <MdOutlineFavoriteBorder /> {/* Outlined heart */}
          <MdOutlineAccountCircle />  {/* Outlined account */}
          <MdOutlineStarBorder />     {/* Outlined star */}
        </div>
      );
    }
    ```

    <Note>
      Outlined icons use the `MdOutline` prefix.
    </Note>
  </Tab>
</Tabs>

### Navigation Icons

```jsx theme={null}
import {
  MdHome,
  MdExplore,
  MdNotifications,
  MdSettings,
  MdAccountCircle,
  MdMenu,
  MdArrowBack
} from 'react-icons/md';

function Navigation() {
  return (
    <nav>
      <button><MdMenu /> Menu</button>
      <button><MdArrowBack /> Back</button>
      <a href="#"><MdHome /> Home</a>
      <a href="#"><MdExplore /> Explore</a>
      <a href="#"><MdNotifications /> Notifications</a>
      <a href="#"><MdSettings /> Settings</a>
      <a href="#"><MdAccountCircle /> Profile</a>
    </nav>
  );
}
```

### Action Icons

```jsx theme={null}
import {
  MdAdd,
  MdEdit,
  MdDelete,
  MdSave,
  MdDownload,
  MdShare,
  MdPrint,
  MdSearch,
  MdFilter,
  MdSort
} from 'react-icons/md';

function Actions() {
  return (
    <div className="actions">
      <button><MdAdd /> Add</button>
      <button><MdEdit /> Edit</button>
      <button><MdDelete /> Delete</button>
      <button><MdSave /> Save</button>
      <button><MdDownload /> Download</button>
      <button><MdShare /> Share</button>
      <button><MdPrint /> Print</button>
      <button><MdSearch /> Search</button>
      <button><MdFilter /> Filter</button>
      <button><MdSort /> Sort</button>
    </div>
  );
}
```

## Common Use Cases

<Tabs>
  <Tab title="Forms">
    ```jsx theme={null}
    import {
      MdEmail,
      MdLock,
      MdVisibility,
      MdVisibilityOff,
      MdCheckCircle,
      MdError
    } from 'react-icons/md';

    function LoginForm() {
      const [showPassword, setShowPassword] = React.useState(false);
      
      return (
        <form>
          <div className="input-group">
            <MdEmail />
            <input type="email" placeholder="Email" />
            <MdCheckCircle className="text-green-500" />
          </div>
          
          <div className="input-group">
            <MdLock />
            <input 
              type={showPassword ? 'text' : 'password'} 
              placeholder="Password" 
            />
            <button onClick={() => setShowPassword(!showPassword)}>
              {showPassword ? <MdVisibilityOff /> : <MdVisibility />}
            </button>
          </div>
          
          <button type="submit">Login</button>
        </form>
      );
    }
    ```
  </Tab>

  <Tab title="Status & Alerts">
    ```jsx theme={null}
    import {
      MdCheckCircle,
      MdError,
      MdWarning,
      MdInfo
    } from 'react-icons/md';

    function Alerts() {
      return (
        <div>
          <div className="alert success">
            <MdCheckCircle />
            <span>Operation completed successfully!</span>
          </div>
          
          <div className="alert error">
            <MdError />
            <span>An error occurred. Please try again.</span>
          </div>
          
          <div className="alert warning">
            <MdWarning />
            <span>This action cannot be undone.</span>
          </div>
          
          <div className="alert info">
            <MdInfo />
            <span>New features are available.</span>
          </div>
        </div>
      );
    }
    ```
  </Tab>

  <Tab title="Data Display">
    ```jsx theme={null}
    import {
      MdViewList,
      MdViewModule,
      MdViewQuilt,
      MdTableChart,
      MdBarChart,
      MdPieChart
    } from 'react-icons/md';

    function ViewControls() {
      return (
        <div className="view-controls">
          <button><MdViewList /> List</button>
          <button><MdViewModule /> Grid</button>
          <button><MdViewQuilt /> Masonry</button>
          <button><MdTableChart /> Table</button>
          <button><MdBarChart /> Bar Chart</button>
          <button><MdPieChart /> Pie Chart</button>
        </div>
      );
    }
    ```
  </Tab>

  <Tab title="Media Controls">
    ```jsx theme={null}
    import {
      MdPlayArrow,
      MdPause,
      MdStop,
      MdSkipNext,
      MdSkipPrevious,
      MdVolumeUp,
      MdVolumeOff,
      MdFullscreen
    } from 'react-icons/md';

    function MediaPlayer() {
      return (
        <div className="media-controls">
          <button><MdSkipPrevious /></button>
          <button><MdPlayArrow /></button>
          <button><MdPause /></button>
          <button><MdStop /></button>
          <button><MdSkipNext /></button>
          <button><MdVolumeUp /></button>
          <button><MdFullscreen /></button>
        </div>
      );
    }
    ```
  </Tab>
</Tabs>

## Styling Material Design Icons

### Size and Color

```jsx theme={null}
import { MdFavorite } from 'react-icons/md';
import { IconContext } from 'react-icons';

function StyledIcons() {
  return (
    <div>
      {/* Inline styles */}
      <MdFavorite 
        style={{ 
          color: '#e91e63', 
          fontSize: '32px' 
        }} 
      />
      
      {/* CSS classes (Tailwind) */}
      <MdFavorite className="text-pink-500 text-4xl" />
      
      {/* IconContext for multiple icons */}
      <IconContext.Provider 
        value={{ 
          color: '#2196f3', 
          size: '1.5em',
          className: 'material-icon'
        }}
      >
        <MdFavorite />
        <MdStar />
      </IconContext.Provider>
    </div>
  );
}
```

### Material Design Colors

```jsx theme={null}
import { MdInfo, MdCheckCircle, MdWarning, MdError } from 'react-icons/md';

function MaterialColors() {
  return (
    <div>
      <MdInfo style={{ color: '#2196F3' }} />       {/* Blue */}
      <MdCheckCircle style={{ color: '#4CAF50' }} /> {/* Green */}
      <MdWarning style={{ color: '#FF9800' }} />     {/* Orange */}
      <MdError style={{ color: '#F44336' }} />       {/* Red */}
    </div>
  );
}
```

## Icon Naming Convention

Material Design icons follow these patterns:

* **Filled icons:** `Md[IconName]` (e.g., `MdHome`, `MdStar`)
* **Outlined icons:** `MdOutline[IconName]` (e.g., `MdOutlineHome`, `MdOutlineStar`)

All icon names use PascalCase and remove hyphens from the original Material Design names:

* `account-circle` → `MdAccountCircle`
* `favorite-border` → `MdOutlineFavoriteBorder`

## Popular Material Design Icons

### Navigation

* `MdHome` - Home
* `MdMenu` - Menu/hamburger
* `MdArrowBack` - Back arrow
* `MdArrowForward` - Forward arrow
* `MdClose` - Close/X
* `MdMoreVert` - Vertical menu (⋮)
* `MdMoreHoriz` - Horizontal menu (⋯)

### Actions

* `MdAdd` - Add/plus
* `MdEdit` - Edit/pencil
* `MdDelete` - Delete/trash
* `MdSave` - Save
* `MdSearch` - Search
* `MdRefresh` - Refresh
* `MdShare` - Share

### Content

* `MdContentCopy` - Copy
* `MdContentCut` - Cut
* `MdContentPaste` - Paste
* `MdSend` - Send
* `MdDrafts` - Drafts
* `MdArchive` - Archive

### Communication

* `MdEmail` - Email
* `MdChat` - Chat
* `MdCall` - Phone call
* `MdVideocam` - Video camera
* `MdMessage` - Message

## Integration with Material-UI

Material Design icons work seamlessly with Material-UI (MUI):

```jsx theme={null}
import { Button, IconButton } from '@mui/material';
import { MdDelete, MdEdit, MdAdd } from 'react-icons/md';

function MUIIntegration() {
  return (
    <div>
      <Button startIcon={<MdAdd />}>
        Add Item
      </Button>
      
      <IconButton>
        <MdEdit />
      </IconButton>
      
      <IconButton color="error">
        <MdDelete />
      </IconButton>
    </div>
  );
}
```

## Resources

<CardGroup cols={2}>
  <Card title="Material Design Icons" icon="link" href="http://google.github.io/material-design-icons/">
    Browse the official Material Design icon gallery
  </Card>

  <Card title="Material Design Guidelines" icon="book" href="https://material.io/design/iconography/system-icons.html">
    Learn about Material Design icon principles
  </Card>

  <Card title="Search All Icons" icon="search" href="https://react-icons.github.io/react-icons/">
    Search Material Design icons in React Icons preview
  </Card>

  <Card title="All Libraries" icon="layer-group" href="/icon-libraries/all-libraries">
    Explore other icon libraries
  </Card>
</CardGroup>