Icon

The TkIcon component allows you to create a icon for adding visual information. It is also often useful in combination with other elements. This component uses Google's Material Symbols icons. For a complete list of available icon names, please visit: https://fonts.google.com/icons?icon.set=Material+Symbols

React

import { TkIcon } from '@takeoff-ui/react'

Vue

import { TkIcon } from '@takeoff-ui/vue'

Angular

import { TkIcon } from '@takeoff-ui/angular'

Basic

Basic usage of the icon component.

View Code

React

<TkIcon icon="flight" />
<TkIcon icon="hotel" />
<TkIcon icon="directions_car" />
<TkIcon icon="local_dining" />

Vue

<TkIcon icon="flight" />
<TkIcon icon="hotel" />
<TkIcon icon="directions_car" />
<TkIcon icon="local_dining" />

Angular

<tk-icon icon="flight" />
<tk-icon icon="hotel" />
<tk-icon icon="directions_car" />
<tk-icon icon="local_dining" />

Variants

Different variants of the icon component.

View Code

React

<TkIcon icon="flight" variant="primary" />
<TkIcon icon="flight" variant="secondary" />
<TkIcon icon="flight" variant="neutral" />
<TkIcon icon="flight" variant="info" />
<TkIcon icon="flight" variant="success" />
<TkIcon icon="flight" variant="warning" />
<TkIcon icon="flight" variant="danger" />
<TkIcon icon="flight" variant="white" />

Vue

<TkIcon icon="flight" variant="primary" />
<TkIcon icon="flight" variant="secondary" />
<TkIcon icon="flight" variant="neutral" />
<TkIcon icon="flight" variant="info" />
<TkIcon icon="flight" variant="success" />
<TkIcon icon="flight" variant="warning" />
<TkIcon icon="flight" variant="danger" />
<TkIcon icon="flight" variant="white" />

Angular

<tk-icon icon="flight" variant="primary" />
<tk-icon icon="flight" variant="secondary" />
<tk-icon icon="flight" variant="neutral" />
<tk-icon icon="flight" variant="info" />
<tk-icon icon="flight" variant="success" />
<tk-icon icon="flight" variant="warning" />
<tk-icon icon="flight" variant="danger" />
<tk-icon icon="flight" variant="white" />

Sign

Display icons as signs.

View Code

React

<TkIcon icon="flight" sign variant="primary" />
<TkIcon icon="flight" sign variant="secondary" />
<TkIcon icon="flight" sign variant="neutral" />
<TkIcon icon="flight" sign variant="info" />
<TkIcon icon="flight" sign variant="success" />
<TkIcon icon="flight" sign variant="warning" />
<TkIcon icon="flight" sign variant="danger" />
<TkIcon icon="flight" sign variant="white" />

Vue

<TkIcon icon="flight" sign variant="primary" />
<TkIcon icon="flight" sign variant="secondary" />
<TkIcon icon="flight" sign variant="neutral" />
<TkIcon icon="flight" sign variant="info" />
<TkIcon icon="flight" sign variant="success" />
<TkIcon icon="flight" sign variant="warning" />
<TkIcon icon="flight" sign variant="danger" />
<TkIcon icon="flight" sign variant="white" />

Angular

<tk-icon icon="flight" sign variant="primary" />
<tk-icon icon="flight" sign variant="secondary" />
<tk-icon icon="flight" sign variant="neutral" />
<tk-icon icon="flight" sign variant="info" />
<tk-icon icon="flight" sign variant="success" />
<tk-icon icon="flight" sign variant="warning" />
<tk-icon icon="flight" sign variant="danger" />
<tk-icon icon="flight" sign variant="white" />

Sizes

Available sizes for the icon component.

Standard Icons

small

base

medium

large

xlarge

xxlarge

Sign Icons

small

base

medium

large

xlarge

xxlarge

View Code

React

// Standard Icons
<TkIcon icon="flight" size="small" />
<TkIcon icon="flight" size="base" />
<TkIcon icon="flight" size="medium" />
<TkIcon icon="flight" size="large" />
<TkIcon icon="flight" size="xlarge" />
<TkIcon icon="flight" size="xxlarge" />

// Sign icons
<TkIcon icon="flight" sign size="small" />
<TkIcon icon="flight" sign size="base" />
<TkIcon icon="flight" sign size="medium" />
<TkIcon icon="flight" sign size="large" />
<TkIcon icon="flight" sign size="xlarge" />
<TkIcon icon="flight" sign size="xxlarge" />

Vue

// Standard Icons
<TkIcon icon="flight" size="small" />
<TkIcon icon="flight" size="base" />
<TkIcon icon="flight" size="medium" />
<TkIcon icon="flight" size="large" />
<TkIcon icon="flight" size="xlarge" />
<TkIcon icon="flight" size="xxlarge" />

// Sign icons
<TkIcon icon="flight" sign size="small" />
<TkIcon icon="flight" sign size="base" />
<TkIcon icon="flight" sign size="medium" />
<TkIcon icon="flight" sign size="large" />
<TkIcon icon="flight" sign size="xlarge" />
<TkIcon icon="flight" sign size="xxlarge" />

Angular

<!-- Standard Icons -->
<tk-icon icon="flight" size="small" />
<tk-icon icon="flight" size="base" />
<tk-icon icon="flight" size="medium" />
<tk-icon icon="flight" size="large" />
<tk-icon icon="flight" size="xlarge" />
<tk-icon icon="flight" size="xxlarge" />
  
<!-- Sign icons -->
<tk-icon icon="flight" sign size="small" />
<tk-icon icon="flight" sign size="base" />
<tk-icon icon="flight" sign size="medium" />
<tk-icon icon="flight" sign size="large" />
<tk-icon icon="flight" sign size="xlarge" />
<tk-icon icon="flight" sign size="xxlarge" />

Icon Types

Different icon types (outlined, rounded, sharp).

outlined

rounded

sharp

View Code

React

<TkIcon icon="star" iconType="outlined" />
<TkIcon icon="star" iconType="rounded" />
<TkIcon icon="star" iconType="sharp" />

Vue

<TkIcon icon="star" iconType="outlined" />
<TkIcon icon="star" iconType="rounded" />
<TkIcon icon="star" iconType="sharp" />

Angular

<tk-icon icon="star" iconType="outlined" />
<tk-icon icon="star" iconType="rounded" />
<tk-icon icon="star" iconType="sharp" />

Custom Colors

Custom color configurations for icons.

View Code

React

<TkIcon icon="flight" color="#FF5722" />
<TkIcon icon="flight" color="#2196F3" />
<TkIcon icon="flight" color="#4CAF50" />
<TkIcon icon="flight" sign backgroundColor="#F5F5F5" borderColor="#2196F3" iconColor="#2196F3" />
<TkIcon icon="flight" sign backgroundColor="#FFF9C4" borderColor="#FFC107" iconColor="#FFC107" />

Vue

<TkIcon icon="flight" color="#FF5722" />
<TkIcon icon="flight" color="#2196F3" />
<TkIcon icon="flight" color="#4CAF50" />
<TkIcon icon="flight" sign backgroundColor="#F5F5F5" borderColor="#2196F3" iconColor="#2196F3" />
<TkIcon icon="flight" sign backgroundColor="#FFF9C4" borderColor="#FFC107" iconColor="#FFC107" />

Angular

<tk-icon icon="flight" color="#FF5722" />
<tk-icon icon="flight" color="#2196F3" />
<tk-icon icon="flight" color="#4CAF50" />
<tk-icon icon="flight" sign backgroundColor="#F5F5F5" borderColor="#2196F3" iconColor="#2196F3" />
<tk-icon icon="flight" sign backgroundColor="#FFF9C4" borderColor="#FFC107" iconColor="#FFC107" />

API

Props

Name	Type	Default	Description
	string	null	The background color of the sign (custom variant)
	string	null	The border color of the sign (custom variant)
	string	null	The color of the icon
	boolean	null	Indicates whether the icon should be filled
	string	null	Specifies a material icon.
	string	null	The color of the icon (custom variant)
	"i", "span"	'i'	The HTML tag to use for the icon element.
	"outlined", "rounded", "sharp"	'outlined'	Specifies the type of the icon to be displayed.
	boolean	false	Controls whether the icon is shown as a sign (previously 'card' type)
	"base", "large", "medium", "small", "xlarge", "xsmall", "xxlarge"	'base'	Sets size for the component.
	"danger", "info", "neutral", "primary", "secondary", "success", "warning", "white"	'primary'	The variant of the icon.