import { Component, ChangeDetectionStrategy } from '@angular/core'; import { CommonModule } from '@angular/common'; import { FaIconComponent } from '@fortawesome/angular-fontawesome'; import { ButtonComponent } from '../../../../../ui-essentials/src/lib/components/buttons/button.component'; import { // Solid icons from shared-ui faUser, faHome, faCog, faSearch, faPlus, faEdit, faTrash, faSave, faCancel, faCheck, faTimes, faArrowLeft, faArrowRight, faChevronLeft, faChevronRight, faChevronUp, faChevronDown, faBars, faEllipsisV, faEye, faEyeSlash, faDownload, faUpload, faRefresh, faSpinner, faExclamationTriangle, faInfoCircle, faCheckCircle, faTimesCircle, faEnvelope } from '@fortawesome/free-solid-svg-icons'; import { // Regular icons from shared-ui faHeart, faBookmark, faComment, faThumbsUp } from '@fortawesome/free-regular-svg-icons'; import { // Brand icons from shared-ui faGithub, faTwitter, faLinkedin, faGoogle } from '@fortawesome/free-brands-svg-icons'; @Component({ selector: 'ui-fontawesome-demo', standalone: true, imports: [ CommonModule, FaIconComponent, ButtonComponent ], changeDetection: ChangeDetectionStrategy.OnPush, template: `

Font Awesome Icons Showcase

Font Awesome Integration

This demo showcases the Font Awesome icons available in the shared-ui library. Icons are pre-configured and ready to use across the application.

Available Categories: Solid, Regular, and Brand icons from Font Awesome

Basic Usage

faUser fa-icon [icon]="faUser"
faHome fa-icon [icon]="faHome"
faCog fa-icon [icon]="faCog"

Icon Sizes

xs: size="xs"
sm: size="sm"
lg: size="lg"
2x: size="2x"
3x: size="3x"

Solid Icons (free-solid-svg-icons)

Most commonly used icons for UI elements, actions, and navigation.

faUser User profiles, accounts
faHome Home navigation
faCog Settings
faSearch Search functionality
faPlus Add new items
faEdit Edit content
faTrash Delete items
faSave Save changes
faCheck Confirm, success
faTimes Close, dismiss
faArrowLeft Back navigation
faArrowRight Forward navigation
faDownload Download files
faUpload Upload files
faRefresh Refresh content
faSpinner Loading states

Regular Icons (free-regular-svg-icons)

Outlined versions of icons, great for secondary actions and states.

faHeart Favorites, likes
faBookmark Saved items
faComment Comments
faThumbsUp Approval

Brand Icons (free-brands-svg-icons)

Social media and company logos for external integrations.

faGithub GitHub integration
faTwitter Twitter sharing
faLinkedin LinkedIn integration
faGoogle Google services

Icon Styling & Transformations

Colors

style="color: #dc3545;"

Different Sizes

size="lg", size="2x", size="3x"

Common Use Cases

Navigation

Home
Profile
Settings
Search

Action Buttons

Add Item Edit Delete Save

Status Indicators

Success
Warning
Error
Info

Implementation Examples

1. Import the Icon

import { faUser } from '@fortawesome/free-solid-svg-icons';

2. Add to Component

export class MyComponent {
  faUser = faUser;
  faHome = faHome;
  faCog = faCog;
}

3. Basic Icon Usage

<fa-icon [icon]="faUser"></fa-icon>
<fa-icon [icon]="faHome" size="lg"></fa-icon>
<fa-icon [icon]="faCog" size="2x"></fa-icon>

4. Styled Icons

<fa-icon 
  [icon]="faHeart" 
  size="2x" 
  style="color: #dc3545;">
</fa-icon>

5. Icons in Buttons

<ui-button 
  variant="filled" 
  [icon]="faPlus" 
  iconPosition="left">
  Add Item
</ui-button>

6. Navigation with Icons

<nav class="nav-menu">
  <a href="/home">
    <fa-icon [icon]="faHome"></fa-icon> Home
  </a>
  <a href="/profile">
    <fa-icon [icon]="faUser"></fa-icon> Profile
  </a>
</nav>

7. Status Messages

<div class="status-success">
  <fa-icon [icon]="faCheckCircle"></fa-icon>
  Operation completed successfully!
</div>

<div class="status-error">
  <fa-icon [icon]="faTimesCircle"></fa-icon>
  Something went wrong.
</div>

8. Loading States

<div class="loading-container">
  <fa-icon [icon]="faSpinner"></fa-icon>
  Loading...
</div>

<ui-button 
  [disabled]="isLoading" 
  [icon]="isLoading ? faSpinner : faSave">
  {{ isLoading ? 'Saving...' : 'Save' }}
</ui-button>

Best Practices

Import Only What You Need

Only import the specific icons you're using to keep bundle size small.

import { faUser, faHome } from '@fortawesome/free-solid-svg-icons';

Use Semantic Naming

Choose icons that clearly represent their function or meaning.

faTrash for delete, faEdit for edit, faPlus for add

Consistent Sizing

Use consistent icon sizes throughout your application.

size="sm" for inline text, size="lg" for buttons

Accessibility

Add aria-labels for screen readers when icons convey important information.

<fa-icon [icon]="faUser" aria-label="User profile"></fa-icon>

Quick Reference

Actions

faPlus - Add/Create faEdit - Edit/Modify faTrash - Delete/Remove faSave - Save/Confirm faCancel - Cancel/Dismiss faRefresh - Reload/Update

Navigation

faHome - Home page faArrowLeft - Go back faArrowRight - Go forward faChevronUp - Expand up faChevronDown - Expand down faBars - Menu toggle

Status

faCheckCircle - Success faTimesCircle - Error faExclamationTriangle - Warning faInfoCircle - Information faSpinner - Loading

User Interface

faUser - User/Profile faCog - Settings faSearch - Search faEye - View/Show faEyeSlash - Hide faDownload - Download

Interactive Demo

Refresh Demo Download Examples View Source
@if (lastAction) {
{{ lastAction }}
}
`, styleUrl: './fontawesome-demo.component.scss' }) export class FontAwesomeDemoComponent { lastAction: string = ''; isLoading: boolean = false; // Export icons for template use faInfoCircle = faInfoCircle; faUser = faUser; faHome = faHome; faCog = faCog; faSearch = faSearch; faPlus = faPlus; faEdit = faEdit; faTrash = faTrash; faSave = faSave; faCancel = faCancel; faCheck = faCheck; faTimes = faTimes; faArrowLeft = faArrowLeft; faArrowRight = faArrowRight; faChevronLeft = faChevronLeft; faChevronRight = faChevronRight; faChevronUp = faChevronUp; faChevronDown = faChevronDown; faBars = faBars; faEllipsisV = faEllipsisV; faEye = faEye; faEyeSlash = faEyeSlash; faDownload = faDownload; faUpload = faUpload; faRefresh = faRefresh; faSpinner = faSpinner; faExclamationTriangle = faExclamationTriangle; faCheckCircle = faCheckCircle; faTimesCircle = faTimesCircle; faEnvelope = faEnvelope; // Regular icons faHeart = faHeart; faBookmark = faBookmark; faComment = faComment; faThumbsUp = faThumbsUp; // Brand icons faGithub = faGithub; faTwitter = faTwitter; faLinkedin = faLinkedin; faGoogle = faGoogle; refreshDemo(): void { this.lastAction = 'Demo refreshed - all selections cleared'; console.log('Demo refreshed'); } downloadDemo(): void { this.lastAction = 'Demo download initiated (simulated)'; console.log('Download demo'); } viewSource(): void { this.lastAction = 'Opening source code (simulated)'; console.log('View source'); } }