### Complete Example Application

Source: https://github.com/edjonesdev/react-material-symbols/blob/main/_autodocs/quick-start.md

A full React application example demonstrating the integration of react-material-symbols. It includes state management for favorites, rendering a list of items with favorite toggles, and a header/footer with icons.

```typescript
// src/App.tsx
import 'react-material-symbols/rounded';
import { MaterialSymbol } from 'react-material-symbols';
import { useState } from 'react';
import './App.css';

export default function App() {
  const [favorites, setFavorites] = useState<string[]>([]);

  const toggleFavorite = (id: string) => {
    setFavorites(prev =>
      prev.includes(id) 
        ? prev.filter(item => item !== id)
        : [...prev, id]
    );
  };

  const items = [
    { id: '1', name: 'Home' },
    { id: '2', name: 'Settings' },
    { id: '3', name: 'Profile' },
  ];

  return (
    <div className="app">
      <header className="header">
        <MaterialSymbol icon="home" size={32} />
        <h1>My App</h1>
      </header>

      <main>
        <ul className="item-list">
          {items.map(item => (
            <li key={item.id} className="item">
              <span>{item.name}</span>
              <button 
                className="favorite-btn"
                onClick={() => toggleFavorite(item.id)}
              >
                <MaterialSymbol 
                  icon="favorite"
                  fill={favorites.includes(item.id)}
                  color={favorites.includes(item.id) ? 'red' : 'gray'}
                  size={24}
                />
              </button>
            </li>
          ))}
        </ul>
      </main>

      <footer className="footer">
        <MaterialSymbol icon="settings" size={24} />
        <MaterialSymbol icon="help" size={24} />
        <MaterialSymbol icon="info" size={24} />
      </footer>
    </div>
  );
}
```

--------------------------------

### Create React App Setup

Source: https://github.com/edjonesdev/react-material-symbols/blob/main/_autodocs/integration-examples.md

Basic setup for a Create React App project to use react-material-symbols. Ensure the import is present in your main entry point.

```typescript
// src/index.tsx
import 'react-material-symbols/rounded';
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

```

--------------------------------

### Install Dependencies

Source: https://github.com/edjonesdev/react-material-symbols/blob/main/_autodocs/README.md

Installs the necessary packages for the project.

```bash
npm install
```

--------------------------------

### Start Development Server

Source: https://github.com/edjonesdev/react-material-symbols/blob/main/_autodocs/project-overview.md

Launches the Vite development server for local testing and development.

```bash
npm run dev
```

--------------------------------

### Run Storybook

Source: https://github.com/edjonesdev/react-material-symbols/blob/main/_autodocs/project-overview.md

Starts the Storybook server for interactive component documentation on port 6006.

```bash
npm run storybook
```

--------------------------------

### Install react-material-symbols

Source: https://github.com/edjonesdev/react-material-symbols/blob/main/README.md

Install the package using npm. This command adds the library to your project's dependencies.

```bash
npm i react-material-symbols
```

--------------------------------

### Setup for Styled Components

Source: https://github.com/edjonesdev/react-material-symbols/blob/main/_autodocs/integration-examples.md

Import necessary modules and set up global styles for styled-components integration. This includes importing the icon font.

```typescript
// src/index.tsx
import 'react-material-symbols/rounded';
import React from 'react';
import ReactDOM from 'react-dom/client';
import { createGlobalStyle } from 'styled-components';
import App from './App';

const GlobalStyle = createGlobalStyle`
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
`;

ReactDOM.createRoot(document.getElementById('root')!).render(
  <>
    <GlobalStyle />
    <App />
  </>
);

```

--------------------------------

### Material Symbol with All Options

Source: https://github.com/edjonesdev/react-material-symbols/blob/main/_autodocs/README.md

A comprehensive example showcasing all available props for customizing a Material Symbol's appearance and behavior.

```typescript
<MaterialSymbol
  icon="folder"
  fill={true}
  weight={700}
  grade={-25}
  size={32}
  color="blue"
  className="my-icon"
  style={{ marginRight: '8px' }}
/>
```

--------------------------------

### Next.js Integration for Material Symbols

Source: https://github.com/edjonesdev/react-material-symbols/blob/main/_autodocs/README.md

Provides setup instructions for using Material Symbols in a Next.js application, including layout and page component examples.

```typescript
// app/layout.tsx
import 'react-material-symbols/rounded';

// app/page.tsx
'use client';
import { MaterialSymbol } from 'react-material-symbols';

export default function Home() {
  return <MaterialSymbol icon="home" />;
}
```

--------------------------------

### Next.js Basic Setup

Source: https://github.com/edjonesdev/react-material-symbols/blob/main/_autodocs/integration-examples.md

Set up the root layout in a Next.js application to include the react-material-symbols library. This ensures the icons are available throughout the app.

```typescript
// app/layout.tsx
import 'react-material-symbols/rounded';
import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'My App',
};

export default function RootLayout({
  children,
}: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}
```

--------------------------------

### React Login Form with Material Symbols

Source: https://github.com/edjonesdev/react-material-symbols/blob/main/_autodocs/integration-examples.md

This example shows a login form built with React Hook Form, incorporating Material Symbols for email, password, error, and login icons. Ensure you have 'react-hook-form' and 'react-material-symbols' installed.

```typescript
import { useForm } from 'react-hook-form';
import { MaterialSymbol } from 'react-material-symbols';

interface FormData {
  email: string;
  password: string;
}

export function LoginForm() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<FormData>();

  const onSubmit = (data: FormData) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label>
          <MaterialSymbol icon="mail" size={20} style={{ marginRight: '8px' }} />
          Email
        </label>
        <input
          type="email"
          {...register('email', { required: 'Email is required' })}
        />
        {errors.email && (
          <>
            <MaterialSymbol icon="error" color="red" />
            {errors.email.message}
          </>
        )}
      </div>

      <div>
        <label>
          <MaterialSymbol icon="lock" size={20} style={{ marginRight: '8px' }} />
          Password
        </label>
        <input
          type="password"
          {...register('password', { required: 'Password is required' })}
        />
        {errors.password && (
          <>
            <MaterialSymbol icon="error" color="red" />
            {errors.password.message}
          </>
        )}
      </div>

      <button type="submit">
        <MaterialSymbol icon="login" size={20} style={{ marginRight: '8px' }} />
        Sign In
      </button>
    </form>
  );
}
```

--------------------------------

### Styled Components Integration for Material Symbols

Source: https://github.com/edjonesdev/react-material-symbols/blob/main/_autodocs/README.md

Shows an example of creating a styled component using 'styled-components' to customize Material Symbols.

```typescript
const StyledIcon = styled(MaterialSymbol)`
  color: blue;
  cursor: pointer;
`;
```

--------------------------------

### Polymorphic Component Rendering Examples

Source: https://github.com/edjonesdev/react-material-symbols/blob/main/_autodocs/typescript-reference.md

Illustrates how the MaterialSymbol component can be rendered as different HTML elements like buttons, links, and divs.

```typescript
import { MaterialSymbol, PolymorphicMaterialSymbolProps } from 'react-material-symbols';
import { ElementType } from 'react';

// Render as button with click handler
<MaterialSymbol<'button'>
  icon="delete"
  onClick={() => {}}
  disabled={false}
/>;

// Render as link
<MaterialSymbol<'a'>
  icon="download"
  href="/download"
  target="_blank"
/>;

// Render as div with data attributes
<MaterialSymbol<'div'>
  icon="settings"
  data-testid="icon"
  data-context="admin"
/>;
```

--------------------------------

### Basic Class Combining Example

Source: https://github.com/edjonesdev/react-material-symbols/blob/main/_autodocs/utilities.md

Demonstrates the basic usage of `combineClasses` to merge two static class names.

```typescript
import { combineClasses } from './utils';

combineClasses('btn', 'btn-primary');
// Returns: 'btn btn-primary'
```

--------------------------------

### Polymorphic MaterialSymbol Component Usage Examples

Source: https://github.com/edjonesdev/react-material-symbols/blob/main/_autodocs/types.md

Demonstrates how to use the MaterialSymbol component with the 'as' prop to render it as different HTML elements, merging component-specific props.

```typescript
// Valid: button props merged with MaterialSymbolProps
<MaterialSymbol<'button'> icon="save" onClick={() => {}} />

// Valid: div props merged with MaterialSymbolProps
<MaterialSymbol<'div'> icon="home" data-testid="icon" />
```

--------------------------------

### React App Setup with Material Symbols

Source: https://github.com/edjonesdev/react-material-symbols/blob/main/_autodocs/integration-examples.md

This snippet shows the main entry point for a React application, importing the Material Symbols CSS. Ensure this import is present for the icons to render correctly.

```typescript
// src/main.tsx
import 'react-material-symbols/rounded';
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './index.css';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

```

--------------------------------

### Vite Configuration

Source: https://github.com/edjonesdev/react-material-symbols/blob/main/_autodocs/integration-examples.md

Standard Vite configuration file for a React project. No specific setup is required for react-material-symbols here, as it's handled by the entry point import.

```typescript
// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
});

```

--------------------------------

### TypeScript Usage Example

Source: https://github.com/edjonesdev/react-material-symbols/blob/main/_autodocs/configuration.md

Demonstrates how to import and use Material Symbols with TypeScript, including type definitions for icons and props. This is useful for projects requiring strict type checking.

```typescript
import { MaterialSymbol, MaterialSymbolProps, SymbolCodepoints } from 'react-material-symbols';

const icons: SymbolCodepoints[] = ['home', 'settings', 'delete'];

const renderIcon = (icon: SymbolCodepoints) => (
  <MaterialSymbol icon={icon} size={24} />
);
```

--------------------------------

### Render an Icon with Size

Source: https://github.com/edjonesdev/react-material-symbols/blob/main/_autodocs/quick-start.md

Control the size of the icon by passing a numeric value to the 'size' prop. This example renders a 'settings' icon with a size of 32 pixels.

```typescript
<MaterialSymbol icon="settings" size={32} />
```

--------------------------------

### Dynamic Icon Rendering Example

Source: https://github.com/edjonesdev/react-material-symbols/blob/main/_autodocs/configuration.md

Provides a reusable `IconButton` component that accepts an icon name as a prop for dynamic rendering. It also allows for dynamic size and color.

```typescript
interface IconButtonProps {
  icon: string;
  size?: number;
  color?: string;
  onClick?: () => void;
}

export function IconButton({ icon, size = 24, color = 'inherit', onClick }: IconButtonProps) {
  return (
    <MaterialSymbol 
      icon={icon as any}  // Type-cast for dynamic icons
      size={size}
      color={color}
      onClick={onClick}
    />
  );
}

<IconButton icon="delete" size={20} color="red" onClick={() => {}} />
```

--------------------------------

### Render a Filled Icon

Source: https://github.com/edjonesdev/react-material-symbols/blob/main/_autodocs/quick-start.md

Display a filled version of an icon by setting the 'fill' prop to true. This example shows a filled 'favorite' icon.

```typescript
<MaterialSymbol icon="favorite" fill />
```

--------------------------------

### Render a Colored Icon

Source: https://github.com/edjonesdev/react-material-symbols/blob/main/_autodocs/quick-start.md

Apply a specific color to an icon using the 'color' prop. This example renders a green 'check_circle' icon with a size of 24.

```typescript
<MaterialSymbol 
  icon="check_circle" 
  color="green" 
  size={24}
/>
```

--------------------------------

### Render a Basic Icon

Source: https://github.com/edjonesdev/react-material-symbols/blob/main/_autodocs/quick-start.md

Render a simple icon by providing the 'icon' prop to the MaterialSymbol component. For example, to display a 'home' icon.

```typescript
export default function App() {
  return <MaterialSymbol icon="home" />; 
}
```

--------------------------------

### Integration with Tailwind CSS

Source: https://github.com/edjonesdev/react-material-symbols/blob/main/_autodocs/configuration.md

Example of using the MaterialSymbol component with Tailwind CSS for styling. It shows how to apply Tailwind utility classes for size and color.

```typescript
<MaterialSymbol 
  icon="home" 
  className="w-6 h-6 text-blue-500"
/>
```

--------------------------------

### Render and Get Icon Test Utilities

Source: https://github.com/edjonesdev/react-material-symbols/blob/main/_autodocs/advanced-patterns.md

Custom utilities to simplify rendering Material Symbols in tests and retrieving them by test ID. Useful for isolated icon testing.

```typescript
import { render, screen } from '@testing-library/react';
import { MaterialSymbol, SymbolCodepoints } from 'react-material-symbols';

export function renderIcon(icon: SymbolCodepoints, testId = 'icon') {
  return render(
    <MaterialSymbol icon={icon} data-testid={testId} />
  );
}

export function getRenderedIcon(testId = 'icon') {
  return screen.getByTestId(testId);
}

// Usage in tests
test('renders icon', () => {
  renderIcon('home');
  expect(getRenderedIcon()).toBeInTheDocument();
});
```

--------------------------------

### Weight and Grade Constraints in TypeScript

Source: https://github.com/edjonesdev/react-material-symbols/blob/main/_autodocs/typescript-reference.md

This example demonstrates how to enforce type constraints on the 'weight' prop for Material Symbols. It defines valid weights and shows how TypeScript prevents the use of invalid weight values, ensuring correct icon rendering.

```typescript
import { MaterialSymbol, MaterialSymbolWeight } from 'react-material-symbols';

// Valid weights
const weights: MaterialSymbolWeight[] = [100, 200, 300, 400, 500, 600, 700, 800, 900];

// Function with weight constraint
function createWeightVariant(icon: string, weight: MaterialSymbolWeight) {
  return (
    <MaterialSymbol
      icon={icon as any}
      weight={weight}
    />
  );
}

// Type-safe calls
createWeightVariant('home', 700);
createWeightVariant('home', 999); // TypeScript error
```

--------------------------------

### Styling Material Symbols via CSS Class

Source: https://github.com/edjonesdev/react-material-symbols/blob/main/_autodocs/README.md

Shows how to apply styles to Material Symbols using a CSS class name and provides an example CSS rule.

```typescript
<MaterialSymbol icon="home" className="my-icon" />

// CSS
.my-icon {
  color: blue;
  font-size: 24px;
}
```

--------------------------------

### Create React App Component Usage

Source: https://github.com/edjonesdev/react-material-symbols/blob/main/_autodocs/integration-examples.md

Example of using the MaterialSymbol component within a React application created with Create React App. Various icons with different props are shown.

```typescript
// src/App.tsx
import { MaterialSymbol } from 'react-material-symbols';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <MaterialSymbol icon="home" size={48} />
        <h1>Welcome to CRA with Material Symbols</h1>
      </header>
      <main>
        <MaterialSymbol icon="star" fill size={32} color="gold" />
        <MaterialSymbol icon="settings" size={32} />
      </main>
    </div>
  );
}

export default App;

```

--------------------------------

### Combine CSS Classes with Falsy Filtering

Source: https://github.com/edjonesdev/react-material-symbols/blob/main/_autodocs/types.md

Example demonstrating how to use the `Classes` type with a `combineClasses` function to filter out falsy values and produce a clean string of class names.

```typescript
combineClasses('btn', 'btn-primary', false, undefined);
// Falsy values filtered; returns: 'btn btn-primary'
```

--------------------------------

### combineClasses Usage Example

Source: https://github.com/edjonesdev/react-material-symbols/blob/main/_autodocs/api-reference.md

Demonstrates how to use the combineClasses utility function to merge CSS class names. Falsy values like false and undefined are automatically filtered out.

```typescript
import { combineClasses } from './utils';

combineClasses('btn', 'btn-primary', false, undefined); 
// Returns: 'btn btn-primary'
```

--------------------------------

### Helper Function for Creating Icon Props

Source: https://github.com/edjonesdev/react-material-symbols/blob/main/_autodocs/typescript-reference.md

This advanced example provides a utility function to generate Material Symbol props with default values and optional overrides. It simplifies the creation of reusable icon configurations, enhancing code readability and maintainability.

```typescript
import { MaterialSymbol, MaterialSymbolProps, SymbolCodepoints } from 'react-material-symbols';

// Helper function to create icon props
function createIconProps(
  icon: SymbolCodepoints,
  overrides?: Partial<MaterialSymbolProps>
): MaterialSymbolProps {
  return {
    icon,
    size: 24,
    color: 'inherit',
    ...overrides
  };
}

// Create reusable prop sets
const defaultIconProps = createIconProps('home');
const largeIconProps = createIconProps('star', { size: 32, fill: true });
const customIconProps = createIconProps('settings', {
  size: 28,
  weight: 600,
  color: 'blue'
});

// Usage
<MaterialSymbol {...defaultIconProps} />;
<MaterialSymbol {...largeIconProps} />;
<MaterialSymbol {...customIconProps} />;
```

--------------------------------

### Create an Icon Button

Source: https://github.com/edjonesdev/react-material-symbols/blob/main/_autodocs/quick-start.md

Use the MaterialSymbol component within a button to create an icon button. This example shows a red 'delete' icon button that triggers a handleDelete function when clicked.

```typescript
<MaterialSymbol 
  icon="delete"
  onClick={() => handleDelete()}
  color="red"
/>
```

--------------------------------

### Create Constrained Polymorphic Icon Variants

Source: https://github.com/edjonesdev/react-material-symbols/blob/main/_autodocs/advanced-patterns.md

This example shows how to create constrained polymorphic variants of an icon component, specifically limiting the `as` prop to a predefined set of button-like elements. This enhances type safety by preventing the use of disallowed HTML elements. It ensures that only elements like 'button', 'a', or 'summary' can be used.

```typescript
import { MaterialSymbol, MaterialSymbolProps } from 'react-material-symbols';
import { ElementType, forwardRef } from 'react';

// Constrain to button-like elements
type ButtonLikeElement = 'button' | 'a' | 'summary';

export const IconButton = forwardRef<
  HTMLButtonElement | HTMLAnchorElement,
  MaterialSymbolProps & {
    as?: ButtonLikeElement;
    onClick?: () => void;
    href?: string;
  }
>(({ as = 'button', size = 24, ...props }, ref) => (
  <MaterialSymbol
    ref={ref}
    as={as}
    size={size}
    {...props}
  />
));

// Type-safe: only button-like elements allowed
<IconButton icon="save" onClick={save} />           // ✓
<IconButton icon="home" as="a" href="/" />        // ✓
<IconButton icon="delete" as="div" />             // ✗ TypeScript error
```

--------------------------------

### Type-Safe Icon References in TypeScript

Source: https://github.com/edjonesdev/react-material-symbols/blob/main/_autodocs/quick-start.md

Demonstrates how to use type-safe icon references with SymbolCodepoints in TypeScript to catch invalid icon names at compile time. Ensure the 'react-material-symbols' library is installed and imported.

```typescript
// Type-safe icon references:
import { SymbolCodepoints } from 'react-material-symbols';

const icon: SymbolCodepoints = 'home'; // ✓ Works
const icon: SymbolCodepoints = 'invalid'; // ✗ TypeScript error
```

--------------------------------

### Next.js Icon Navigation with App Router

Source: https://github.com/edjonesdev/react-material-symbols/blob/main/_autodocs/integration-examples.md

Integrates Material Symbols into navigation links within a Next.js application using the App Router. This example shows dynamic icon rendering based on navigation data.

```typescript
// components/IconNavigation.tsx
'use client';

import { MaterialSymbol, SymbolCodepoints } from 'react-material-symbols';
import Link from 'next/link';

interface NavLink {
  href: string;
  label: string;
  icon: SymbolCodepoints;
}

const links: NavLink[] = [
  { href: '/', label: 'Home', icon: 'home' },
  { href: '/about', label: 'About', icon: 'info' },
  { href: '/contact', label: 'Contact', icon: 'mail' },
];

export function IconNavigation() {
  return (
    <nav>
      {links.map((link) => (
        <Link key={link.href} href={link.href}>
          <MaterialSymbol icon={link.icon} size={24} />
          {link.label}
        </Link>
      ))}
    </nav>
  );
}
```

--------------------------------

### TypeScript Type Safety for Icons

Source: https://github.com/edjonesdev/react-material-symbols/blob/main/_autodocs/quick-start.md

Utilize TypeScript's type safety by importing SymbolCodepoints to ensure only valid icon names are used. This example defines an array of user actions using the type and maps them to buttons with MaterialSymbol icons.

```typescript
import { MaterialSymbol, SymbolCodepoints } from 'react-material-symbols';

const userActions: SymbolCodepoints[] = [
  'edit',
  'delete',
  'share',
  'download'
];

function ActionButtons() {
  return (
    <>
      {userActions.map((action) => (
        <button key={action}>
          <MaterialSymbol icon={action} size={20} />
          {action}
        </button>
      ))}
    </>
  );
}
```

--------------------------------

### Create Composed Icons with Factory

Source: https://github.com/edjonesdev/react-material-symbols/blob/main/_autodocs/advanced-patterns.md

Use this factory to compose two icons, one primary and one secondary, for layered effects. The secondary icon can be positioned and sized relative to the primary. Ensure 'react-material-symbols' is installed.

```typescript
import { MaterialSymbol, MaterialSymbolProps, SymbolCodepoints } from 'react-material-symbols';

interface IconComposition {
  primary: SymbolCodepoints;
  secondary?: SymbolCodepoints;
  size?: number;
  color?: string;
}

export function ComposedIcon({
  primary,
  secondary,
  size = 24,
  color = 'inherit',
}: IconComposition) {
  return (
    <div style={{ position: 'relative', display: 'inline-block' }}>
      <MaterialSymbol icon={primary} size={size} color={color} />
      {secondary && (
        <div style={{
          position: 'absolute',
          bottom: 0,
          right: 0,
          transform: 'translate(25%, 25%)',
        }}>
          <MaterialSymbol
            icon={secondary}
            size={size * 0.5}
            color={color}
            style={{
              backgroundColor: 'white',
              borderRadius: '50%',
              padding: '2px',
            }}
          />
        </div>
      )}
    </div>
  );
}

// Usage
<ComposedIcon primary="folder" secondary="add" size={32} />
<ComposedIcon primary="person" secondary="check" color="green" />
```

--------------------------------

### Build Project

Source: https://github.com/edjonesdev/react-material-symbols/blob/main/_autodocs/project-overview.md

Executes the build command to bundle the project. This command bundles ES and UMD formats.

```bash
npm run build
```

--------------------------------

### Vite Main Entry Point

Source: https://github.com/edjonesdev/react-material-symbols/blob/main/_autodocs/integration-examples.md

The main entry point for a Vite project. Similar to Create React App, importing the desired symbol set is crucial.

```typescript
// src/main.tsx
import 'react-material-symbols/rounded';
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.tsx';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

```

--------------------------------

### Basic Typed Component Usage

Source: https://github.com/edjonesdev/react-material-symbols/blob/main/_autodocs/typescript-reference.md

Demonstrates basic usage of the MaterialSymbol component with type checking for icon names and weights.

```typescript
import { MaterialSymbol } from 'react-material-symbols';

// Props are checked at compile time
<MaterialSymbol icon="home" size={24} />;

// TypeScript error: invalid icon name
<MaterialSymbol icon="invalid_name" />;

// TypeScript error: invalid weight
<MaterialSymbol icon="home" weight={999} />;
```

--------------------------------

### Basic Material Symbols

Source: https://github.com/edjonesdev/react-material-symbols/blob/main/_autodocs/README.md

Demonstrates how to render Material Symbols with different configurations like size, fill, and color.

```typescript
// Simple icon
<MaterialSymbol icon="star" />

// With size
<MaterialSymbol icon="settings" size={32} />

// Filled
<MaterialSymbol icon="favorite" fill />

// Colored
<MaterialSymbol icon="check_circle" color="green" size={24} />
```

--------------------------------

### Run Tests

Source: https://github.com/edjonesdev/react-material-symbols/blob/main/_autodocs/project-overview.md

Executes the test suite using Vitest with a jsdom environment.

```bash
npm run test
```

--------------------------------

### Format Code with Prettier

Source: https://github.com/edjonesdev/react-material-symbols/wiki/Home

Automatically format code according to project standards using Prettier. This command should be run before committing.

```bash
npm run prettier:write
```

--------------------------------

### Create React App Integration for Material Symbols

Source: https://github.com/edjonesdev/react-material-symbols/blob/main/_autodocs/README.md

Shows the necessary import for using Material Symbols in a Create React App project.

```typescript
// src/index.tsx
import 'react-material-symbols/rounded';
```

--------------------------------

### Test Material Symbol Icon Rendering

Source: https://github.com/edjonesdev/react-material-symbols/blob/main/_autodocs/integration-examples.md

These tests verify that Material Symbols are rendered correctly and have the expected styles when used with React Testing Library. Ensure '@testing-library/react' and 'react-material-symbols' are installed.

```typescript
import { render, screen } from '@testing-library/react';
import { MaterialSymbol } from 'react-material-symbols';

test('renders material symbol icon', () => {
  render(
    <MaterialSymbol
      icon="home"
      data-testid="home-icon"
      size={24}
    />
  );

  const icon = screen.getByTestId('home-icon');
  expect(icon).toBeInTheDocument();
  expect(icon).toHaveStyle('font-size: 24px');
});

test('icon with color styling', () => {
  render(
    <MaterialSymbol
      icon="star"
      color="gold"
      data-testid="star-icon"
    />
  );

  const icon = screen.getByTestId('star-icon');
  expect(icon).toHaveStyle('color: gold');
});
```

--------------------------------

### Create React App Import

Source: https://github.com/edjonesdev/react-material-symbols/blob/main/_autodocs/configuration.md

Set up Material Symbols import for a Create React App project by adding the import statement to src/index.tsx. This makes icons available throughout the application.

```typescript
// src/index.tsx
import 'react-material-symbols/rounded';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));
```

--------------------------------

### Type-Safe Icon List

Source: https://github.com/edjonesdev/react-material-symbols/blob/main/_autodocs/typescript-reference.md

Shows how to create a type-safe list of valid icon names using SymbolCodepoints.

```typescript
import { SymbolCodepoints } from 'react-material-symbols';

const navigationIcons: SymbolCodepoints[] = [
  'home',
  'settings',
  'help',
  'logout'
];

// TypeScript error: not a valid icon
const invalid: SymbolCodepoints = 'invalid';
```

--------------------------------

### Next.js Using Icons in a Page

Source: https://github.com/edjonesdev/react-material-symbols/blob/main/_autodocs/integration-examples.md

Demonstrates how to use the MaterialSymbol component within a Next.js page. Ensure the component is marked with 'use client' for client-side rendering.

```typescript
// app/page.tsx
'use client';

import { MaterialSymbol } from 'react-material-symbols';

export default function Home() {
  return (
    <main>
      <h1>
        <MaterialSymbol icon="home" size={32} />
        Welcome
      </h1>
      <p>
        <MaterialSymbol icon="info" size={20} style={{ marginRight: '8px' }} />
        This is a Next.js app with Material Symbols
      </p>
    </main>
  );
}
```

--------------------------------

### Display Data Fetching Status with React Query

Source: https://github.com/edjonesdev/react-material-symbols/blob/main/_autodocs/integration-examples.md

Use this snippet to show loading, error, or success states using Material Symbols with React Query. Ensure you have '@tanstack/react-query' and 'react-material-symbols' installed.

```typescript
import { useQuery } from '@tanstack/react-query';
import { MaterialSymbol } from 'react-material-symbols';

export function DataList() {
  const { data, isLoading, isError, error } = useQuery({
    queryKey: ['items'],
    queryFn: async () => {
      const res = await fetch('/api/items');
      return res.json();
    },
  });

  if (isLoading) {
    return (
      <div>
        <MaterialSymbol icon="schedule" className="animate-spin" />
        Loading...
      </div>
    );
  }

  if (isError) {
    return (
      <div>
        <MaterialSymbol icon="error" color="red" />
        Error: {error?.message}
      </div>
    );
  }

  return (
    <div>
      <MaterialSymbol icon="check_circle" color="green" />
      {data?.length} items loaded
    </div>
  );
}
```

--------------------------------

### Linting Commands

Source: https://github.com/edjonesdev/react-material-symbols/blob/main/_autodocs/README.md

Runs ESLint for code quality checks and Prettier for code formatting checks.

```bash
npm run eslint
```

```bash
npm run prettier:check
```

--------------------------------

### Create a Fully Generic Polymorphic Icon Wrapper

Source: https://github.com/edjonesdev/react-material-symbols/blob/main/_autodocs/advanced-patterns.md

This snippet demonstrates how to create a fully generic wrapper component for Material Symbols that can render as any HTML element. It uses `forwardRef` and `PolymorphicMaterialSymbolProps` to achieve this flexibility. Usage supports all valid HTML element types.

```typescript
import { MaterialSymbol, PolymorphicMaterialSymbolProps } from 'react-material-symbols';
import { ElementType, forwardRef } from 'react';

export const PolymorphicIcon = forwardRef<
  any,
  PolymorphicMaterialSymbolProps<'span'> & { size?: number }
>(({ size = 24, ...props }, ref) => (
  <MaterialSymbol ref={ref} size={size} {...props} />
));

// Usage supports all element types
<PolymorphicIcon icon="home" as="button" onClick={handler} />
<PolymorphicIcon icon="settings" as="a" href="/settings" />
<PolymorphicIcon icon="delete" as="div" data-testid="delete-icon" />
```

--------------------------------

### Root Application Import with Icon Usage

Source: https://github.com/edjonesdev/react-material-symbols/blob/main/_autodocs/configuration.md

Demonstrates importing a Material Symbols font variant and using the MaterialSymbol component in your root application file. Ensure only one variant is imported to optimize bundle size.

```typescript
// src/App.tsx or src/main.tsx
import 'react-material-symbols/rounded';

import { MaterialSymbol } from 'react-material-symbols';

export default function App() {
  return <MaterialSymbol icon="home" />;
}
```

--------------------------------

### Adjust Icon Weight

Source: https://github.com/edjonesdev/react-material-symbols/blob/main/_autodocs/quick-start.md

Modify the stroke weight of an icon using the 'weight' prop. A value of 700 results in a heavier stroke. This example displays a 'folder' icon with adjusted weight and size.

```typescript
<MaterialSymbol 
  icon="folder" 
  weight={700}  // Heavier stroke
  size={24}
/>
```

--------------------------------

### Accessing and Filtering Icon Names

Source: https://github.com/edjonesdev/react-material-symbols/blob/main/_autodocs/icon-names.md

Import SymbolCodepointsArray to get all icon names, filter them by a pattern, or select a random icon for use with the MaterialSymbol component. This ensures type-safe access to the icon catalog.

```typescript
import { SymbolCodepointsArray } from 'react-material-symbols';

// Get all icon names
const allIcons = SymbolCodepointsArray;

// Filter icons by name pattern
const searchIcons = allIcons.filter(icon => icon.includes('home'));

// Render a random icon
const randomIcon = allIcons[Math.floor(Math.random() * allIcons.length)];
<MaterialSymbol icon={randomIcon} />
```

--------------------------------

### Styling Material Symbols via Props

Source: https://github.com/edjonesdev/react-material-symbols/blob/main/_autodocs/README.md

Demonstrates various props for styling Material Symbols directly, including size, weight, grade, color, and fill.

```typescript
// Size
<MaterialSymbol icon="home" size={24} />

// Weight (thickness)
<MaterialSymbol icon="settings" weight={700} />

// Grade (fine adjustment)
<MaterialSymbol icon="folder" grade={-25} />

// Color
<MaterialSymbol icon="star" color="gold" />

// Fill style
<MaterialSymbol icon="favorite" fill />
```

--------------------------------

### Adjust Icon Grade

Source: https://github.com/edjonesdev/react-material-symbols/blob/main/_autodocs/quick-start.md

Fine-tune the visual appearance of an icon with the 'grade' prop. A negative value, like -25, results in a thinner appearance. This example shows a 'folder' icon with an adjusted grade and size.

```typescript
<MaterialSymbol 
  icon="folder" 
  grade={-25}   // Thinner appearance
  size={24}
/>
```

--------------------------------

### Dynamic Icon Rendering with Type Assertion

Source: https://github.com/edjonesdev/react-material-symbols/blob/main/_autodocs/typescript-reference.md

Demonstrates rendering icons dynamically based on a string input, requiring a type assertion to SymbolCodepoints.

```typescript
import { MaterialSymbol, SymbolCodepoints } from 'react-material-symbols';

interface DynamicIconProps {
  iconName: string;
}

export function DynamicIcon({ iconName }: DynamicIconProps) {
  // Type assertion required for dynamic values
  const icon = iconName as SymbolCodepoints;
  return <MaterialSymbol icon={icon} />;
}

// Usage
<DynamicIcon iconName={userSelectedIcon} />;
```

--------------------------------

### Configure Icon Size

Source: https://github.com/edjonesdev/react-material-symbols/blob/main/_autodocs/configuration.md

Set the display size of the icon in pixels using the 'size' prop.

```typescript
<MaterialSymbol 
  icon="home" 
  size={48}    // 48px width and height
/>
```

--------------------------------

### Settings Icons

Source: https://github.com/edjonesdev/react-material-symbols/blob/main/_autodocs/icon-names.md

Icons for accessing and managing application settings and configurations.

```typescript
<MaterialSymbol icon="settings" />
<MaterialSymbol icon="tune" />
<MaterialSymbol icon="admin_panel_settings" />
```

--------------------------------

### Button Component with Material Symbol and Tailwind

Source: https://github.com/edjonesdev/react-material-symbols/blob/main/_autodocs/integration-examples.md

An example of a button component that includes a Material Symbol icon and text, styled using Tailwind CSS classes. This demonstrates combining icons with text in a functional UI element.

```typescript
import { MaterialSymbol } from 'react-material-symbols';

export function IconButton() {
  return (
    <button className="flex items-center gap-2 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
      <MaterialSymbol icon="download" size={20} />
      Download
    </button>
  );
}

```

--------------------------------

### Render Icon with Custom Element

Source: https://github.com/edjonesdev/react-material-symbols/blob/main/_autodocs/quick-start.md

Use the 'as' prop to render the icon within a different HTML element, such as a 'div'. The 'className' prop can be used for custom styling. This example renders a 'home' icon as a div with a specific class.

```typescript
<MaterialSymbol 
  icon="home" 
  as="div" 
  className="custom-icon"
/>
```

--------------------------------

### Applying Classes to MaterialSymbol Component

Source: https://github.com/edjonesdev/react-material-symbols/blob/main/_autodocs/utilities.md

Demonstrates how to use `combineClasses` to generate a class string for the `MaterialSymbol` component, including active and size variants.

```typescript
import { MaterialSymbol } from 'react-material-symbols';
import { combineClasses } from './utils';

interface IconProps {
  icon: string;
  isActive?: boolean;
  size?: 'sm' | 'md' | 'lg';
}

export function Icon({ icon, isActive, size }: IconProps) {
  const classes = combineClasses(
    'material-icon',
    isActive && 'material-icon--active',
    size === 'sm' && 'material-icon--small',
    size === 'md' && 'material-icon--medium',
    size === 'lg' && 'material-icon--large'
  );

  return <MaterialSymbol icon={icon as any} className={classes} />;
}
```

--------------------------------

### Basic Usage of MaterialSymbol Component

Source: https://github.com/edjonesdev/react-material-symbols/blob/main/README.md

Demonstrates how to import and use the MaterialSymbol component in a React application. Ensure you import the desired style variant (e.g., 'rounded') in your root file.

```tsx
import { MaterialSymbol } from 'react-material-symbols';
import 'react-material-symbols/rounded'; // Place in your root app file. There are also `sharp` and `outlined` variants.

export default function App() {
  return (
    <MaterialSymbol icon="folder" size={24} fill grade={-25} color='red' />
  )
}
```

--------------------------------

### Icon Theme Context Provider and Consumer

Source: https://github.com/edjonesdev/react-material-symbols/blob/main/_autodocs/advanced-patterns.md

Provides a theme context for icons, allowing centralized control over size, color, and weight. Child components can consume this theme or override it.

```typescript
import { createContext, useContext, ReactNode } from 'react';
import { MaterialSymbol, MaterialSymbolProps } from 'react-material-symbols';

interface IconTheme {
  size: number;
  color: string;
  weight?: MaterialSymbolProps['weight'];
}

const IconThemeContext = createContext<IconTheme | null>(null);

export function IconThemeProvider({
  theme,
  children,
}: { 
  theme: IconTheme;
  children: ReactNode;
}) {
  return (
    <IconThemeContext.Provider value={theme}>
      {children}
    </IconThemeContext.Provider>
  );
}

export function ThemedIcon(props: MaterialSymbolProps) {
  const theme = useContext(IconThemeContext);
  
  return (
    <MaterialSymbol
      size={theme?.size ?? 24}
      color={theme?.color ?? 'inherit'}
      weight={theme?.weight}
      {...props}
    />
  );
}

// Usage
<IconThemeProvider theme={{ size: 32, color: 'blue', weight: 700 }}>
  <ThemedIcon icon="home" />
  <ThemedIcon icon="settings" />
  <ThemedIcon icon="help" color="red" /> {/* Overrides theme */}
</IconThemeProvider>
```

--------------------------------

### Package Exports Configuration

Source: https://github.com/edjonesdev/react-material-symbols/blob/main/_autodocs/project-overview.md

This JSON defines the package exports for the library, specifying entry points for different module systems (ES Module, UMD) and direct paths for CSS files.

```json
{
  "main": "./dist/index.umd.js",
  "module": "./dist/index.es.js",
  "types": "./dist/index.d.ts",
  "exports": {
    ".": {
      "import": "./dist/index.es.js",
      "require": "./dist/index.umd.js",
      "types": "./dist/index.d.ts"
    },
    "./sharp": "./dist/sharp.css",
    "./rounded": "./dist/rounded.css",
    "./outlined": "./dist/outlined.css"
  }
}
```

--------------------------------

### React Icon Button with CSS

Source: https://github.com/edjonesdev/react-material-symbols/blob/main/_autodocs/styling-guide.md

Create a clickable icon button using MaterialSymbol and custom CSS. Ensure the 'icon-button' class is applied for styling.

```typescript
<button 
  className="icon-button"
  onClick={handleClick}
>
  <MaterialSymbol 
    icon="delete" 
    size={24}
    color="currentColor"
  />
</button>
```

```css
/* CSS */
.icon-button {
  border: 1px solid #ddd;
  background: white;
  padding: 8px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-button:hover {
  background: #f5f5f5;
}
```

--------------------------------

### Linting Commands

Source: https://github.com/edjonesdev/react-material-symbols/blob/main/_autodocs/project-overview.md

Commands for checking and fixing code style with ESLint and Prettier.

```bash
npm run eslint          # Check
npm run eslint:fix      # Fix
npm run prettier:check  # Check
npm run prettier:write  # Format
```

--------------------------------

### Configure Icon Color

Source: https://github.com/edjonesdev/react-material-symbols/blob/main/_autodocs/configuration.md

Set the color of the icon using various valid CSS color formats.

```typescript
<MaterialSymbol 
  icon="heart" 
  color="red"
/>

<MaterialSymbol 
  icon="heart" 
  color="#FF0000"
/>

<MaterialSymbol 
  icon="heart" 
  color="rgb(255, 0, 0)"
/>

<MaterialSymbol 
  icon="heart" 
  color="hsl(0, 100%, 50%)"
/>
```

--------------------------------

### Integration with Styled Components

Source: https://github.com/edjonesdev/react-material-symbols/blob/main/_autodocs/configuration.md

Demonstrates integrating MaterialSymbol with Styled Components. A styled component is created that wraps MaterialSymbol and applies custom styles.

```typescript
import styled from 'styled-components';

const StyledIcon = styled(MaterialSymbol)`
  font-size: 24px;
  color: #1976d2;
  margin-right: 8px;
`;

<StyledIcon icon="home" />
```

--------------------------------

### Manual Font Variation Settings with Style Prop

Source: https://github.com/edjonesdev/react-material-symbols/blob/main/_autodocs/configuration.md

Demonstrates how to manually set custom font variation settings using the `style` prop. The component merges these custom settings with automatically generated ones.

```typescript
<MaterialSymbol 
  icon="settings" 
  size={24}
  style={{
    fontVariationSettings: 'custom-axis 500'
  }}
  // Result: "custom-axis 500, "opsz" 24"
/>
```

--------------------------------

### React Icon with Label using CSS

Source: https://github.com/edjonesdev/react-material-symbols/blob/main/_autodocs/styling-guide.md

Combine a MaterialSymbol with text to create an icon-label component. Use flexbox for layout and alignment.

```typescript
<div className="icon-label">
  <MaterialSymbol icon="home" size={32} />
  <span>Home</span>
</div>
```

```css
/* CSS */
.icon-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
```

--------------------------------

### Configure Fill Style

Source: https://github.com/edjonesdev/react-material-symbols/blob/main/_autodocs/configuration.md

Control whether the icon has a solid fill or an outline using the 'fill' prop. 'false' is the default.

```typescript
<MaterialSymbol 
  icon="star" 
  fill={true}  // Solid fill
/>

<MaterialSymbol 
  icon="star" 
  fill={false} // Outline (default)
/>
```

--------------------------------

### Responsive Styling with CSS Media Queries

Source: https://github.com/edjonesdev/react-material-symbols/blob/main/_autodocs/styling-guide.md

Adjust icon font-size based on viewport width using CSS media queries. Ensure the MaterialSymbol component has a className to apply these styles.

```typescript
<MaterialSymbol 
  icon="home"
  className="responsive-icon"
/>

/* CSS */
.responsive-icon {
  font-size: 24px;
}

@media (min-width: 768px) {
  .responsive-icon {
    font-size: 32px;
  }
}

@media (min-width: 1024px) {
  .responsive-icon {
    font-size: 48px;
  }
}
```

--------------------------------

### Create Icon Sequences with Flexbox

Source: https://github.com/edjonesdev/react-material-symbols/blob/main/_autodocs/advanced-patterns.md

This pattern arranges multiple icons in a sequence, either horizontally or vertically, with customizable spacing. It leverages flexbox for layout. Requires 'react-material-symbols'.

```typescript
import { MaterialSymbol, SymbolCodepoints } from 'react-material-symbols';

interface IconSequenceProps {
  icons: SymbolCodepoints[];
  spacing?: number;
  size?: number;
  direction?: 'horizontal' | 'vertical';
}

export function IconSequence({
  icons,
  spacing = 8,
  size = 24,
  direction = 'horizontal',
}: IconSequenceProps) {
  return (
    <div
      style={{
        display: 'flex',
        flexDirection: direction === 'vertical' ? 'column' : 'row',
        gap: `${spacing}px`,
      }}>
      {icons.map((icon, i) => (
        <MaterialSymbol
          key={`${icon}-${i}`}
          icon={icon}
          size={size}
        />
      ))}
    </div>
  );
}

// Usage
<IconSequence icons={['arrow_forward', 'arrow_forward', 'arrow_forward']} />
<IconSequence
  icons={['check_circle', 'schedule', 'cancel']}
  direction="vertical"
/>
```

--------------------------------

### React Colored Icon Set with CSS

Source: https://github.com/edjonesdev/react-material-symbols/blob/main/_autodocs/styling-guide.md

Display multiple MaterialSymbols with distinct colors. Use flexbox to arrange the icons and set a base font size for scaling.

```typescript
<div className="icon-set">
  <MaterialSymbol icon="home" color="blue" />
  <MaterialSymbol icon="search" color="green" />
  <MaterialSymbol icon="settings" color="red" />
  <MaterialSymbol icon="help" color="orange" />
</div>
```

```css
/* CSS */
.icon-set {
  display: flex;
  gap: 16px;
  font-size: 32px;
}
```

--------------------------------

### Integration with Material-UI

Source: https://github.com/edjonesdev/react-material-symbols/blob/main/_autodocs/configuration.md

Shows how to integrate MaterialSymbol with Material-UI's Box component. This allows for Material-UI's styling props (sx) to be applied to the icon.

```typescript
import { Box } from '@mui/material';

<Box component={MaterialSymbol} icon="settings" sx={{ fontSize: 24, color: 'primary.main' }} />
```

--------------------------------

### Media Control Icons

Source: https://github.com/edjonesdev/react-material-symbols/blob/main/_autodocs/icon-names.md

Icons for controlling media playback, including play, pause, and stop actions.

```typescript
<MaterialSymbol icon="play_arrow" />
<MaterialSymbol icon="pause" />
<MaterialSymbol icon="stop" />
```

--------------------------------

### Material Symbol as a Custom Element

Source: https://github.com/edjonesdev/react-material-symbols/blob/main/_autodocs/README.md

Illustrates using the 'as' prop to render a Material Symbol as a different HTML element, like an anchor tag.

```typescript
<MaterialSymbol icon="home" as="a" href="/" />
```

--------------------------------

### Create a Styled Icon Component

Source: https://github.com/edjonesdev/react-material-symbols/blob/main/_autodocs/quick-start.md

Define a reusable styled icon component with props for icon name, size, color, and variant. This component maps predefined variants ('small', 'medium', 'large') to specific pixel sizes and applies styles.

```typescript
import { MaterialSymbol } from 'react-material-symbols';

interface StyledIconProps {
  icon: string;
  size?: number;
  color?: string;
  variant?: 'small' | 'medium' | 'large';
}

export function StyledIcon({
  icon,
  size = 24,
  color = 'inherit',
  variant = 'medium'
}: StyledIconProps) {
  const sizeMap = {
    small: 18,
    medium: 24,
    large: 32,
  };

  return (
    <MaterialSymbol 
      icon={icon as any}
      size={size || sizeMap[variant]}
      color={color}
      style={{ 
        verticalAlign: 'middle',
        marginRight: '8px'
      }}
    />
  );
}

// Usage:
// <StyledIcon icon="settings" variant="large" color="blue" />
```

--------------------------------

### useIcon Hook for Memoized Icon Configuration

Source: https://github.com/edjonesdev/react-material-symbols/blob/main/_autodocs/advanced-patterns.md

Use this hook to create a memoized configuration object for a Material Symbol. It's suitable for static icon configurations where performance is a concern.

```typescript
import { MaterialSymbol, SymbolCodepoints } from 'react-material-symbols';
import { useMemo } from 'react';

interface UseIconProps {
  icon: SymbolCodepoints;
  size?: number;
  color?: string;
  variant?: 'outline' | 'filled';
}

export function useIcon({ icon, size = 24, color, variant = 'outline' }: UseIconProps) {
  return useMemo(
    () => ({
      icon,
      fill: variant === 'filled',
      size,
      color,
      // Computed properties
      className: `icon icon--${variant}`,
      ariaLabel: icon.replace(/_/g, ' '),
    }),
    [icon, size, color, variant]
  );
}

// Usage
function MyComponent() {
  const homeIcon = useIcon({ icon: 'home', variant: 'filled', color: 'blue' });
  return <MaterialSymbol {...homeIcon} />;
}
```

--------------------------------

### Import Font Variant

Source: https://github.com/edjonesdev/react-material-symbols/blob/main/_autodocs/quick-start.md

Import one of the font variants into your application's root file. The 'rounded' variant is recommended.

```typescript
// Choose ONE of these:
import 'react-material-symbols/rounded';  // Recommended: rounded corners
// OR
import 'react-material-symbols/sharp';    // Sharp, angular style
// OR
import 'react-material-symbols/outlined'; // Outline/line style
```

--------------------------------

### Provide Icon Description

Source: https://github.com/edjonesdev/react-material-symbols/blob/main/_autodocs/advanced-patterns.md

This pattern associates a textual description with an icon using `aria-describedby`. This is useful for icons that convey meaning beyond their visual representation.

```typescript
import { MaterialSymbol, SymbolCodepoints } from 'react-material-symbols';

interface DescribedIconProps {
  icon: SymbolCodepoints;
  description: string;
  descriptionId?: string;
}

export function DescribedIcon({
  icon,
  description,
  descriptionId = `icon-desc-${Math.random()}`,
}: DescribedIconProps) {
  return (
    <>
      <MaterialSymbol
        icon={icon}
        aria-describedby={descriptionId}
        size={24}
      />
      <p id={descriptionId} className="sr-only">
        {description}
      </p>
    </>
  );
}
```