or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

configuration.md duotone-icons.md icon-components.md icon-layers.md icon-stacks.md index.md library-management.md

tile.json

Icon Layers

Layered icon compositions for creating complex visual elements like badges, notifications, and text overlays. Layers allow combining multiple icons, text, and counters into cohesive visual components.

Capabilities

FaLayersComponent

Container component for layered Font Awesome compositions.

@Component({
  selector: 'fa-layers',
  template: '<ng-content />',
  host: {
    '[class]': 'classes()',
  },
  changeDetection: ChangeDetectionStrategy.OnPush
})
class FaLayersComponent implements OnInit {
  /** Size of the layer container */
  readonly size = input<SizeProp>();
  
  /** Fixed width layout for layer alignment */
  readonly fixedWidth = input<boolean>();
}

FaLayersTextComponent

Text element within layers for adding textual content over icons.

@Component({
  selector: 'fa-layers-text',
  template: '',
  host: {
    class: 'ng-fa-layers-text',
    '[innerHTML]': 'renderedHTML()',
  }
})
class FaLayersTextComponent {
  /** Text content to display (required) */
  readonly content = input.required<string>();
  
  /** Title attribute for accessibility */
  readonly title = input<string>();
  
  /** Flip text horizontally, vertically, or both */
  readonly flip = input<FlipProp>();
  
  /** Text size */
  readonly size = input<SizeProp>();
  
  /** Pull text left or right */
  readonly pull = input<PullProp>();
  
  /** Add border around text */
  readonly border = input<boolean>();
  
  /** Invert text colors */
  readonly inverse = input<boolean>();
  
  /** Rotate text by degrees */
  readonly rotate = input<RotateProp | string>();
  
  /** Fixed width text layout */
  readonly fixedWidth = input<boolean>();
  
  /** Transform operations for text positioning */
  readonly transform = input<string | Transform>();
}

FaLayersCounterComponent

Counter/badge element within layers for displaying numbers or short text.

@Component({
  selector: 'fa-layers-counter',
  template: '',
  host: {
    class: 'ng-fa-layers-counter',
    '[innerHTML]': 'renderedHTML()',
  }
})
class FaLayersCounterComponent {
  /** Counter text or number (required) */
  readonly content = input.required<string>();
  
  /** Title attribute for accessibility */
  readonly title = input<string>();
  
  /** Counter position relative to icon */
  readonly position = input<'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'>();
}

Usage Examples

Basic Icon with Text Overlay

import { Component } from '@angular/core';
import { 
  FaLayersComponent, 
  FaLayersTextComponent, 
  FaIconComponent 
} from '@fortawesome/angular-fontawesome';

@Component({
  selector: 'app-layers-example',
  template: `
    <!-- Text over icon -->
    <fa-layers size="4x">
      <fa-icon [icon]="['fas', 'circle']" style="color: gold;"></fa-icon>
      <fa-layers-text content="1" 
                      style="color: black; font-weight: bold;"
                      [transform]="{ scale: 0.25 }"></fa-layers-text>
    </fa-layers>
    
    <!-- Multiple text elements -->
    <fa-layers size="3x">
      <fa-icon [icon]="['fas', 'certificate']" style="color: red;"></fa-icon>
      <fa-layers-text content="NEW" 
                      style="color: white; font-weight: bold;"
                      [transform]="{ scale: 0.2 }"></fa-layers-text>
    </fa-layers>
  `,
  imports: [FaLayersComponent, FaLayersTextComponent, FaIconComponent]
})
export class LayersExampleComponent {}

Counter Badges

@Component({
  selector: 'app-counter-example',
  template: `
    <!-- Notification badge -->
    <fa-layers>
      <fa-icon [icon]="['fas', 'bell']" size="2x"></fa-icon>
      <fa-layers-counter content="3" 
                         position="top-right"
                         style="background: red; color: white;"></fa-layers-counter>
    </fa-layers>
    
    <!-- Shopping cart with count -->
    <fa-layers>
      <fa-icon [icon]="['fas', 'shopping-cart']" size="2x"></fa-icon>
      <fa-layers-counter content="12" 
                         position="top-right"
                         title="Items in cart"></fa-layers-counter>
    </fa-layers>
    
    <!-- Message indicator -->
    <fa-layers>
      <fa-icon [icon]="['fas', 'envelope']" size="2x"></fa-icon>
      <fa-layers-counter content="99+" 
                         position="bottom-right"
                         style="background: #ff6b6b;"></fa-layers-counter>
    </fa-layers>
  `,
  imports: [FaLayersComponent, FaLayersCounterComponent, FaIconComponent]
})
export class CounterExampleComponent {}

Complex Layered Compositions

@Component({
  selector: 'app-complex-layers',
  template: `
    <!-- User avatar with status -->
    <fa-layers size="4x">
      <fa-icon [icon]="['fas', 'circle']" style="color: #f0f0f0;"></fa-icon>
      <fa-icon [icon]="['fas', 'user']" 
               [transform]="{ scale: 0.6 }" 
               style="color: #666;"></fa-icon>
      <fa-icon [icon]="['fas', 'circle']" 
               [transform]="{ scale: 0.25, x: 10, y: -10 }" 
               style="color: #22c55e;"></fa-icon>
    </fa-layers>
    
    <!-- Award with text -->
    <fa-layers size="5x">
      <fa-icon [icon]="['fas', 'certificate']" style="color: gold;"></fa-icon>
      <fa-layers-text content="1st" 
                      style="color: #8b4513; font-weight: bold;"
                      [transform]="{ scale: 0.25, y: 2 }"></fa-layers-text>
    </fa-layers>
    
    <!-- Warning sign -->
    <fa-layers size="3x">
      <fa-icon [icon]="['fas', 'triangle']" 
               style="color: #fbbf24;" 
               [transform]="{ rotate: 180 }"></fa-icon>
      <fa-icon [icon]="['fas', 'exclamation']" 
               style="color: #dc2626;"
               [transform]="{ scale: 0.6 }"></fa-icon>
    </fa-layers>
  `,
  imports: [FaLayersComponent, FaLayersTextComponent, FaIconComponent]
})
export class ComplexLayersComponent {}

Layer Positioning and Transforms

Precise positioning of layer elements using transforms.

// Transform positioning
transform = { 
  scale: 0.5,  // 50% size
  x: 10,       // Move right 10 units
  y: -5,       // Move up 5 units
  rotate: 45   // Rotate 45 degrees
};

// String transform format
transform = "scale-0.5 right-10 up-5 rotate-45";

Position Examples:

@Component({
  template: `
    <!-- Corner positioning -->
    <fa-layers size="3x">
      <fa-icon [icon]="['fas', 'square']" style="color: #e5e7eb;"></fa-icon>
      
      <!-- Top-left corner -->
      <fa-icon [icon]="['fas', 'heart']" 
               [transform]="{ scale: 0.3, x: -8, y: -8 }" 
               style="color: red;"></fa-icon>
      
      <!-- Top-right corner -->
      <fa-icon [icon]="['fas', 'star']" 
               [transform]="{ scale: 0.3, x: 8, y: -8 }" 
               style="color: gold;"></fa-icon>
      
      <!-- Bottom-center -->
      <fa-layers-text content="NEW" 
                      [transform]="{ scale: 0.2, y: 8 }"
                      style="color: blue; font-weight: bold;"></fa-layers-text>
    </fa-layers>
  `
})
export class PositioningExampleComponent {}

Counter Positions

Pre-defined positions for counter placement.

type CounterPosition = 
  | 'top-left'      // Upper left corner
  | 'top-right'     // Upper right corner (default)
  | 'bottom-left'   // Lower left corner
  | 'bottom-right'; // Lower right corner

Counter Position Examples:

@Component({
  template: `
    <!-- All corner positions -->
    <fa-layers size="3x" class="m-4">
      <fa-icon [icon]="['fas', 'circle']" style="color: #ddd;"></fa-icon>
      <fa-layers-counter content="TL" position="top-left"></fa-layers-counter>
      <fa-layers-counter content="TR" position="top-right"></fa-layers-counter>
      <fa-layers-counter content="BL" position="bottom-left"></fa-layers-counter>
      <fa-layers-counter content="BR" position="bottom-right"></fa-layers-counter>
    </fa-layers>
  `
})
export class CounterPositionsComponent {}

Styling and CSS

Custom styling for layer elements.

/* Layer text styling */
.custom-layer-text {
  font-weight: bold;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

/* Counter styling */
.custom-counter {
  background: linear-gradient(45deg, #ff6b6b, #ee5a52);
  color: white;
  border-radius: 50%;
  font-size: 0.8em;
  font-weight: bold;
}

/* Layer container */
.notification-layer {
  position: relative;
  display: inline-block;
}

Error Handling

Common issues and requirements for layer components.

Missing parent warning: Layer text and counter components must be children of fa-layers
Content required: Both text and counter components require the content input
Transform conflicts: Be careful with overlapping transforms and positioning
Z-index issues: Layer order matters - later elements appear on top

// Proper layer structure
<fa-layers>
  <!-- Background/base layer -->
  <fa-icon [icon]="['fas', 'circle']"></fa-icon>
  
  <!-- Foreground layers -->
  <fa-layers-text content="Text"></fa-layers-text>
  <fa-layers-counter content="5"></fa-layers-counter>
</fa-layers>

// Error: Missing fa-layers parent
<fa-layers-text content="Invalid"></fa-layers-text> <!-- Will warn -->