Indigo.Design UI Kit → Ignite UI Angular Component Map

Part of the igniteui-angular-figma-to-app skill.

The Indigo.Design UI Kits are Figma component libraries (Material, Fluent, Bootstrap, Indigo variants) that designers use to build their app screens. Every component instance in a design file is drawn from one of these libraries and maps 1:1 to an Ignite UI Angular control.

Use this file in Phase 2a to map Figma layer names — as they appear in the kit library — to Ignite UI Angular selectors, get_doc keys, and key inputs. When a layer name is not in this table, call list_components then get_doc on the closest match.

How to Use This File

Find the kit component name (as it appears in the Figma layers panel or the Indigo.Design kit library) in the Kit Component Name column.
Read the Angular Selector and IgxXxx Class for the template.
Try the get_doc Key with get_doc({ framework: "angular", name: "<key>" }). The doc catalog covers only a subset of components (verify with list_components once). When no doc exists for a key, use the igniteui-angular-components / igniteui-angular-grids skill reference files for usage patterns and search_api for member-level API lookups — do not guess.
Consult Key Inputs / Variants for the properties most commonly configured from Figma variants.

The component names are identical across all four kit variants (Material, Fluent, Bootstrap, Indigo). The kit variant determines the theme style, not the component name.

Button Components

Kit Component Name	Angular Selector	IgxXxx Class	`get_doc` Key	Key Inputs / Variants
`_Button/Flat`	`<button igxButton="flat">`	`IgxButtonDirective`	`button`	`igxButton="flat"`, `[disabled]`, size via `igxButtonSize`
`_Button/Outlined`	`<button igxButton="outlined">`	`IgxButtonDirective`	`button`	`igxButton="outlined"`
`_Button/Contained` / `_Button/Raised`	`<button igxButton="contained">`	`IgxButtonDirective`	`button`	`igxButton="contained"`
`_Icon Button/Flat`	`<button igxIconButton="flat">`	`IgxIconButtonDirective`	`icon-button`	`igxIconButton="flat\|outlined\|contained"`
`_Icon Button/Outlined`	`<button igxIconButton="outlined">`	`IgxIconButtonDirective`	`icon-button`	—
`_Icon Button/Contained`	`<button igxIconButton="contained">`	`IgxIconButtonDirective`	`icon-button`	—
`_Button Group`	`<igx-buttongroup>`	`IgxButtonGroupComponent`	`button-group`	`[values]`, `[multiSelection]`, `[alignment]`
`_FAB` / `Fab`	`<button igxButton="fab">`	`IgxButtonDirective`	`button`	`igxButton="fab"`

Form Controls

Input type defaults differ from the Figma kit defaults. When a Figma design uses border-type inputs globally, set the IGX_INPUT_GROUP_TYPE injection token once in app.config.ts rather than adding type="border" to every component tag. This covers all compound components: IgxSimpleCombo (default: box), IgxDatePickerComponent (default: line), IgxDateRangePickerComponent, IgxTimePickerComponent, IgxSelectComponent.
import { IGX_INPUT_GROUP_TYPE } from 'igniteui-angular/input-group';
// providers: [{ provide: IGX_INPUT_GROUP_TYPE, useValue: 'border' }]
Detect the intended type from Phase 1d: look for hidden size-[0.5px] nodes whose data-name encodes the variant (e.g. "Date Picker Type" → border).

Kit Component Name	Angular Selector	IgxXxx Class	`get_doc` Key	Default Type	Key Inputs / Variants
`_Input/Line`	`<igx-input-group type="line">`	`IgxInputGroupComponent`	`input`	`line`	`type="line\|border\|box\|search"`, `[disabled]`
`_Input/Border`	`<igx-input-group type="border">`	`IgxInputGroupComponent`	`input`	`line`	`type="border"`
`_Input/Box` / `_Input/Filled`	`<igx-input-group type="box">`	`IgxInputGroupComponent`	`input`	`line`	`type="box"`
`_Input/Search`	`<igx-input-group type="search">`	`IgxInputGroupComponent`	`input`	`line`	`type="search"`
`_Combo` / `_ComboBox`	`<igx-combo>`	`IgxComboComponent`	`combo`	`box`	`[data]`, `[displayKey]`, `[valueKey]`, `[groupKey]`, `[allowCustomValues]`
`_Simple Combo`	`<igx-simple-combo>`	`IgxSimpleComboComponent`	`simple-combo`	`box`	`[data]`, `[displayKey]`, `[valueKey]`
`_Select` / `_Dropdown`	`<igx-select>`	`IgxSelectComponent`	`select`	`line`	`<igx-select-item>` children, `[type]`
`_Autocomplete`	`igxAutocomplete` directive	`IgxAutocompleteDirective`	`autocomplete`	n/a	Used alongside `igx-input-group` + `igx-drop-down`
`_Checkbox`	`<igx-checkbox>`	`IgxCheckboxComponent`	`checkbox`	n/a	`[(ngModel)]`, `[checked]`, `[indeterminate]`, `[disabled]`, `labelPosition`
`_Radio` / `_Radio Button`	`<igx-radio>`	`IgxRadioComponent`	`radio-button`	n/a	`[value]`, `[(ngModel)]`; wrap multiple in `<igx-radio-group>`
`_Switch` / `_Toggle`	`<igx-switch>`	`IgxSwitchComponent`	`switch`	n/a	`[(ngModel)]`, `[checked]`, `labelPosition`
`_Slider` / `_Range Slider`	`<igx-slider>`	`IgxSliderComponent`	`slider`	n/a	`[type]` (`SLIDER\|RANGE`), `[minValue]`, `[maxValue]`, `[step]`, `[(ngModel)]`
`_Rating`	`<igc-rating>`	`IgcRatingComponent` (web component — `igniteui-webcomponents` package)	(see setup note below)	n/a	`value` attribute; `igcChange` event; no `[(ngModel)]` — bind via `(igcChange)`

Rating setup: npm install igniteui-webcomponents. In the component:

import { IgcRatingComponent, defineComponents } from 'igniteui-webcomponents';
defineComponents(IgcRatingComponent);
// Add CUSTOM_ELEMENTS_SCHEMA to the component's schemas array

Kit Component Name	Angular Selector	IgxXxx Class	`get_doc` Key	Key Inputs / Variants
`_Date Picker`	`<igx-date-picker>`	`IgxDatePickerComponent`	`date-picker`	`[(ngModel)]`, `[minValue]`, `[maxValue]`, `[mode]` (`dropdown\|dialog`), `[displayFormat]`
`_Date Range Picker`	`<igx-date-range-picker>`	`IgxDateRangePickerComponent`	`date-range-picker`	`[(ngModel)]`, `[minValue]`, `[maxValue]`, `[mode]`
`_Time Picker`	`<igx-time-picker>`	`IgxTimePickerComponent`	`time-picker`	`[(ngModel)]`, `[mode]` (`dropdown\|dialog`), `[format]`
`_Calendar`	`<igx-calendar>`	`IgxCalendarComponent`	`calendar`	`[selection]` (`single\|multi\|range`), `[(ngModel)]`, `[viewDate]`, `[disabledDates]`

Navigation Components

Kit Component Name	Angular Selector	IgxXxx Class	`get_doc` Key	Key Inputs / Variants
`_Navbar`	`<igx-navbar>`	`IgxNavbarComponent`	`navbar`	`[title]`, `igxNavbarAction` slot, `igxNavbarTitle` slot
`_Navigation Drawer` / `_Side Nav`	`<igx-nav-drawer>`	`IgxNavigationDrawerComponent`	`navdrawer`	`[pin]`, `[pinThreshold]`, `[miniWidth]`, `[width]`, `igxDrawer` + `igxDrawerMini` templates
`_Tabs`	`<igx-tabs>`	`IgxTabsComponent`	`tabs`	`<igx-tab-item>` with `<igx-tab-header>` and `<igx-tab-content>` children, `[tabAlignment]`
`_Bottom Navigation` / `_Bottom Nav`	`<igx-bottom-nav>`	`IgxBottomNavComponent`	`bottom-nav`	`<igx-bottom-nav-item>` children with `<igx-bottom-nav-header>` and `<igx-bottom-nav-content>`
`_Stepper`	`<igx-stepper>`	`IgxStepperComponent`	`stepper`	`[orientation]` (`horizontal\|vertical`), `[stepType]`, `[linear]`; `<igx-step>` children

Layout Components

Kit Component Name	Angular Selector	IgxXxx Class	`get_doc` Key	Key Inputs / Variants
`_Accordion`	`<igx-accordion>`	`IgxAccordionComponent`	`accordion`	`[singleBranchExpand]`; `<igx-expansion-panel>` children
`_Expansion Panel`	`<igx-expansion-panel>`	`IgxExpansionPanelComponent`	`expansion-panel`	`<igx-expansion-panel-header>` + `<igx-expansion-panel-body>`
`_Splitter`	`<igx-splitter>`	`IgxSplitterComponent`	`splitter`	`[type]` (`horizontal\|vertical`); `<igx-splitter-pane>` children
`_Tile Manager`	`<igc-tile-manager>`	Web component (standalone)	`tile-manager`	`<igc-tile>` children; web component — see `layout-manager.md`
`_Dock Manager`	`<igc-dockmanager>`	Web component (standalone)	`dock-manager`	`[layout]` JSON input; web component — see `layout-manager.md`

Data Display Components

Kit Component Name	Angular Selector	IgxXxx Class	`get_doc` Key	Key Inputs / Variants
`_List`	`<igx-list>`	`IgxListComponent`	`list`	`<igx-list-item>` children; `igxListLine`, `igxListThumbnail`, `igxListAction` slot directives
`_Tree` / `_Tree View`	`<igx-tree>`	`IgxTreeComponent`	`tree`	`[selection]`; `<igx-tree-node>` children
`_Card`	`<igx-card>`	`IgxCardComponent`	`card`	`igxCardHeader`, `igxCardThumbnail`, `igxCardContent`, `igxCardActions` slots; `[horizontal]`
`_Chip` / `_Chips`	`<igx-chip>`	`IgxChipComponent`	`chip`	`[removable]`, `[selectable]`, `[selected]`, `[disabled]`; wrap in `<igx-chips-area>`
`_Avatar`	`<igx-avatar>`	`IgxAvatarComponent`	`avatar`	`[src]`, `[initials]`, `[icon]`, `[shape]` (`circle\|rounded\|square`), `[size]`
`_Badge`	`<igx-badge>`	`IgxBadgeComponent`	`badge`	`[value]`, `[type]` (`primary\|info\|success\|warning\|error`), `[shape]` (`square\|rounded`)
`_Icon`	`<igx-icon>`	`IgxIconComponent`	`icon`	`[family]`, `[name]`; content text (ligature-based)
`_Carousel`	`<igx-carousel>`	`IgxCarouselComponent`	`carousel`	`[loop]`, `[navigation]`, `[pause]`; `<igx-slide>` children
`_Paginator`	`<igx-paginator>`	`IgxPaginatorComponent`	`paginator`	`[totalRecords]`, `[perPage]`, `[selectOptions]`
`_Linear Progress` / `_Progress Bar`	`<igx-linear-bar>`	`IgxLinearProgressBarComponent`	`linear-progress-bar`	`[value]`, `[max]`, `[indeterminate]`, `[type]` (`default\|success\|info\|warning\|danger`), `[striped]`
`_Circular Progress`	`<igx-circular-bar>`	`IgxCircularProgressBarComponent`	`circular-progress-bar`	`[value]`, `[max]`, `[indeterminate]`, `[animate]`
`_Divider`	`<igx-divider>`	`IgxDividerDirective`	`divider`	`[type]` (`solid\|dashed`), `[vertical]`
`_Chat`	`<igx-chat>`	`IgxChatComponent`	`chat`	`[messages]`, `[user]`, `[sendMessage]` event

Feedback / Overlay Components

Kit Component Name	Angular Selector	IgxXxx Class	`get_doc` Key	Key Inputs / Variants
`_Dialog`	`<igx-dialog>`	`IgxDialogComponent`	`dialog`	`[title]`, `[leftButtonLabel]`, `[rightButtonLabel]`, `[closeOnOutsideSelect]`, `[isModal]`
`_Toast`	`<igx-toast>`	`IgxToastComponent`	`toast`	`[displayTime]`, `[autoHide]`; opened via `toast.open()`
`_Snackbar`	`<igx-snackbar>`	`IgxSnackbarComponent`	`snackbar`	`[displayTime]`, `[autoHide]`, `[actionText]`; opened via `snackbar.open(message)`
`_Banner`	`<igx-banner>`	`IgxBannerComponent`	`banner`	`<igx-icon>` projected; `igxBannerActions` for action buttons

Grid Components

Kit Component Name	Angular Selector	IgxXxx Class	`get_doc` Key	Key Inputs / Variants
`_Grid` / `_Data Grid`	`<igx-grid>`	`IgxGridComponent`	`grid`	`[data]`, `[primaryKey]`, `[rowEditable]`, `[columnHiding]`; `<igx-column>` children
`_Tree Grid`	`<igx-tree-grid>`	`IgxTreeGridComponent`	`tree-grid`	`[data]`, `[primaryKey]`, `[foreignKey]` or `[childDataKey]`
`_Hierarchical Grid`	`<igx-hierarchical-grid>`	`IgxHierarchicalGridComponent`	`hierarchical-grid`	`[data]`, `[primaryKey]`; nested `<igx-row-island>` for child grids
`_Pivot Grid`	`<igx-pivot-grid>`	`IgxPivotGridComponent`	`pivot-grid`	`[data]`, `[pivotConfiguration]`

Grid features: search for feature-specific docs using search_docs. Examples: "grid filtering", "grid sorting", "grid paging", "grid row selection", "grid cell editing", "grid column pinning", "grid virtualization".

Chart & Data Visualization Components

DV components have no Sass design tokens. All visual configuration is done via component inputs. Do not call theming_get_component_design_tokens for these.

get_doc: the current doc catalog has no chart docs — use the charts.md reference in the components skill for usage patterns and search_api for member lookups.

Series colors: chart components use their own default brush palette. Always explicitly set [brushes] and [outlines] with space-separated hex colors extracted from the Phase 1d design context to match the Figma series colors: [brushes]="'#9DE772 #6DB1FF'"

Kit Component Name	Angular Selector	IgxXxx Class	`get_doc` Key	Key Inputs / Variants
`_Category Chart` / `_Line Chart` / `_Area Chart` / `_Bar Chart`	`<igx-category-chart>`	`IgxCategoryChartComponent`	—	`[dataSource]`, `[chartType]`, `[brushes]`, `[outlines]`, `[legend]`, `[markerTypes]`
`_Pie Chart` / `_Donut Chart`	`<igx-pie-chart>`	`IgxPieChartComponent`	—	`[dataSource]`, `[valueMemberPath]`, `[labelMemberPath]`
`_Financial Chart` / `_Stock Chart`	`<igx-financial-chart>`	`IgxFinancialChartComponent`	—	`[dataSource]`, `[chartType]` (`Candle\|Bar\|Line`), `[volumeType]`
`_Sparkline`	`<igx-sparkline>`	`IgxSparklineComponent`	—	`[dataSource]`, `[valueMemberPath]`, `[displayType]` (`Line\|Area\|Column\|WinLoss`)
`_Data Chart`	`<igx-data-chart>`	`IgxDataChartComponent`	—	`[dataSource]`; series added as child elements
`_Doughnut Chart`	`<igx-doughnut-chart>`	`IgxDoughnutChartComponent`	—	`[dataSource]`; `<igx-ring-series>` children
`_Treemap`	`<igx-treemap>`	`IgxTreemapComponent`	—	`[dataSource]`, `[valueMemberPath]`, `[labelMemberPath]`
`_Funnel Chart`	`<igx-funnel-chart>`	`IgxFunnelChartComponent`	—	`[dataSource]`, `[valueMemberPath]`, `[labelMemberPath]`
`_Scatter Chart` / `_Bubble Chart`	`<igx-data-chart>` with scatter series	`IgxDataChartComponent`	—	Use `<igx-scatter-series>` or `<igx-bubble-series>`

Gauge & Indicator Components

These are DV components — configure via component inputs only, no Sass tokens.

Kit Component Name	Angular Selector	IgxXxx Class	`get_doc` Key	Key Inputs / Variants
`_Linear Gauge`	`<igx-linear-gauge>`	`IgxLinearGaugeComponent`	`linear-gauge`	`[value]`, `[minimumValue]`, `[maximumValue]`, `[interval]`; `<igx-linear-graph-range>` for ranges
`_Radial Gauge`	`<igx-radial-gauge>`	`IgxRadialGaugeComponent`	`radial-gauge`	`[value]`, `[minimumValue]`, `[maximumValue]`, `[interval]`; `<igx-radial-graph-range>` for ranges
`_Bullet Graph`	`<igx-bullet-graph>`	`IgxBulletGraphComponent`	`bullet-graph`	`[value]`, `[targetValue]`, `[minimumValue]`, `[maximumValue]`

Map Components

DV component — configure via component inputs only, no Sass tokens.

Kit Component Name	Angular Selector	IgxXxx Class	`get_doc` Key	Key Inputs / Variants
`_Geographic Map`	`<igx-geographic-map>`	`IgxGeographicMapComponent`	`map`	`[zoomable]`; `<igx-geographic-symbol-series>` or `<igx-geographic-shape-series>` for data overlay

Directives

Kit Component Name	Angular Selector	Directive Class	`get_doc` Key	Notes
`_Tooltip`	`igxTooltip` on trigger + `igxTooltipTarget`	`IgxTooltipDirective`	`tooltip`	Pair `igxTooltipTarget` on the host and `igxTooltip` on the tooltip element
`_Ripple`	`igxRipple` attribute	`IgxRippleDirective`	`ripple`	Add to any interactive element

Package Notes

Pattern	Import path
Open-source package	`import { Igx... } from 'igniteui-angular/<entry-point>'`
Licensed package	`import { Igx... } from '@infragistics/igniteui-angular/<entry-point>'`
Web components (Tile Manager, Dock Manager)	`import 'igniteui-dockmanager'` / see `layout-manager.md` in the components skill
Rating web component	`import { IgcRatingComponent, defineComponents } from 'igniteui-webcomponents'` + `CUSTOM_ELEMENTS_SCHEMA`
DV charts/gauges/maps	Require separate `igniteui-angular-charts`, `igniteui-angular-gauges`, or `igniteui-angular-maps` packages

DV package install: determine the installed Ignite UI version first (npm list igniteui-angular), then install the closest matching DV package version. If no exact version match exists, install the closest lower version with --legacy-peer-deps. Always ask for approval before installing any new package.

Material Icons Extended (`@igniteui/material-icons-extended`)

The Indigo.Design UI Kit for Material includes domain and navigation icons from @igniteui/material-icons-extended. These appear in Figma component descriptions with the suffix "material extended".

Detection in Phase 1d: scan all data-name or component description strings for "material extended". If found, add this package to the required packages list and ask for user approval before Phase 4.

Setup:

npm install @igniteui/material-icons-extended

// In root component (e.g. app.ts)
import { IgxIconService } from 'igniteui-angular/icon';
import { addIcons } from '@igniteui/material-icons-extended';

export class AppComponent implements OnInit {
  private iconService = inject(IgxIconService);
  ngOnInit() {
    for (const icon of addIcons()) {
      this.iconService.addSvgIconFromText(icon.name, icon.value, 'imx-icons');
    }
  }
}

<!-- Use family="imx-icons", name = kebab-case layer name -->
<igx-icon family="imx-icons" name="credit-cards"></igx-icon>
<igx-icon family="imx-icons" name="wire-transfer"></igx-icon>

Figma description keyword	`imx-icons` name
credit, card, bank	`credit-cards`
wire transfer, payment	`wire-transfer`
budget, savings	`piggy-bank`
loan, borrow	`loan`
crypto, bitcoin	`bitcoin`
calculator, math	`calculator`
poll, analytics	`poll`

Unmapped Layers

When you encounter a Figma layer that is not in this table:

Extract the visual pattern (is it a list? a form field? a card?)
Call list_components({ framework: "angular" }) and scan for the closest match
Call get_doc on the closest match before generating code
If no Ignite UI component matches after a genuine attempt, use plain semantic HTML and document the reason in a code comment

Navigation Menu

Uh oh!

Indigo.Design UI Kit → Ignite UI Angular Component Map

How to Use This File

Button Components

Form Controls

Navigation Components

Layout Components

Data Display Components

Feedback / Overlay Components

Grid Components

Chart & Data Visualization Components

Gauge & Indicator Components

Map Components

Directives

Package Notes

Material Icons Extended (`@igniteui/material-icons-extended`)

Unmapped Layers

Uh oh!

FilesExpand file tree

figma-component-map.md

Latest commit

History

figma-component-map.md

File metadata and controls

Indigo.Design UI Kit → Ignite UI Angular Component Map

How to Use This File

Button Components

Form Controls

Navigation Components

Layout Components

Data Display Components

Feedback / Overlay Components

Grid Components

Chart & Data Visualization Components

Gauge & Indicator Components

Map Components

Directives

Package Notes

Material Icons Extended (@igniteui/material-icons-extended)

Unmapped Layers

Material Icons Extended (`@igniteui/material-icons-extended`)