# Icons Usage Guide

## Icon Component

The `IconComponent` is a reusable Angular component for displaying SVG icons from the design system.

### Basic Usage

```html
<app-icon name="search" category="ui"></app-icon>
```

### With Custom Size

```html
<app-icon name="location" category="navigation" [size]="32"></app-icon>
```

### Available Icons

#### UI Icons (`category="ui"`)
- `search` - Search/magnifying glass icon

#### Navigation Icons (`category="navigation"`)
- `location` - Location pin icon

#### Action Icons (`category="actions"`)
- `plus` or `add` - Plus/add icon

#### Contact Icons (`category="contact"`)
- `location` - Location pin (contact variant)
- `phone` - Phone icon
- `email` - Email/envelope icon

#### Social Icons (`category="social"`)
- `user` - User/person icon
- `instagram` - Instagram logo
- `heart` - Heart/favorite icon
- `envelope` - Envelope icon

### Component API

| Input | Type | Default | Description |
|-------|------|---------|-------------|
| `name` | `string` | `''` | Icon name (required) |
| `category` | `string` | `'ui'` | Icon category: `ui`, `navigation`, `actions`, `contact`, `social` |
| `size` | `number` | `24` | Icon size in pixels |

### Examples in Codebase

#### Header Component
```html
<app-icon name="search" category="ui" [size]="16" class="header__search-icon" />
```

#### Location Selector
```html
<app-icon name="location" category="navigation" [size]="20" class="location-selector__icon" />
```

#### Footer
```html
<app-icon name="location" category="contact" [size]="20" />
<app-icon name="phone" category="contact" [size]="20" />
<app-icon name="email" category="contact" [size]="20" />
<app-icon name="instagram" category="social" [size]="20" />
```

### Styling

Icons inherit color from their parent via `currentColor`. You can style them with CSS:

```scss
.icon {
  color: #2c2416; // Primary text color
  
  &:hover {
    color: #b43e3e; // Accent color
  }
}
```

### File Structure

Icons are located in:
```
src/assets/icons-pack/
├── ui/
│   └── ui-search.svg
├── navigation/
│   └── ui-location.svg
├── actions/
│   └── action-plus.svg
├── contact/
│   ├── contact-location.svg
│   ├── contact-phone.svg
│   └── contact-email.svg
└── social/
    ├── social-user.svg
    ├── social-instagram.svg
    ├── social-heart.svg
    └── social-envelope.svg
```