Astro Icon Setup

npm install astro-icon @iconify-json/mdi

import icon from 'astro-icon';

export default defineConfig({
  integrations: [
    icon({
      include: {
        mdi: ['*'], // Include all MDI icons
      },
    }),
    // ... other integrations
  ],
});

icon({
  include: {
    mdi: [
      'check',
      'close',
      'menu',
      'arrow-right',
      'email',
      'phone',
    ],
  },
})

icon({
  include: {
    mdi: ['*'], // All Material Design Icons
  },
})

---
import { Icon } from 'astro-icon/components';
---

<Icon name="mdi:check" />
<Icon name="mdi:email" />
<Icon name="mdi:phone" />

<Icon name="mdi:check" size={24} />
<Icon name="mdi:email" size={32} />
<Icon name="mdi:star" size="3rem" />

<!-- Tailwind classes -->
<Icon name="mdi:check" class="text-green-500" />
<Icon name="mdi:close" class="text-red-500" />
<Icon name="mdi:info" class="text-blue-500" />

<Icon 
  name="mdi:heart" 
  class="text-red-500 hover:text-red-600 transition"
  size={28}
/>

<Icon name="mdi:home" />
<Icon name="mdi:account" />
<Icon name="mdi:settings" />
<Icon name="mdi:email" />
<Icon name="mdi:phone" />
<Icon name="mdi:cart" />

# Font Awesome
npm install @iconify-json/fa6-solid

# Heroicons
npm install @iconify-json/heroicons

# Bootstrap Icons
npm install @iconify-json/bi

icon({
  include: {
    mdi: ['*'],
    'fa6-solid': ['user', 'heart', 'star'],
    heroicons: ['*'],
  },
})

<Icon name="fa6-solid:user" />
<Icon name="heroicons:home" />
<Icon name="bi:github" />

<button class="flex items-center gap-2 px-4 py-2 bg-primary text-white rounded">
  <Icon name="mdi:email" size={20} />
  <span>Contact Us</span>
</button>

<ul class="space-y-3">
  <li class="flex items-center gap-2">
    <Icon name="mdi:check" class="text-green-500" />
    <span>Fast delivery</span>
  </li>
  <li class="flex items-center gap-2">
    <Icon name="mdi:check" class="text-green-500" />
    <span>24/7 support</span>
  </li>
  <li class="flex items-center gap-2">
    <Icon name="mdi:check" class="text-green-500" />
    <span>Money back guarantee</span>
  </li>
</ul>

<div class="flex gap-4">
  <a href="https://facebook.com" class="text-gray-600 hover:text-primary">
    <Icon name="mdi:facebook" size={24} />
  </a>
  <a href="https://twitter.com" class="text-gray-600 hover:text-primary">
    <Icon name="mdi:twitter" size={24} />
  </a>
  <a href="https://instagram.com" class="text-gray-600 hover:text-primary">
    <Icon name="mdi:instagram" size={24} />
  </a>
  <a href="https://linkedin.com" class="text-gray-600 hover:text-primary">
    <Icon name="mdi:linkedin" size={24} />
  </a>
</div>

---
const features = [
  { icon: 'mdi:rocket', title: 'Fast', description: 'Lightning speed' },
  { icon: 'mdi:shield-check', title: 'Secure', description: 'Bank-level security' },
  { icon: 'mdi:chart-line', title: 'Scalable', description: 'Grows with you' },
];
---

<div class="grid grid-cols-3 gap-6">
  {features.map(feature => (
    <div class="text-center p-6 bg-white rounded-lg shadow">
      <Icon name={feature.icon} class="text-primary mx-auto mb-4" size={48} />
      <h3 class="text-xl font-bold mb-2">{feature.title}</h3>
      <p class="text-gray-600">{feature.description}</p>
    </div>
  ))}
</div>

---
interface Props {
  status: 'success' | 'error' | 'warning';
}

const { status } = Astro.props;

const iconMap = {
  success: { name: 'mdi:check-circle', color: 'text-green-500' },
  error: { name: 'mdi:alert-circle', color: 'text-red-500' },
  warning: { name: 'mdi:alert', color: 'text-yellow-500' },
};

const { name, color } = iconMap[status];
---

<Icon name={name} class={color} size={24} />

<Icon 
  name="mdi:loading" 
  class="animate-spin text-primary"
  size={32}
/>

<Icon 
  name="mdi:heart" 
  class="hover:scale-110 transition-transform text-red-500"
  size={24}
/>

---
// src/components/StatusIcon.astro
interface Props {
  type: 'success' | 'error' | 'info' | 'warning';
  size?: number;
}

const { type, size = 24 } = Astro.props;

const config = {
  success: { icon: 'mdi:check-circle', class: 'text-green-500' },
  error: { icon: 'mdi:close-circle', class: 'text-red-500' },
  info: { icon: 'mdi:information', class: 'text-blue-500' },
  warning: { icon: 'mdi:alert', class: 'text-yellow-500' },
};

const { icon, class: className } = config[type];
---

<Icon name={icon} class={className} size={size} />

import StatusIcon from '@/components/StatusIcon.astro';

<StatusIcon type="success" size={28} />
<StatusIcon type="error" />

// astro.config.mjs
icon({
  include: {
    mdi: [
      'check', 'close', 'menu', 'email', 'phone',
      'facebook', 'twitter', 'instagram', 'linkedin',
      'home', 'cart', 'user', 'settings',
    ],
  },
})

<Icon 
  name="mdi:check" 
  class="text-green-500 hover:text-green-600 transition-colors"
/>

<Icon 
  name="mdi:star" 
  style="color: gold; filter: drop-shadow(0 0 2px rgba(255, 215, 0, 0.5));"
/>

<Icon name="mdi:heart" class="favorite-icon" />

<style>
  .favorite-icon {
    color: red;
    transition: transform 0.2s;
  }
  
  .favorite-icon:hover {
    transform: scale(1.2);
  }
</style>

<Icon name="mdi:star" aria-hidden="true" />

<Icon name="mdi:email" aria-label="Email us" />

<button>
  <Icon name="mdi:close" aria-label="Close dialog" />
</button>

<Icon name="mdi:menu" />           <!-- Hamburger menu -->
<Icon name="mdi:close" />          <!-- Close/X -->
<Icon name="mdi:chevron-down" />   <!-- Dropdown arrow -->
<Icon name="mdi:chevron-right" />  <!-- Next arrow -->
<Icon name="mdi:search" />         <!-- Search -->

<Icon name="mdi:plus" />           <!-- Add -->
<Icon name="mdi:delete" />         <!-- Delete -->
<Icon name="mdi:pencil" />         <!-- Edit -->
<Icon name="mdi:content-copy" />   <!-- Copy -->
<Icon name="mdi:download" />       <!-- Download -->

<Icon name="mdi:check" />          <!-- Success -->
<Icon name="mdi:close" />          <!-- Error -->
<Icon name="mdi:alert" />          <!-- Warning -->
<Icon name="mdi:information" />    <!-- Info -->
<Icon name="mdi:loading" />        <!-- Loading -->

<Icon name="mdi:facebook" />
<Icon name="mdi:twitter" />
<Icon name="mdi:instagram" />
<Icon name="mdi:linkedin" />
<Icon name="mdi:youtube" />
<Icon name="mdi:github" />