@talenra/components documentation
  1. Components
  2. IconComponent

File

icons/src/icon/icon.component.ts

Description

This Angular implementation of @talenra/icons provides a simple and comfortable way to use the Opus icons in Angular apps.

Example :
<talenra-icon name="attach-file" />

Size

Icons are available in three sizes:

  • XS: 'xs', 16 × 16px
  • S: 's', 20 × 20px
  • M: 'm', 24 × 24px (default)
Example :
<!-- Template -->
<talenra-icon name="attach-file" size="xs" />

Duplex (duo-tone, two colors)

As for regular single-colored icons, the colors of duplex icons is typically set in your custom stylesheet. In very rare cases, you might need to set the color via the element's style attribute (e.g. if the color can be customized by the user or is picked randomly).

Example :
<!-- Template -->
<talenra-icon name="person-checkmark-duplex" />
<talenra-icon name="task-alt-duplex" class="neon-colors" />
Example :
// Stylesheet
// Set default colors used for duplex icons in your app
.talenra-icon-duplex {
  --color-primary: black;
  --color-secondary: red;
}

// Override default colors set above
.neon-colors {
  --color-primary: deeppink;
  --color-secondary: deepskyblue;
}

Import

Example :
import { IconComponent } from '@talenra/components/icons';

../../../#/icons

Metadata

changeDetection ChangeDetectionStrategy.OnPush
host {
}
selector talenra-icon
styleUrl ./icon.component.scss

Index

Inputs

Inputs

name
Type : string
Default value : ''

The name of the icon to be rendered. e.g. 'attach-file'
size
Type : TIconSize | null
Default value : null

The size of the icon.

For backwards compatibility, you can omit the size property which makes it easier to override the size via CSS (which is not recommended though).

Example :
<talenra-icon name="attach-file" size="s" />

See TIconSize

Icon Component

History

2025-05-14

Complete overhaul

https://gitlab.svanet.ch/talenra/talenra-workspace/-/merge_requests/747

  • Replace @Input decorator with input signal
  • Remove empty template file
  • Use component metadata for static and dynamic class names
  • Replace @ts-ignore with correct typing
  • Move internal interface to separate file (was type, is now interface)
  • Prefix internal interface name (IconMeta → IIconMeta)
  • Rewrite unit test suite, increase test quality and quantity

results matching ""

    No results matching ""