or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

configuration.mdduotone-icons.mdicon-components.mdicon-layers.mdicon-stacks.mdindex.mdlibrary-management.md
tile.json

duotone-icons.mddocs/

Duotone Icons

Specialized component for rendering Font Awesome Pro duotone icons with customizable layer colors and opacity. Duotone icons feature two layers (primary and secondary) that can be styled independently.

Capabilities

FaDuotoneIconComponent

Extended icon component specifically for duotone icons with additional styling options.

@Component({
  selector: 'fa-duotone-icon',
  template: '',
  changeDetection: ChangeDetectionStrategy.OnPush
})
class FaDuotoneIconComponent extends FaIconComponent {
  /** Swap default opacity of primary and secondary layers */
  readonly swapOpacity = input<'true' | 'false' | boolean>();
  
  /** Customize primary layer opacity (0-1.0, default: 1.0) */
  readonly primaryOpacity = input<string | number>();
  
  /** Customize secondary layer opacity (0-1.0, default: 0.4) */
  readonly secondaryOpacity = input<string | number>();
  
  /** Customize primary layer color (any valid CSS color) */
  readonly primaryColor = input<string>();
  
  /** Customize secondary layer color (any valid CSS color) */
  readonly secondaryColor = input<string>();
}

Inherited Properties: All properties from FaIconComponent are available including icon, size, animation, rotate, flip, transform, etc.

Duotone Icon Usage

import { Component } from '@angular/core';
import { FaDuotoneIconComponent } from '@fortawesome/angular-fontawesome';

@Component({
  selector: 'app-duotone-example',
  template: `
    <!-- Basic duotone icon -->
    <fa-duotone-icon [icon]="['fad', 'coffee']"></fa-duotone-icon>
    
    <!-- Custom opacity -->
    <fa-duotone-icon [icon]="['fad', 'home']" 
                     [primaryOpacity]="0.8"
                     [secondaryOpacity]="0.2"></fa-duotone-icon>
    
    <!-- Custom colors -->
    <fa-duotone-icon [icon]="['fad', 'star']"
                     primaryColor="#ff6b6b"
                     secondaryColor="#4ecdc4"></fa-duotone-icon>
    
    <!-- Swapped opacity -->
    <fa-duotone-icon [icon]="['fad', 'shield']"
                     [swapOpacity]="true"></fa-duotone-icon>
    
    <!-- Full customization -->
    <fa-duotone-icon [icon]="['fad', 'crown']"
                     size="3x"
                     primaryColor="gold"
                     secondaryColor="darkgoldenrod"
                     [primaryOpacity]="1"
                     [secondaryOpacity]="0.6"
                     animation="beat"></fa-duotone-icon>
  `,
  imports: [FaDuotoneIconComponent]
})
export class DuotoneExampleComponent {}

Duotone Icon Validation

The component automatically validates that the provided icon is actually a duotone icon.

// Error thrown for non-duotone icons
throw new Error(
  'The specified icon does not appear to be a Duotone icon. ' +
  'Check that you specified the correct style: ' +
  `<fa-duotone-icon [icon]="['fad', '${iconName}']" /> ` +
  `or use: <fa-icon icon="${iconName}" /> instead.`
);

Opacity Control

Control layer visibility and transparency for different visual effects.

// Opacity values (0-1.0)
primaryOpacity = 1.0;    // Fully opaque (default)
secondaryOpacity = 0.4;  // Semi-transparent (default)

// Swap default behavior
swapOpacity = true; // Primary becomes 0.4, secondary becomes 1.0

// Custom values
primaryOpacity = 0.8;
secondaryOpacity = 0.2;

Opacity Examples:

// Subtle secondary layer
<fa-duotone-icon [icon]="['fad', 'cloud']" 
                 [secondaryOpacity]="0.1"></fa-duotone-icon>

// Prominent secondary layer
<fa-duotone-icon [icon]="['fad', 'building']" 
                 [swapOpacity]="true"></fa-duotone-icon>

// Equal visibility
<fa-duotone-icon [icon]="['fad', 'chart-bar']"
                 [primaryOpacity]="0.7"
                 [secondaryOpacity]="0.7"></fa-duotone-icon>

Color Customization

Apply custom colors to primary and secondary layers independently.

// CSS color values
primaryColor = "#ff0000";     // Hex
secondaryColor = "blue";      // Named color
primaryColor = "rgb(255,0,0)"; // RGB
secondaryColor = "hsl(240,100%,50%)"; // HSL
primaryColor = "var(--primary-color)"; // CSS custom property

Color Examples:

// Brand colors
<fa-duotone-icon [icon]="['fad', 'facebook']"
                 primaryColor="#1877f2"
                 secondaryColor="#42a5f5"></fa-duotone-icon>

// Theme colors
<fa-duotone-icon [icon]="['fad', 'sun']"
                 primaryColor="var(--warning-color)"
                 secondaryColor="var(--warning-light)"></fa-duotone-icon>

// Gradient-like effect
<fa-duotone-icon [icon]="['fad', 'mountain']"
                 primaryColor="#2d5a27"
                 secondaryColor="#4a7c59"></fa-duotone-icon>

Required Icon Styles

Duotone icons require Font Awesome Pro and specific duotone icon definitions.

// Valid duotone prefixes
type DuotonePrefix = 'fad' | 'fat'; // Pro styles only

// Icon library setup for duotone
import { fad } from '@fortawesome/pro-duotone-svg-icons';
import { fat } from '@fortawesome/pro-thin-svg-icons';

constructor(library: FaIconLibrary) {
  library.addIconPacks(fad, fat);
}

CSS Custom Properties

Duotone styling uses CSS custom properties that can be overridden globally.

.fa-duotone {
  --fa-primary-color: var(--primary-color);
  --fa-secondary-color: var(--secondary-color);
  --fa-primary-opacity: 1;
  --fa-secondary-opacity: 0.4;
}

/* Global duotone theme */
:root {
  --fa-primary-color: #333;
  --fa-secondary-color: #666;
}

Error Handling

Common issues and troubleshooting for duotone icons.

  • Non-duotone icon error: Ensure you're using fad or fat prefix with duotone icon definitions
  • Icon not displaying: Verify Font Awesome Pro is installed and duotone icons are added to library
  • Colors not applying: Check CSS specificity and ensure valid color values
  • Opacity not working: Verify values are between 0 and 1.0
// Proper duotone icon setup
import { fad } from '@fortawesome/pro-duotone-svg-icons';

// Add specific duotone icons
library.addIcons(fad.faHome, fad.faCoffee, fad.faStar);

// Or add entire pack
library.addIconPacks(fad);