diff --git a/en/components/accordion.md b/en/components/accordion.md
index ca62c5c715..a4c850fa20 100644
--- a/en/components/accordion.md
+++ b/en/components/accordion.md
@@ -42,7 +42,7 @@ The next step is to import the `IgxAccordionModule` in your **app.module.ts** fi
 // app.module.ts
 
 ...
-import { IgxAccordionModule } from 'igniteui-angular';
+import { IgxAccordionModule } from 'igniteui-angular/accordion';
 // import { IgxAccordionModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
@@ -59,7 +59,7 @@ Alternatively, as of `16.0.0` you can import the `IgxAccordionComponent` as a st
 // home.component.ts
 
 ...
-import { IGX_ACCORDION_DIRECTIVES } from 'igniteui-angular';
+import { IGX_ACCORDION_DIRECTIVES } from 'igniteui-angular/accordion';
 // import { IGX_ACCORDION_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package
 
 @Component({
@@ -134,9 +134,8 @@ Angular Accordion supports animations for both expanding and collapsing actions
 With regards to animation, you have two options. First, you could set the `animationSettings` property on the accordion component:
 
 ```typescript
-import { useAnimation } from '@angular/animations';
-import { slideInLeft, slideOutRight } from 'igniteui-angular';
-// import { slideInLeft, slideOutRight } from '@infragistics/igniteui-angular'; for licensed package
+import { useAnimation, slideInLeft, slideOutRight } from '@angular/animations';
+// import { useAnimation, slideInLeft, slideOutRight } from '@infragistics/igniteui-angular/animations'; for licensed package
 
 @Component({
     ...
diff --git a/en/components/action-strip.md b/en/components/action-strip.md
index 7b8492532f..411c409d2c 100644
--- a/en/components/action-strip.md
+++ b/en/components/action-strip.md
@@ -36,7 +36,7 @@ The next step is to import the `IgxActionStripModule` in your **app.module.ts**
 // app.module.ts
 
 ...
-import { IgxActionStripModule } from 'igniteui-angular';
+import { IgxActionStripModule } from 'igniteui-angular/action-strip';
 // import { IgxActionStripModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
@@ -53,7 +53,9 @@ Alternatively, as of `16.0.0` you can import the `IgxActionStripComponent` as a
 // home.component.ts
 
 ...
-import { IGX_ACTION_STRIP_DIRECTIVES, IgxButtonDirective, IgxIconComponent } from 'igniteui-angular';
+import { IGX_ACTION_STRIP_DIRECTIVES } from 'igniteui-angular/action-strip';
+import { IgxButtonDirective } from 'igniteui-angular/button';
+import { IgxIconComponent } from 'igniteui-angular/icon';
 // import { IGX_ACTION_STRIP_DIRECTIVES, IgxButtonDirective, IgxIconComponent } from '@infragistics/igniteui-angular'; for licensed package
 
 @Component({
diff --git a/en/components/autocomplete.md b/en/components/autocomplete.md
index c9bd95b97b..add9c8993f 100644
--- a/en/components/autocomplete.md
+++ b/en/components/autocomplete.md
@@ -41,11 +41,8 @@ The next step is to import the **IgxAutocompleteModule** and **IgxDropDownModule
 // app.module.ts
 
 ...
-import { 
-    IgxAutocompleteModule,
-    IgxDropDownModule, 
-    IgxInputGroupModule 
-} from 'igniteui-angular';
+import { IgxAutocompleteModule, IgxDropDownModule } from 'igniteui-angular/drop-down';
+import { IgxInputGroupModule } from 'igniteui-angular/input-group';
 // import { IgxAutocompleteModule, IgxDropDownModule, IgxInputGroupModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
@@ -68,7 +65,8 @@ Alternatively, as of `16.0.0` you can import the `IgxAutocompleteDirective` as a
 // home.component.ts
 
 ...
-import { IgxAutocompleteDirective, IGX_INPUT_GROUP_DIRECTIVES, IGX_DROP_DOWN_DIRECTIVES } from 'igniteui-angular';
+import { IgxAutocompleteDirective, IGX_DROP_DOWN_DIRECTIVES } from 'igniteui-angular/drop-down';
+import { IGX_INPUT_GROUP_DIRECTIVES } from 'igniteui-angular/input-group';
 // import { IgxAutocompleteDirective, IGX_INPUT_GROUP_DIRECTIVES, IGX_DROP_DOWN_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package
 
 @Component({
diff --git a/en/components/avatar.md b/en/components/avatar.md
index 58030c415f..a478232d5e 100644
--- a/en/components/avatar.md
+++ b/en/components/avatar.md
@@ -35,7 +35,7 @@ The next step is to import the `IgxAvatarModule` in your **app.module.ts** file.
 // app.module.ts
 
 ...
-import { IgxAvatarModule } from 'igniteui-angular';
+import { IgxAvatarModule } from 'igniteui-angular/avatar';
 // import { IgxAvatarModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
@@ -52,7 +52,7 @@ Alternatively, as of `16.0.0` you can import the `IgxAvatarComponent` as a stand
 // home.component.ts
 
 ...
-import { IgxAvatarComponent } from 'igniteui-angular';
+import { IgxAvatarComponent } from 'igniteui-angular/avatar';
 // import { IgxAvatarComponent } from '@infragistics/igniteui-angular'; for licensed package
 
 @Component({
diff --git a/en/components/badge.md b/en/components/badge.md
index 0aaeefd0bf..7e4b829a52 100644
--- a/en/components/badge.md
+++ b/en/components/badge.md
@@ -34,7 +34,7 @@ The next step is to import the `IgxBadgeModule` in your **app.module.ts** file.
 // app.module.ts
 
 ...
-import { IgxBadgeModule } from 'igniteui-angular';
+import { IgxBadgeModule } from 'igniteui-angular/badge';
 // import { IgxBadgeModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
@@ -51,7 +51,7 @@ Alternatively, as of `16.0.0` you can import the `IgxBadgeComponent` as a standa
 // home.component.ts
 
 ...
-import { IgxBadgeComponent } from 'igniteui-angular';
+import { IgxBadgeComponent } from 'igniteui-angular/badge';
 // import { IgxBadgeComponent } from '@infragistics/igniteui-angular'; for licensed package
 
 @Component({
@@ -73,7 +73,8 @@ Let's see how the demo sample is done. It's a simple success badge on an avatar.
 ```typescript
 // app.module.ts
 ...
-import { IgxBadgeModule, IgxAvatarModule } from 'igniteui-angular';
+import { IgxBadgeModule } from 'igniteui-angular/badge';
+import { IgxAvatarModule } from 'igniteui-angular/avatar';
 // import {  IgxBadgeModule, IgxAvatarModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
@@ -171,11 +172,9 @@ To continue, include all needed modules and import them in the **app.module.ts**
 // app.module.ts
 
 ...
-import {
-    IgxListModule,
-    IgxAvatarModule,
-    IgxBadgeModule
-} from 'igniteui-angular';
+import { IgxListModule } from 'igniteui-angular/list';
+import { IgxAvatarModule } from 'igniteui-angular/avatar';
+import { IgxBadgeModule } from 'igniteui-angular/badge';
 // import { IgxListModule, IgxAvatarModule, IgxBadgeModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
diff --git a/en/components/banner.md b/en/components/banner.md
index c8f5dc1891..4df3b2c854 100644
--- a/en/components/banner.md
+++ b/en/components/banner.md
@@ -34,7 +34,7 @@ The next step is to import the `IgxBannerModule` in your **app.module.ts** file.
 // app.module.ts
 
 ...
-import { IgxBannerModule } from 'igniteui-angular';
+import { IgxBannerModule } from 'igniteui-angular/banner';
 // import { IgxBannerModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
@@ -51,7 +51,7 @@ Alternatively, as of `16.0.0` you can import the `IgxBannerComponent` as a stand
 // home.component.ts
 
 ...
-import { IGX_BANNER_DIRECTIVES } from 'igniteui-angular';
+import { IGX_BANNER_DIRECTIVES } from 'igniteui-angular/banner';
 // import { IGX_BANNER_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package
 
 @Component({
@@ -172,7 +172,8 @@ Let's change the animations that our banner uses, so that it slides in and out:
 
 ```typescript
 // banner.component.ts
-import { IgxBannerComponent, slideInLeft, slideOutRight } from 'igniteui-angular'
+import { IgxBannerComponent } from 'igniteui-angular/banner';
+import { slideInLeft, slideOutRight } from 'igniteui-angular/animations'
 // import { IgxBannerComponent, slideInLeft, slideOutRight } from '@infragistics/igniteui-angular'; for licensed package
 ...
 export class MyBannerComponent {
diff --git a/en/components/button-group.md b/en/components/button-group.md
index 4d6013ecb0..9df95bf576 100644
--- a/en/components/button-group.md
+++ b/en/components/button-group.md
@@ -34,7 +34,7 @@ The next step is to import the `IgxButtonGroupModule` in your **app.module.ts**
 // app.module.ts
 
 ...
-import { IgxButtonGroupModule } from 'igniteui-angular';
+import { IgxButtonGroupModule } from 'igniteui-angular/button-group';
 // import { IgxButtonGroupModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
@@ -51,7 +51,8 @@ Alternatively, as of `16.0.0` you can import the `IgxButtonGroupComponent` as a
 // home.component.ts
 
 ...
-import { IGX_BUTTON_GROUP_DIRECTIVES, IgxIconComponent } from 'igniteui-angular';
+import { IGX_BUTTON_GROUP_DIRECTIVES } from 'igniteui-angular/button-group';
+import { IgxIconComponent } from 'igniteui-angular/icon';
 // import { IGX_BUTTON_GROUP_DIRECTIVES, IgxIconComponent } from '@infragistics/igniteui-angular'; for licensed package
 
 @Component({
@@ -114,7 +115,7 @@ Use the [`alignment`]({environment:angularApiUrl}/classes/igxbuttongroupcomponen
 
 ```typescript
 //sample.component.ts
-import { ButtonGroupAlignment } from 'igniteui-angular';
+import { ButtonGroupAlignment } from 'igniteui-angular/button-group';
 // import { ButtonGroupAlignment } from '@infragistics/igniteui-angular'; for licensed package
 
 ...
diff --git a/en/components/button.md b/en/components/button.md
index 3b2baa3a97..50b3070bee 100644
--- a/en/components/button.md
+++ b/en/components/button.md
@@ -38,7 +38,7 @@ The next step is to import the `IgxButtonModule` in your **app.module.ts** file.
 
 ```typescript
 // app.module.ts
-import { IgxButtonModule } from 'igniteui-angular';
+import { IgxButtonModule } from 'igniteui-angular/button';
 // import { IgxButtonModule } from '@infragistics/igniteui-angular'; for licensed package
 @NgModule({
     imports: [
@@ -56,7 +56,7 @@ Alternatively, as of `16.0.0` you can import the `IgxButtonDirective` as a stand
 // home.component.ts
 
 ...
-import { IgxButtonDirective } from 'igniteui-angular';
+import { IgxButtonDirective } from 'igniteui-angular/button';
 // import { IgxButtonDirective } from '@infragistics/igniteui-angular'; for licensed package
 
 @Component({
@@ -198,7 +198,7 @@ We can allow the user to choose the size of the `igxButton` by using the `--ig-s
 ```typescript
 // app.module.ts
 ...
-import { IgxButtonGroupModule } from 'igniteui-angular';
+import { IgxButtonGroupModule } from 'igniteui-angular/button-group';
 // import { IgxButtonGroupModule } from '@infragistics/igniteui-angular'; for licensed package
 @NgModule({
     imports: [
diff --git a/en/components/calendar.md b/en/components/calendar.md
index d2900e2c10..d497254d67 100644
--- a/en/components/calendar.md
+++ b/en/components/calendar.md
@@ -46,7 +46,7 @@ The next step is to import the `IgxCalendarModule` in your **app.module.ts** fil
 ...
 import { HammerModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { IgxCalendarModule } from 'igniteui-angular';
+import { IgxCalendarModule } from 'igniteui-angular/calendar';
 // import { IgxCalendarModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
@@ -64,7 +64,7 @@ Alternatively, as of `16.0.0` you can import the `IgxCalendarComponent` as a sta
 
 import { HammerModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { IGX_CALENDAR_DIRECTIVES } from 'igniteui-angular';
+import { IGX_CALENDAR_DIRECTIVES } from 'igniteui-angular/calendar';
 // import { IGX_CALENDAR_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package
 
 @Component({
diff --git a/en/components/card.md b/en/components/card.md
index c6b18effc3..3bef92beb2 100644
--- a/en/components/card.md
+++ b/en/components/card.md
@@ -39,7 +39,7 @@ The next step is to import the `IgxCardModule` inside your **app.module.ts** fil
 ```typescript
 // app.module.ts
 ...
-import { IgxCardModule } from 'igniteui-angular';
+import { IgxCardModule } from 'igniteui-angular/card';
 // import { IgxCardModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
@@ -55,7 +55,7 @@ Alternatively, as of `16.0.0` you can import the `IgxCardComponent` as a standal
 ```typescript
 // home.component.ts
 
-import { IGX_CARD_DIRECTIVES } from 'igniteui-angular';
+import { IGX_CARD_DIRECTIVES } from 'igniteui-angular/card';
 // import { IGX_CARD_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package
 
 @Component({
diff --git a/en/components/carousel.md b/en/components/carousel.md
index 5aa5414bc1..18cd9c40e6 100644
--- a/en/components/carousel.md
+++ b/en/components/carousel.md
@@ -43,7 +43,7 @@ The next step is to import the **IgxCarouselModule** in our **app.module.ts** fi
 // app.module.ts
 
 import { HammerModule } from '@angular/platform-browser';
-import { IgxCarouselModule } from 'igniteui-angular';
+import { IgxCarouselModule } from 'igniteui-angular/carousel';
 // import { IgxCarouselModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
@@ -60,7 +60,7 @@ Alternatively, as of `16.0.0` you can import the `IgxCarouselComponent` as a sta
 // home.component.ts
 
 import { HammerModule } from '@angular/platform-browser';
-import { IGX_CAROUSEL_DIRECTIVES } from 'igniteui-angular';
+import { IGX_CAROUSEL_DIRECTIVES } from 'igniteui-angular/carousel';
 // import { IGX_CAROUSEL_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package
 
 @Component({
diff --git a/en/components/chat.md b/en/components/chat.md
index 88e459c8bd..4556ff59a9 100644
--- a/en/components/chat.md
+++ b/en/components/chat.md
@@ -1,7 +1,8 @@
 ---
 title: Angular Chat | Ignite UI | Infragistics
 _description: With the Ignite UI for Angular Chat component, you can build interactive messaging experiences with support for messages, attachments, suggestions, typing indicators, and custom templates.  
-_keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI widgets, Angular, Native Angular Components Suite, Native Angular Controls, Native Angular Components Library, Angular Chat components, Angular Chat controls  
+_keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI widgets, Angular, Native Angular Components Suite, Native Angular Controls, Native Angular Components Library, Angular Chat components, Angular Chat controls
+_license: MIT
 mentionedTypes: ["Chat"]  
 ---
 
@@ -32,7 +33,7 @@ Once installed, you can import the component in your project:
 
 ```ts
 import { Component } from '@angular/core';
-import { IgxChatComponent } from "igniteui-angular";
+import { IgxChatComponent } from "igniteui-angular/chat";
 
 @Component({
   ...
@@ -44,7 +45,7 @@ export class AppComponent { ... }
 Define the chat options and bind them in your template:
 
 ```ts
-import { IgxChatComponent, IgxChatOptions  } from "igniteui-angular";
+import { IgxChatComponent, IgxChatOptions } from "igniteui-angular/chat";
 
 public options: IgxChatOptions  = {
   currentUserId: 'me',
diff --git a/en/components/checkbox.md b/en/components/checkbox.md
index 7b01d88052..633f56011b 100644
--- a/en/components/checkbox.md
+++ b/en/components/checkbox.md
@@ -37,7 +37,7 @@ The next step is to import the `IgxCheckboxModule` in the **app.module.ts** file
 ```typescript
 // app.module.ts
 
-import { IgxCheckboxModule } from 'igniteui-angular';
+import { IgxCheckboxModule } from 'igniteui-angular/checkbox';
 // import { IgxCheckboxModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
@@ -53,7 +53,7 @@ Alternatively, as of `16.0.0` you can import the `IgxCheckboxComponent` as a sta
 ```typescript
 // home.component.ts
 
-import { IgxCheckboxComponent } from 'igniteui-angular';
+import { IgxCheckboxComponent } from 'igniteui-angular/checkbox';
 // import { IgxCheckboxComponent } from '@infragistics/igniteui-angular'; for licensed package
 
 @Component({
diff --git a/en/components/chip.md b/en/components/chip.md
index 5d4bdc704c..10767eccae 100644
--- a/en/components/chip.md
+++ b/en/components/chip.md
@@ -33,7 +33,7 @@ The next step is to import the **IgxChipsModule** in the **app.module.ts** file:
 ```typescript
 // app.module.ts
 
-import { IgxChipsModule } from 'igniteui-angular';
+import { IgxChipsModule } from 'igniteui-angular/chips';
 // import { IgxChipsModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
@@ -49,7 +49,7 @@ Alternatively, as of `16.0.0` you can import the `IgxChipComponent` as a standal
 ```typescript
 // home.component.ts
 
-import { IGX_CHIPS_DIRECTIVES } from 'igniteui-angular';
+import { IGX_CHIPS_DIRECTIVES } from 'igniteui-angular/chips';
 import { NgFor } from '@angular/common';
 // import { IGX_CHIPS_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package
 
@@ -151,7 +151,7 @@ Dragging can be enabled by setting the [`draggable`]({environment:angularApiUrl}
 Then, we need to add the `chipList` and the function, that handles the [`remove`]({environment:angularApiUrl}/classes/igxchipcomponent.html#remove) event:
 
 ```ts
-import { IBaseChipEventArgs } from 'igniteui-angular';
+import { IBaseChipEventArgs } from 'igniteui-angular/chips';
 // import { IBaseChipEventArgs } from '@infragistics/igniteui-angular'; for licensed package
 ...
 public chipList = [
@@ -279,7 +279,7 @@ To create the demo sample below, we will use the features above:
 Then, we need to add the `chipList` and the function, that handles the [`remove`]({environment:angularApiUrl}/classes/igxchipcomponent.html#remove) event:
 
 ```ts
-import { IBaseChipEventArgs } from 'igniteui-angular';
+import { IBaseChipEventArgs } from 'igniteui-angular/chips';
 // import { IBaseChipEventArgs } from '@infragistics/igniteui-angular'; for licensed package
 ...
 public chipList = [
@@ -428,7 +428,7 @@ Resize the avatar to fit the chip:
 Add the `chipList` and the functions that handle the events:
 
 ```ts
-import { IBaseChipEventArgs, IChipsAreaReorderEventArgs } from 'igniteui-angular';
+import { IBaseChipEventArgs, IChipsAreaReorderEventArgs } from 'igniteui-angular/chips';
 // import { IBaseChipEventArgs, IChipsAreaReorderEventArgs } from '@infragistics/igniteui-angular'; for licensed package
 
 ...
diff --git a/en/components/circular-progress.md b/en/components/circular-progress.md
index ddb5a91fd8..3269613129 100644
--- a/en/components/circular-progress.md
+++ b/en/components/circular-progress.md
@@ -34,7 +34,7 @@ The next step is to import the `IgxProgressBarModule` in the **app.module.ts** f
 // app.module.ts
 
 ...
-import { IgxProgressBarModule } from 'igniteui-angular';
+import { IgxProgressBarModule } from 'igniteui-angular/progressbar';
 // import { IgxProgressBarModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
@@ -50,7 +50,7 @@ Alternatively, as of `16.0.0` you can import the `IgxCircularProgressBarComponen
 ```typescript
 // home.component.ts
 
-import { IGX_CIRCULAR_PROGRESS_BAR_DIRECTIVES } from 'igniteui-angular';
+import { IGX_CIRCULAR_PROGRESS_BAR_DIRECTIVES } from 'igniteui-angular/progressbar';
 // import { IGX_CIRCULAR_PROGRESS_BAR_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package
 
 @Component({
diff --git a/en/components/combo-features.md b/en/components/combo-features.md
index 8c19a2edb3..54152ae132 100644
--- a/en/components/combo-features.md
+++ b/en/components/combo-features.md
@@ -30,7 +30,8 @@ The following demo demonstrates some of the combobox features that are enabled/d
 To get started with the combobox component, first you need to import the `IgxComboModule` in your **app.module.ts** file. Our sample also uses the [igx-switch]({environment:angularApiUrl}/classes/igxswitchcomponent.html) component to toggle combobox properties' values, so we will need the `IgxSwitchModule` as well:
 
 ```typescript
-import { IgxComboModule, IgxSwitchModule } from 'igniteui-angular';
+import { IgxComboModule } from 'igniteui-angular/combo';
+import { IgxSwitchModule } from 'igniteui-angular/switch';
 // import { IgxComboModule, IgxSwitchModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
@@ -203,7 +204,7 @@ You can set whether groups should be sorted in ascending or descending order. By
 
 ```typescript
 ...
-import { SortingDirection } from 'igniteui-angular'
+import { SortingDirection } from 'igniteui-angular/core'
 // import { SortingDirection } from '@infragistics/igniteui-angular'; for licensed package
 
 export class ComboDemo {
diff --git a/en/components/combo-remote.md b/en/components/combo-remote.md
index a1cc63d948..1a46bf6aa6 100644
--- a/en/components/combo-remote.md
+++ b/en/components/combo-remote.md
@@ -27,7 +27,7 @@ The sample below demonstrates remote binding using the [dataPreLoad]({environmen
 To get started with the ComboBox component, first you need to import the `IgxComboModule` in your **app.module.ts** file. In this demo, a remote service is used for server requests, therefore, we also need to include the `HttpClientModule`:
 
 ```typescript
-import { IgxComboModule } from 'igniteui-angular';
+import { IgxComboModule } from 'igniteui-angular/combo';
 // import { IgxComboModule } from '@infragistics/igniteui-angular'; for licensed package
 
 import { HttpClientModule } from '@angular/common/http';
@@ -52,7 +52,7 @@ The code below defines a simple service that has a `getData()` method, which rec
 ```typescript
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
-import { IForOfState } from 'igniteui-angular';
+import { IForOfState } from 'igniteui-angular/directives';
 // import { IForOfState } from '@infragistics/igniteui-angular'; for licensed package
 import { BehaviorSubject, Observable } from 'rxjs';
 
@@ -99,7 +99,7 @@ Below are listed the handlers that listen to the already defined actions and exe
 
 ```typescript
 import { ChangeDetectorRef, Component, OnInit, ViewChild } from '@angular/core';
-import { IgxComboComponent } from 'igniteui-angular';
+import { IgxComboComponent } from 'igniteui-angular/combo';
 // import { IgxComboComponent } from '@infragistics/igniteui-angular'; for licensed package
 
 import { RemoteService } from '../../grid/services/remote.service';
diff --git a/en/components/combo-templates.md b/en/components/combo-templates.md
index ddefcfbc56..398bd6b69b 100644
--- a/en/components/combo-templates.md
+++ b/en/components/combo-templates.md
@@ -25,7 +25,7 @@ The Ignite UI for Angular ComboBox Component allows defining custom templates fo
 To get started with the ComboBox component, first you need to import the `IgxComboModule` in your **app.module.ts** file:
 
 ```typescript
-import { IgxComboModule } from 'igniteui-angular';
+import { IgxComboModule } from 'igniteui-angular/combo';
 // import { IgxComboModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
diff --git a/en/components/combo.md b/en/components/combo.md
index abc27c30b7..fcc19a2326 100644
--- a/en/components/combo.md
+++ b/en/components/combo.md
@@ -46,7 +46,7 @@ For a complete introduction to the Ignite UI for Angular, read the [_getting sta
 The next step is to import the `IgxComboModule` in your **app.module.ts** file.
 
 ```typescript
-import { IgxComboModule } from 'igniteui-angular';
+import { IgxComboModule } from 'igniteui-angular/combo';
 // import { IgxComboModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
@@ -64,7 +64,7 @@ Alternatively, as of `16.0.0` you can import the `IgxComboComponent` as a standa
 ```typescript
 // home.component.ts
 
-import { IGX_COMBO_DIRECTIVES } from 'igniteui-angular';
+import { IGX_COMBO_DIRECTIVES } from 'igniteui-angular/combo';
 // import { IGX_COMBO_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package
 
 @Component({
diff --git a/en/components/date-picker.md b/en/components/date-picker.md
index 7df89f63f2..cbaef0dd81 100644
--- a/en/components/date-picker.md
+++ b/en/components/date-picker.md
@@ -41,7 +41,7 @@ The next step is to import the `IgxDatePickerModule` in your **app.module.ts** f
 ```typescript
 import { HammerModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { IgxDatePickerModule } from 'igniteui-angular';
+import { IgxDatePickerModule } from 'igniteui-angular/date-picker';
 // import { IgxDatePickerModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
@@ -59,7 +59,7 @@ Alternatively, as of `16.0.0` you can import the `IgxDatePickerComponent` as a s
 
 import { HammerModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { IGX_DATE_PICKER_DIRECTIVES } from 'igniteui-angular';
+import { IGX_DATE_PICKER_DIRECTIVES } from 'igniteui-angular/date-picker';
 // import { IGX_DATE_PICKER_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package
 
 @Component({
diff --git a/en/components/date-range-picker.md b/en/components/date-range-picker.md
index f5b700b494..b6ddef0e33 100644
--- a/en/components/date-range-picker.md
+++ b/en/components/date-range-picker.md
@@ -38,7 +38,7 @@ As the [`IgxDateRangePickerComponent`]({environment:angularApiUrl}/classes/igxda
 ```typescript
 // app.module.ts
 
-import { IgxDateRangePickerModule } from 'igniteui-angular';
+import { IgxDateRangePickerModule } from 'igniteui-angular/date-picker';
 // import { IgxDateRangePickerModule } from '@infragistics/igniteui-angular'; for licensed package
 
 import { HammerModule } from '@angular/platform-browser';
@@ -59,7 +59,7 @@ Alternatively, as of `16.0.0` you can import the [`IgxDateRangePickerComponent`]
 
 import { HammerModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { IGX_DATE_RANGE_PICKER_DIRECTIVES } from 'igniteui-angular';
+import { IGX_DATE_RANGE_PICKER_DIRECTIVES } from 'igniteui-angular/date-picker';
 // import { IGX_DATE_RANGE_PICKER_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package
 
 @Component({
diff --git a/en/components/date-time-editor.md b/en/components/date-time-editor.md
index bdedd44682..4072ef12b0 100644
--- a/en/components/date-time-editor.md
+++ b/en/components/date-time-editor.md
@@ -34,7 +34,7 @@ The next step is to import the `IgxDateTimeEditorModule` in your **app.module.ts
 // app.module.ts
 
 ...
-import { IgxDateTimeEditorModule } from 'igniteui-angular';
+import { IgxDateTimeEditorModule } from 'igniteui-angular/directives';
 // import { IgxDateTimeEditorModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
@@ -50,7 +50,8 @@ Alternatively, as of `16.0.0` you can import the `IgxDateTimeEditorDirective` as
 ```typescript
 // home.component.ts
 
-import { IgxDateTimeEditorDirective, IGX_INPUT_GROUP_DIRECTIVES } from 'igniteui-angular';
+import { IgxDateTimeEditorDirective } from 'igniteui-angular/directives';
+import { IGX_INPUT_GROUP_DIRECTIVES } from 'igniteui-angular/input-group';
 // import { IgxDateTimeEditorDirective, IGX_INPUT_GROUP_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package
 
 @Component({
diff --git a/en/components/dialog.md b/en/components/dialog.md
index 6a74279a69..344c90e9fd 100644
--- a/en/components/dialog.md
+++ b/en/components/dialog.md
@@ -34,7 +34,7 @@ The next step is to import the `IgxDialogModule` in your **app.module.ts** file.
 // app.module.ts
 
 ...
-import { IgxDialogModule } from 'igniteui-angular';
+import { IgxDialogModule } from 'igniteui-angular/dialog';
 // import { IgxDialogModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
@@ -50,7 +50,9 @@ Alternatively, as of `16.0.0` you can import the `IgxDialogComponent` as a stand
 ```typescript
 // home.component.ts
 
-import { IGX_DIALOG_DIRECTIVES, IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular';
+import { IGX_DIALOG_DIRECTIVES } from 'igniteui-angular/dialog';
+import { IgxButtonDirective } from 'igniteui-angular/directives';
+import { IgxRippleDirective } from 'igniteui-angular/directives';
 // import { IGX_DIALOG_DIRECTIVES, IgxButtonDirective, IgxRippleDirective } from '@infragistics/igniteui-angular'; for licensed package
 
 @Component({
@@ -182,7 +184,7 @@ There are two ways to change the position at which the `igx-dialog` will be show
 - Using [`open`]({environment:angularApiUrl}/classes/igxdialogcomponent.html#open) method and pass a valid [`overlaySettings`]({environment:angularApiUrl}/interfaces/overlaysettings.html). Example:
 
 ```typescript
-import { PositionSettings, OverlaySettings, GlobalPositionStrategy, NoOpScrollStrategy, HorizontalAlignment, VerticalAlignment } from 'igniteui-angular';
+import { PositionSettings, OverlaySettings, GlobalPositionStrategy, NoOpScrollStrategy, HorizontalAlignment, VerticalAlignment } from 'igniteui-angular/core';
 // import { PositionSettings, OverlaySettings, GlobalPositionStrategy, NoOpScrollStrategy, HorizontalAlignment, VerticalAlignment } from '@infragistics/igniteui-angular'; for licensed package
 
 @Component({...})
@@ -215,7 +217,7 @@ export class HomeComponent {
 
 ```typescript
 import { useAnimation } from '@angular/animations';
-import { PositionSettings, HorizontalAlignment, VerticalAlignment } from 'igniteui-angular';
+import { PositionSettings, HorizontalAlignment, VerticalAlignment } from 'igniteui-angular/core';
 // import { PositionSettings, HorizontalAlignment, VerticalAlignment } from '@infragistics/igniteui-angular'; for licensed package
 
 @Component({...})
diff --git a/en/components/divider.md b/en/components/divider.md
index 02d765791e..3957a4b0d5 100644
--- a/en/components/divider.md
+++ b/en/components/divider.md
@@ -35,7 +35,7 @@ The next step is to import the `IgxDividerModule` in your **app.module.ts** file
 // app.module.ts
 
 ...
-import { IgxDividerModule } from 'igniteui-angular';
+import { IgxDividerModule } from 'igniteui-angular/directives';
 // import { IgxDividerModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
@@ -51,7 +51,7 @@ Alternatively, as of `16.0.0` you can import the `IgxDividerDirective` as a stan
 ```typescript
 // home.component.ts
 
-import { IgxDividerDirective } from 'igniteui-angular';
+import { IgxDividerDirective } from 'igniteui-angular/directives';
 // import { IgxDividerDirective } from '@infragistics/igniteui-angular'; for licensed package
 
 @Component({
diff --git a/en/components/drag-drop.md b/en/components/drag-drop.md
index d46e103bc9..b5c34f2c3e 100644
--- a/en/components/drag-drop.md
+++ b/en/components/drag-drop.md
@@ -37,7 +37,7 @@ The next step is to import the `IgxDragDropModule` in your **app.module.ts** fil
 // app.module.ts
 
 ...
-import { IgxDragDropModule } from 'igniteui-angular';
+import { IgxDragDropModule } from 'igniteui-angular/directives';
 // import { IgxDragDropModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
@@ -53,7 +53,7 @@ Alternatively, as of `16.0.0` you can import the `IgxDragDirective` and `IgxDrop
 ```typescript
 // home.component.ts
 
-import { IGX_DRAG_DROP_DIRECTIVES } from 'igniteui-angular';
+import { IGX_DRAG_DROP_DIRECTIVES } from 'igniteui-angular/directives';
 // import { IGX_DRAG_DROP_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package
 
 @Component({
diff --git a/en/components/drop-down-virtual.md b/en/components/drop-down-virtual.md
index b166647984..85f873a311 100644
--- a/en/components/drop-down-virtual.md
+++ b/en/components/drop-down-virtual.md
@@ -27,7 +27,7 @@ First, we need to import the `IgxForOfModule` in the module of the component tha
 
 ```typescript
 // app.module.ts
-import { IgxForOfModule } from 'igniteui-angular';
+import { IgxForOfModule } from 'igniteui-angular/directives';
 // import { IgxForOfModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
@@ -164,7 +164,7 @@ First, we need to define a remote service for fetching data:
 // remote.service.ts
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
-import { IForOfState } from 'igniteui-angular';
+import { IForOfState } from 'igniteui-angular/directives';
 // import { IForOfState } from '@infragistics/igniteui-angular'; for licensed package
 import { BehaviorSubject, Observable } from 'rxjs';
 
diff --git a/en/components/drop-down.md b/en/components/drop-down.md
index 24aacf65aa..9119f123c1 100644
--- a/en/components/drop-down.md
+++ b/en/components/drop-down.md
@@ -36,7 +36,7 @@ The next step is to import the `IgxDropDownModule` in your **app.module.ts** fil
 // app.module.ts
 
 ...
-import { IgxDropDownModule } from 'igniteui-angular';
+import { IgxDropDownModule } from 'igniteui-angular/drop-down';
 // import { IgxDropDownModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
@@ -53,7 +53,9 @@ Alternatively, as of `16.0.0` you can import the `IgxDropDownComponent` as a sta
 // home.component.ts
 
 import { NgFor } from '@angular/common';
-import { IGX_DROP_DOWN_DIRECTIVES, IgxToggleActionDirective, IgxButtonDirective } from 'igniteui-angular';
+import { IGX_DROP_DOWN_DIRECTIVES } from 'igniteui-angular/drop-down';
+import { IgxToggleActionDirective } from 'igniteui-angular/directives';
+import { IgxButtonDirective } from 'igniteui-angular/directives';
 // import { IGX_DROP_DOWN_DIRECTIVES, IgxToggleActionDirective, IgxButtonDirective } from '@infragistics/igniteui-angular'; for licensed package
 
 @Component({
diff --git a/en/components/expansion-panel.md b/en/components/expansion-panel.md
index 2e9f4f6ead..fbb3bb6e4f 100644
--- a/en/components/expansion-panel.md
+++ b/en/components/expansion-panel.md
@@ -39,7 +39,7 @@ The next step is to import the `IgxExpansionPanelModule` in your **app.module.ts
 ```typescript
 // app.module.ts
 ...
-import { IgxExpansionPanelModule } from 'igniteui-angular';
+import { IgxExpansionPanelModule } from 'igniteui-angular/expansion-panel';
 // import { IgxExpansionPanelModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
@@ -55,7 +55,7 @@ Alternatively, as of `16.0.0` you can import the `IgxExpansionPanelComponent` as
 ```typescript
 // home.component.ts
 
-import { IGX_EXPANSION_PANEL_DIRECTIVES } from 'igniteui-angular';
+import { IGX_EXPANSION_PANEL_DIRECTIVES } from 'igniteui-angular/expansion-panel';
 // import { IGX_EXPANSION_PANEL_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package
 
 @Component({
@@ -109,7 +109,7 @@ We can do this by binding the description to the control [`collapsed`]({environm
 
 ```typescript
 // in expansion-panel.component.ts
-import { IgxExpansionPanelComponent } from 'igniteui-angular';
+import { IgxExpansionPanelComponent } from 'igniteui-angular/expansion-panel';
 // import { IgxExpansionPanelComponent } from '@infragistics/igniteui-angular'; for licensed package
 
 @Component({...})
@@ -403,7 +403,8 @@ Assuming the igxExpansionPanel is already imported in `app.module.ts` as previou
 ```typescript
 // in expansion-panel.component.ts
 import { useAnimation } from '@angular/animations';
-import { IgxExpansionPanelComponent, slideInLeft, slideOutRight } from 'igniteui-angular';
+import { IgxExpansionPanelComponent } from 'igniteui-angular/expansion-panel';
+import { slideInLeft, slideOutRight } from 'igniteui-angular/animations';
 // import { IgxExpansionPanelComponent, slideInLeft, slideOutRight } from '@infragistics/igniteui-angular'; for licensed package
 
 @Component({...})
diff --git a/en/components/exporter-csv.md b/en/components/exporter-csv.md
index e6c6e75d14..3d85609645 100644
--- a/en/components/exporter-csv.md
+++ b/en/components/exporter-csv.md
@@ -31,7 +31,7 @@ To start using the IgniteUI CSV Exporter first import the [`IgxCsvExporterServic
 // app.module.ts
 
 ...
-import { IgxCsvExporterService } from 'igniteui-angular';
+import { IgxCsvExporterService } from 'igniteui-angular/grids/core';
 // import { IgxCsvExporterService } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
@@ -58,7 +58,7 @@ Here is the code which will execute the export process in the component's typesc
 // component.ts
 
 ...
-import { IgxCsvExporterService, IgxCsvExporterOptions, CsvFileTypes } from 'igniteui-angular';
+import { IgxCsvExporterService, IgxCsvExporterOptions, CsvFileTypes } from 'igniteui-angular/grids/core';
 // import { IgxCsvExporterService, IgxCsvExporterOptions, CsvFileTypes } from '@infragistics/igniteui-angular'; for licensed package
 ...
 
@@ -96,7 +96,8 @@ Here is an example:
 // component.ts
 
 ...
-import { IgxCsvExporterService, IgxCsvExporterOptions, CsvFileTypes, IgxGridComponent } from 'igniteui-angular';
+import { IgxCsvExporterService, IgxCsvExporterOptions, CsvFileTypes } from 'igniteui-angular/grids/core';
+import { IgxGridComponent } from 'igniteui-angular/grids/grid';
 // import { IgxCsvExporterService, IgxCsvExporterOptions, CsvFileTypes, IgxGridComponen } from '@infragistics/igniteui-angular'; for licensed package
 ...
 
diff --git a/en/components/exporter-excel.md b/en/components/exporter-excel.md
index e1329ebb9b..da400abd00 100644
--- a/en/components/exporter-excel.md
+++ b/en/components/exporter-excel.md
@@ -32,7 +32,7 @@ To start using the IgniteUI Excel Exporter first import the [`IgxExcelExporterSe
 // app.module.ts
 
 ...
-import { IgxExcelExporterService } from 'igniteui-angular';
+import { IgxExcelExporterService } from 'igniteui-angular/grids/core';
 // import { IgxExcelExporterService } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
@@ -59,7 +59,7 @@ Here is the code which will execute the export process in the component's typesc
 // component.ts
 
 ...
-import { IgxExcelExporterService, IgxExcelExporterOptions } from 'igniteui-angular';
+import { IgxExcelExporterService, IgxExcelExporterOptions } from 'igniteui-angular/grids/core';
 // import { IgxExcelExporterService, IgxExcelExporterOptions } from '@infragistics/igniteui-angular'; for licensed package
 ...
 
diff --git a/en/components/for-of.md b/en/components/for-of.md
index b392b2ab70..a507fe9414 100644
--- a/en/components/for-of.md
+++ b/en/components/for-of.md
@@ -34,7 +34,7 @@ The next step is to import the `IgxForOfModule` in your **app.module.ts** file.
 ```typescript
 // app.module.ts
 
-import { IgxForOfModule } from 'igniteui-angular';
+import { IgxForOfModule } from 'igniteui-angular/directives';
 // import { IgxForOfModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
@@ -52,7 +52,7 @@ Alternatively, as of `16.0.0` you can import the `IgxForOfDirective` as a standa
 ```typescript
 // home.component.ts
 
-import { IgxForOfDirective } from 'igniteui-angular';
+import { IgxForOfDirective } from 'igniteui-angular/directives';
 // import { IgxForOfDirective } from '@infragistics/igniteui-angular'; for licensed package
 
 @Component({
diff --git a/en/components/general/code-splitting-and-multiple-entry-points.md b/en/components/general/code-splitting-and-multiple-entry-points.md
index 6f1d6fd341..89dbdd057d 100644
--- a/en/components/general/code-splitting-and-multiple-entry-points.md
+++ b/en/components/general/code-splitting-and-multiple-entry-points.md
@@ -31,7 +31,7 @@ With the new multiple entry points architecture, each component or group of rela
 
 ### Core Entry Points
 
-- `igniteui-angular/core` - Core utilities, services, and base types (e.g., `IgxOverlayService`, `DisplayDensity`)
+- `igniteui-angular/core` - Core utilities, services, and base types (e.g., `IgxOverlayService`)
 - `igniteui-angular/directives` - Common directives
 
 ### Component Entry Points
@@ -49,6 +49,7 @@ Each component has its own entry point following the pattern `igniteui-angular/<
 - `igniteui-angular/calendar`
 - `igniteui-angular/card`
 - `igniteui-angular/carousel`
+- `igniteui-angular/chat`
 - `igniteui-angular/checkbox`
 - `igniteui-angular/chips`
 - `igniteui-angular/combo`
@@ -118,7 +119,6 @@ import {
   IgxTreeGridComponent,
   IgxInputDirective,
   IgxBottomNavComponent,
-  DisplayDensity, 
   Direction, 
   GridBaseAPIService,
   IgxOverlayService,
@@ -129,7 +129,7 @@ import {
 #### After (v21.0.0)
 
 ```typescript
-import { DisplayDensity, IgxOverlayService } from 'igniteui-angular/core';
+import { IgxOverlayService } from 'igniteui-angular/core';
 import { IFilteringExpression, GridBaseAPIService } from 'igniteui-angular/grids/core';
 import { IgxGridComponent } from 'igniteui-angular/grids/grid';
 import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid';
diff --git a/en/components/general/getting-started.md b/en/components/general/getting-started.md
index 83de36784b..a7761089f1 100644
--- a/en/components/general/getting-started.md
+++ b/en/components/general/getting-started.md
@@ -246,7 +246,7 @@ We will also define the data of the grid and the title of our application that a
 // app.component.ts
 
 import { Component } from '@angular/core';
-import { IgxGridComponent, IgxColumnComponent } from 'igniteui-angular';
+import { IgxGridComponent, IgxColumnComponent } from 'igniteui-angular/grids/grid';
 
 @Component({
   selector: 'app-root',
diff --git a/en/components/general/how-to/how-to-use-standalone-components.md b/en/components/general/how-to/how-to-use-standalone-components.md
index 4799d77820..865fcd1b44 100644
--- a/en/components/general/how-to/how-to-use-standalone-components.md
+++ b/en/components/general/how-to/how-to-use-standalone-components.md
@@ -13,7 +13,7 @@ Angular 14 introduced the concept of [standalone components](https://angular.io/
 Starting with Angular 16 and Ignite UI for Angular 16.0 you can now simply add the imports that your `standalone` component needs in the `imports` property. In the following example `IGX_GRID_DIRECTIVES` can be used to import all grid related components and directives.
 
 ```typescript
-import { IGX_GRID_DIRECTIVES } from 'igniteui-angular';
+import { IGX_GRID_DIRECTIVES } from 'igniteui-angular/grids/grid';
 
 @Component({
     selector: 'app-grid-sample',
@@ -26,7 +26,7 @@ import { IGX_GRID_DIRECTIVES } from 'igniteui-angular';
 But you can also import all components used by your `standalone` component individually. Example with the `IgxGridComponent` and `IgxColumnComponent` when only these two are used by another component is as follows.
 
 ```typescript
-import { IgxGridComponent, IgxColumnComponent } from 'igniteui-angular';
+import { IgxGridComponent, IgxColumnComponent } from 'igniteui-angular/grids/grid';
 
 @Component({
     selector: 'app-grid-sample',
@@ -40,7 +40,7 @@ In addition, as all existing modules are preserved but now only import and expor
 
 ```typescript
 // `NgModule` import of the `IgxGridModule` module, which is equivalent to IGX_GRID_DIRECTIVES in terms of exported components and directives.
-import { IgxGridModule } from 'igniteui-angular';
+import { IgxGridModule } from 'igniteui-angular/grids/grid';
 
 @Component({
     selector: 'app-grid-sample',
diff --git a/en/components/general/localization.md b/en/components/general/localization.md
index ac880944d5..55596bbac8 100644
--- a/en/components/general/localization.md
+++ b/en/components/general/localization.md
@@ -78,7 +78,7 @@ Alternatively, you can call the `changei18n()` function passing the correspondin
 ```typescript
 // app.component.ts
 import { Component, OnInit } from '@angular/core';
-import { changei18n } from "igniteui-angular";
+import { changei18n } from "igniteui-angular/core";
 import { IgxResourceStringsJA } from 'igniteui-angular-i18n';
 
 @Component({
@@ -102,7 +102,7 @@ export class AppComponent implements OnInit {
 ```typescript
 // app.component.ts
 import { Component, OnInit } from '@angular/core';
-import { changei18n, IGridResourceStrings } from "igniteui-angular";
+import { changei18n, IGridResourceStrings } from "igniteui-angular/core";
 
 @Component({
   selector: 'app-root',
@@ -131,7 +131,7 @@ Alternatively, you may get all currently available component resource strings. T
 ```typescript
 // app.component.ts
 import { Component, OnInit } from '@angular/core';
-import { changei18n, GridResourceStringsEN, TimePickerResourceStringsEN } from "igniteui-angular";
+import { changei18n, GridResourceStringsEN, TimePickerResourceStringsEN } from "igniteui-angular/core";
 
 @Component({
   selector: 'app-root',
diff --git a/en/components/general/open-source-vs-premium.md b/en/components/general/open-source-vs-premium.md
index fe5298968d..0942901c61 100644
--- a/en/components/general/open-source-vs-premium.md
+++ b/en/components/general/open-source-vs-premium.md
@@ -78,6 +78,7 @@ Start with Grid Lite for essential needs and seamlessly upgrade to the full-feat
 | Chart Step Line                   | ❌          | ✅      |
 | Chart Treemap                     | ❌          | ✅      |
 | Chart Waterfall                   | ❌          | ✅      |
+| Chat                              | ✅          | ✅      |
 | Checkbox                          | ✅          | ✅      |
 | Chip                              | ✅          | ✅      |
 | Chip Area                         | ✅          | ✅      |
diff --git a/en/components/grid/grid.md b/en/components/grid/grid.md
index 89dcb6a308..00e045b803 100644
--- a/en/components/grid/grid.md
+++ b/en/components/grid/grid.md
@@ -87,7 +87,7 @@ The next step is to import the `IgxGridModule` in your **app.module.ts** file.
 ```typescript
 // app.module.ts
 
-import { IgxGridModule } from 'igniteui-angular';
+import { IgxGridModule } from 'igniteui-angular/grids/grid';
 // import { IgxGridModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
@@ -105,7 +105,7 @@ Alternatively, as of `16.0.0` you can import the `IgxGridComponent` as a standal
 ```typescript
 // home.component.ts
 
-import { IGX_GRID_DIRECTIVES } from 'igniteui-angular';
+import { IGX_GRID_DIRECTIVES } from 'igniteui-angular/grids/grid';
 // import { IGX_GRID_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package
 
 @Component({
diff --git a/en/components/grids_templates/cascading-combos.md b/en/components/grids_templates/cascading-combos.md
index 144e29a643..9d8eedef28 100644
--- a/en/components/grids_templates/cascading-combos.md
+++ b/en/components/grids_templates/cascading-combos.md
@@ -29,7 +29,7 @@ Once the column editing is enabled, you can start by adding your [Single Select
 To get started with the [Simple ComboBox component](../simple-combo.md#angular-simple-combobox-features), first you need to import the `IgxSimpleComboModule` in your **app.module.ts** file:
 
 ```typescript
-import { IgxSimpleComboModule } from 'igniteui-angular';
+import { IgxSimpleComboModule } from 'igniteui-angular/simple-combo';
 
 @NgModule({
     imports: [
diff --git a/en/components/grids_templates/column-hiding.md b/en/components/grids_templates/column-hiding.md
index 21596b05c6..1ba1aaa6dd 100644
--- a/en/components/grids_templates/column-hiding.md
+++ b/en/components/grids_templates/column-hiding.md
@@ -285,7 +285,7 @@ Let's say we want to manually define our [`IgxColumnActionsComponent`]({environm
 import {
     ...
     IgxColumnActionsModule 
-} from 'igniteui-angular';
+} from 'igniteui-angular/grids/core';
 // import { ..., IgxColumnActionsModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
@@ -404,7 +404,7 @@ Let's create a couple of nicely designed radio buttons for our options! We just
 import {
     ...
     IgxRadioModule    
-} from 'igniteui-angular';
+} from 'igniteui-angular/radio';
 // import { ..., IgxRadioModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
diff --git a/en/components/grids_templates/filtering.md b/en/components/grids_templates/filtering.md
index b034c473a7..15d4a7383a 100644
--- a/en/components/grids_templates/filtering.md
+++ b/en/components/grids_templates/filtering.md
@@ -354,7 +354,7 @@ public ngAfterViewInit() {
 The [`filteringLogic`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#filteringlogic) property of the @@igComponent controls how filtering multiple columns will resolve in the @@igComponent. You can change it at any time through the @@igComponent API, or through the @@igComponent input property.
 
 ```typescript
-import { FilteringLogic } from 'igniteui-angular';
+import { FilteringLogic } from 'igniteui-angular/grids/core';
 // import { FilteringLogic } from '@infragistics/igniteui-angular'; for licensed package
 ...
 
@@ -570,7 +570,7 @@ By default, after a filtering is applied, the Tree Grid component displays the r
 ```
 
 ```typescript
-import { TreeGridMatchingRecordsOnlyFilteringStrategy } from "igniteui-angular";
+import { TreeGridMatchingRecordsOnlyFilteringStrategy } from "igniteui-angular/grids/core";
 ...
 public matchingRecordsOnlyStrategy = new TreeGridMatchingRecordsOnlyFilteringStrategy();
 ```
diff --git a/en/components/grids_templates/row-actions.md b/en/components/grids_templates/row-actions.md
index 9f6c72f948..bb43029f65 100644
--- a/en/components/grids_templates/row-actions.md
+++ b/en/components/grids_templates/row-actions.md
@@ -31,7 +31,7 @@ The first step is to import the **IgxActionStripModule** in our **app.module.ts*
 // app.module.ts
 
 ...
-import { IgxActionStripModule } from 'igniteui-angular';
+import { IgxActionStripModule } from 'igniteui-angular/action-strip';
 // import { IgxActionStripModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
diff --git a/en/components/grids_templates/row-drag.md b/en/components/grids_templates/row-drag.md
index de4f7d11bc..e4c3dd8810 100644
--- a/en/components/grids_templates/row-drag.md
+++ b/en/components/grids_templates/row-drag.md
@@ -93,7 +93,7 @@ We can define where we want our rows to be dropped using the [`igxDrop` directiv
 First we need to import the `IgxDragDropModule` in our app module:
 
 ```typescript
-import { ..., IgxDragDropModule } from 'igniteui-angular';
+import { ..., IgxDragDropModule } from 'igniteui-angular/directives';
 // import { ..., IgxDragDropModule } from '@infragistics/igniteui-angular'; for licensed package
 ...
 @NgModule({
diff --git a/en/components/grids_templates/row-editing.md b/en/components/grids_templates/row-editing.md
index 0b537dbdea..0eec5b77a9 100644
--- a/en/components/grids_templates/row-editing.md
+++ b/en/components/grids_templates/row-editing.md
@@ -159,7 +159,7 @@ Then define a @@igComponent with bound data source and [`rowEditable`]({environm
 ```typescript
 import { Component, ViewChild } from '@angular/core';
 import { data } from './data';
-import { IgxGridComponent } from 'igniteui-angular';
+import { IgxGridComponent } from 'igniteui-angular/grids/grid';
 // import { IgxGridComponent } from '@infragistics/igniteui-angular'; for licensed package
 
 @Component({
@@ -184,7 +184,7 @@ export class GridRowEditSampleComponent {
 
 ```typescript
 import { Component, OnInit, ViewChild } from '@angular/core';
-import { IgxTreeGridComponent } from 'igniteui-angular';
+import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid';
 // import { IgxTreeGridComponent } from '@infragistics/igniteui-angular'; for licensed package
 import { FLAT_DATA } from './data';
 
@@ -218,7 +218,7 @@ export class TreeGridRowEditSampleComponent implements OnInit {
 
 ```typescript
 import { Component, OnInit, ViewChild } from '@angular/core';
-import { IgxRowIslandComponent, IgxHierarchicalGridComponent } from 'igniteui-angular';
+import { IgxRowIslandComponent, IgxHierarchicalGridComponent } from 'igniteui-angular/grids/hierarchical-grid';
 // import { IgxRowIslandComponent, IgxHierarchicalGridComponen } from '@infragistics/igniteui-angular'; for licensed package
 import { SINGERS } from './data';
 
diff --git a/en/components/grids_templates/sorting.md b/en/components/grids_templates/sorting.md
index c63ea38c0e..ca27f599ce 100644
--- a/en/components/grids_templates/sorting.md
+++ b/en/components/grids_templates/sorting.md
@@ -108,7 +108,7 @@ You can sort any column or a combination of columns through the @@igComponent AP
 @@if (igxName === 'IgxTreeGrid') {
 
 ```typescript
-import { SortingDirection } from 'igniteui-angular';
+import { SortingDirection } from 'igniteui-angular/grids/core';
 // import { SortingDirection } from '@infragistics/igniteui-angular'; for licensed package
 
 // Perform a case insensitive ascending sort on the ProductName column.
@@ -125,7 +125,7 @@ this.@@igObjectRef.sort([
 @@if (igxName !== 'IgxTreeGrid') {
 
 ```typescript
-import { SortingDirection } from 'igniteui-angular';
+import { SortingDirection } from 'igniteui-angular/grids/core';
 // import { SortingDirection } from '@infragistics/igniteui-angular'; for licensed package
 
 // Perform a case insensitive ascending sort on the ProductName column.
diff --git a/en/components/grids_templates/summaries.md b/en/components/grids_templates/summaries.md
index acabb2e7ad..3e61781d65 100644
--- a/en/components/grids_templates/summaries.md
+++ b/en/components/grids_templates/summaries.md
@@ -226,7 +226,7 @@ If these functions do not fulfill your requirements you can provide a custom sum
 @@if (igxName !== 'IgxHierarchicalGrid') {
 
 ```typescript
-import { IgxSummaryResult, IgxSummaryOperand, IgxNumberSummaryOperand, IgxDateSummaryOperand } from 'igniteui-angular';
+import { IgxSummaryResult, IgxSummaryOperand, IgxNumberSummaryOperand, IgxDateSummaryOperand } from 'igniteui-angular/core';
 // import { IgxSummaryResult, IgxSummaryOperand, IgxNumberSummaryOperand, IgxDateSummaryOperand } from '@infragistics/igniteui-angular'; for licensed package
 
 class MySummary extends IgxNumberSummaryOperand {
@@ -250,7 +250,8 @@ class MySummary extends IgxNumberSummaryOperand {
 @@if (igxName === 'IgxHierarchicalGrid') {
 
 ```typescript
-import { IgxRowIslandComponent, IgxHierarchicalGridComponent, IgxNumberSummaryOperand, IgxSummaryResult } from 'igniteui-angular';
+import { IgxRowIslandComponent, IgxHierarchicalGridComponent } from 'igniteui-angular/grids/hierarchical-grid';
+import { IgxNumberSummaryOperand, IgxSummaryResult } from 'igniteui-angular/core';
 // import { IgxRowIslandComponent, IgxHierarchicalGridComponent, IgxNumberSummaryOperand, IgxSummaryResult } from '@infragistics/igniteui-angular'; for licensed package
 
 class MySummary extends IgxNumberSummaryOperand {
diff --git a/en/components/hierarchicalgrid/hierarchical-grid.md b/en/components/hierarchicalgrid/hierarchical-grid.md
index 36b38c8bd2..dd65ac0f3f 100644
--- a/en/components/hierarchicalgrid/hierarchical-grid.md
+++ b/en/components/hierarchicalgrid/hierarchical-grid.md
@@ -38,7 +38,7 @@ The next step is to import the `IgxHierarchicalGridModule` in your **app.module.
 ```typescript
 // app.module.ts
 
-import { IgxHierarchicalGridModule } from 'igniteui-angular';
+import { IgxHierarchicalGridModule } from 'igniteui-angular/grids/hierarchical-grid';
 // import { IgxHierarchicalGridModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
@@ -56,7 +56,7 @@ Alternatively, as of `16.0.0` you can import the `IgxHierarchicalGridComponent`
 ```typescript
 // home.component.ts
 
-import { IGX_HIERARCHICAL_GRID_DIRECTIVES } from 'igniteui-angular';
+import { IGX_HIERARCHICAL_GRID_DIRECTIVES } from 'igniteui-angular/grids/hierarchical-grid';
 // import { IGX_HIERARCHICAL_GRID_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package
 
 @Component({
diff --git a/en/components/icon-button.md b/en/components/icon-button.md
index 9cee5acf21..3ece82a2c2 100644
--- a/en/components/icon-button.md
+++ b/en/components/icon-button.md
@@ -34,7 +34,7 @@ The next step is to import the `IgxIconButtonDirective` as a standalone dependen
 // home.component.ts
 
 ...
-import { IgxIconButtonDirective } from 'igniteui-angular';
+import { IgxIconButtonDirective } from 'igniteui-angular/directives';
 // import { IgxIconButtonDirective } from '@infragistics/igniteui-angular'; for licensed package
 
 @Component({
diff --git a/en/components/icon-service.md b/en/components/icon-service.md
index d3bf86cbd2..3fb1ded2e3 100644
--- a/en/components/icon-service.md
+++ b/en/components/icon-service.md
@@ -16,7 +16,8 @@ The Ignite UI for Angular Icon Service provides several methods that allow users
 The icon service can be imported directly from the Ignite UI for Angular package.
 
 ```ts
-import { IgxIconComponent, IgxIconService } from 'igniteui-angular';
+import { IgxIconComponent } from 'igniteui-angular/icon';
+import { IgxIconService } from 'igniteui-angular/core';
 
 
 @Component({
diff --git a/en/components/icon.md b/en/components/icon.md
index ffcae2de62..f5231794e8 100644
--- a/en/components/icon.md
+++ b/en/components/icon.md
@@ -33,7 +33,7 @@ The next step is to import the `IgxIconModule` in your **app.module.ts** file.
 ```typescript
 // app.module.ts
 
-import { IgxIconModule } from 'igniteui-angular';
+import { IgxIconModule } from 'igniteui-angular/icon';
 // import { IgxIconModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
@@ -51,7 +51,7 @@ Alternatively, as of `16.0.0` you can import the `IgxIconComponent` as a standal
 ```typescript
 // home.component.ts
 
-import { IgxIconComponent } from 'igniteui-angular';
+import { IgxIconComponent } from 'igniteui-angular/icon';
 // import { IgxIconComponent } from '@infragistics/igniteui-angular'; for licensed package
 
 @Component({
diff --git a/en/components/input-group.md b/en/components/input-group.md
index 7675a35e44..83c18bfd2e 100644
--- a/en/components/input-group.md
+++ b/en/components/input-group.md
@@ -36,7 +36,7 @@ Note that the `IgxInputGroupComponent` also depends on the Angular **FormsModule
 // app.module.ts
 
 import { FormsModule } from '@angular/forms';
-import { IgxInputGroupModule } from 'igniteui-angular';
+import { IgxInputGroupModule } from 'igniteui-angular/input-group';
 // import { IgxInputGroupModule } from '@infragistics/igniteui-angular'; for licensed package
 
 
@@ -54,7 +54,8 @@ Alternatively, as of `16.0.0` you can import the `IgxInputGroupComponent` as a s
 // home.component.ts
 
 import { FormsModule } from '@angular/forms';
-import { IGX_INPUT_GROUP_DIRECTIVES, IgxIconComponent } from 'igniteui-angular';
+import { IGX_INPUT_GROUP_DIRECTIVES } from 'igniteui-angular/input-group';
+import { IgxIconComponent } from 'igniteui-angular/icon';
 // import { IGX_INPUT_GROUP_DIRECTIVES, IgxIconComponent } from '@infragistics/igniteui-angular'; for licensed package
 
 @Component({
diff --git a/en/components/label-input.md b/en/components/label-input.md
index cbeea8f8fb..461e8aed31 100644
--- a/en/components/label-input.md
+++ b/en/components/label-input.md
@@ -34,7 +34,7 @@ The next step is to import the `IgxInputGroupModule` in your **app.module.ts** f
 // app.module.ts
 
 import { FormsModule } from '@angular/forms';
-import { IgxInputGroupModule } from 'igniteui-angular';
+import { IgxInputGroupModule } from 'igniteui-angular/input-group';
 // import { IgxInputGroupModule } from '@infragistics/igniteui-angular'; for licensed package
 
 
@@ -52,7 +52,7 @@ Alternatively, as of `16.0.0` you can import the `IgxLabelDirective`, `IgxInputD
 // home.component.ts
 
 import { FormsModule } from '@angular/forms';
-import { IGX_INPUT_GROUP_DIRECTIVES } from 'igniteui-angular';
+import { IGX_INPUT_GROUP_DIRECTIVES } from 'igniteui-angular/input-group';
 // import { IGX_INPUT_GROUP_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package
 
 @Component({
diff --git a/en/components/linear-progress.md b/en/components/linear-progress.md
index 7e5fe0214a..eb8e33eb74 100644
--- a/en/components/linear-progress.md
+++ b/en/components/linear-progress.md
@@ -34,7 +34,7 @@ The next step is to import the `IgxProgressBarModule` in the **app.module.ts** f
 // app.module.ts
 
 ...
-import { IgxProgressBarModule } from 'igniteui-angular';
+import { IgxProgressBarModule } from 'igniteui-angular/progressbar';
 // import { IgxProgressBarModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
@@ -50,7 +50,7 @@ Alternatively, as of `16.0.0` you can import the `IgxLinearProgressBarComponent`
 ```typescript
 // home.component.ts
 
-import { IGX_LINEAR_PROGRESS_BAR_DIRECTIVES } from 'igniteui-angular';
+import { IGX_LINEAR_PROGRESS_BAR_DIRECTIVES } from 'igniteui-angular/progressbar';
 // import { IGX_LINEAR_PROGRESS_BAR_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package
 
 @Component({
@@ -166,7 +166,7 @@ Let's update our previous sample by using the aforementioned text properties. We
 And do not forget to import the [`IgxTextAlign`]({environment:angularApiUrl}/enums/igxtextalign.html) enumerator in your component if you're using the `textAlign` property.
 
 ```typescript
-import { ..., IgxTextAlign } from 'igniteui-angular';
+import { ..., IgxTextAlign } from 'igniteui-angular/progressbar';
 // import { ..., IgxTextAlign } from '@infragistics/igniteui-angular'; for licensed package
 ...
 
diff --git a/en/components/list.md b/en/components/list.md
index 34ec7cbda0..fb12b53111 100644
--- a/en/components/list.md
+++ b/en/components/list.md
@@ -39,7 +39,7 @@ The next step is to import the `IgxListModule` in the **app.module.ts** file.
 // app.module.ts
 
 import { HammerModule } from '@angular/platform-browser';
-import { IgxListModule } from 'igniteui-angular';
+import { IgxListModule } from 'igniteui-angular/list';
 // import { IgxListModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
@@ -56,7 +56,7 @@ Alternatively, as of `16.0.0` you can import the `IgxListComponent` as a standal
 // home.component.ts
 
 import { HammerModule } from '@angular/platform-browser';
-import { IGX_LIST_DIRECTIVES } from 'igniteui-angular';
+import { IGX_LIST_DIRECTIVES } from 'igniteui-angular/list';
 // import { IGX_LIST_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package
 
 @Component({
@@ -232,11 +232,9 @@ We can use some of our other components in conjunction with the [`IgxList`]({env
 // app.module.ts
 
 ...
-import {
-    IgxListModule,
-    IgxAvatarModule,
-    IgxIconModule
-} from 'igniteui-angular';
+import { IgxListModule } from 'igniteui-angular/list';
+import { IgxAvatarModule } from 'igniteui-angular/avatar';
+import { IgxIconModule } from 'igniteui-angular/icon';
 // import { IgxListModule, IgxAvatarModule, IgxIconModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
@@ -319,7 +317,7 @@ Let's also allow the user to choose the size of the list by using the `--ig-size
 ```typescript
 // app.module.ts
 ...
-import { IgxButtonGroupModule } from 'igniteui-angular';
+import { IgxButtonGroupModule } from 'igniteui-angular/button-group';
 // import { IgxButtonGroupModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
@@ -513,7 +511,8 @@ It's time to import the `IgxFilterModule` and the `IgxInputGroupModule` in our a
 ```typescript
 // app.module.ts
 ...
-import { IgxFilterModule, IgxInputGroupModule } from 'igniteui-angular';
+import { IgxFilterModule } from 'igniteui-angular/directives';
+import { IgxInputGroupModule } from 'igniteui-angular/input-group';
 // import { IgxFilterModule, IgxInputGroupModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
@@ -522,7 +521,7 @@ import { IgxFilterModule, IgxInputGroupModule } from 'igniteui-angular';
 
 // contacts.component.ts
 ...
-import { IgxFilterOptions } from 'igniteui-angular';
+import { IgxFilterOptions } from 'igniteui-angular/directives';
 // import { IgxFilterOptions } from '@infragistics/igniteui-angular'; for licensed package
 
 @Component({...})
diff --git a/en/components/mask.md b/en/components/mask.md
index ecd1d347c2..75810901cf 100644
--- a/en/components/mask.md
+++ b/en/components/mask.md
@@ -37,7 +37,8 @@ The next step is to import the `IgxMaskModule` and `IgxInputGroupModule` in your
 // app.module.ts
 
 ...
-import { IgxMaskModule, IgxInputGroupModule } from 'igniteui-angular';
+import { IgxMaskModule } from 'igniteui-angular/input-group';
+import { IgxInputGroupModule } from 'igniteui-angular/input-group';
 // import { IgxMaskModule, IgxInputGroupModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
@@ -53,7 +54,7 @@ Alternatively, as of `16.0.0` you can import the `IgxMaskDirective` as a standal
 ```typescript
 // home.component.ts
 
-import { IgxMaskDirective, IGX_INPUT_GROUP_DIRECTIVES } from 'igniteui-angular';
+import { IgxMaskDirective, IGX_INPUT_GROUP_DIRECTIVES } from 'igniteui-angular/input-group';
 // import { IgxMaskDirective, IGX_INPUT_GROUP_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package
 
 @Component({
@@ -213,7 +214,7 @@ Import the `IgxTextSelectionModule` in your **app.module.ts** file:
 
 ```typescript
 ...
-import { ..., IgxTextSelectionModule } from 'igniteui-angular';
+import { ..., IgxTextSelectionModule } from 'igniteui-angular/input-group';
 // import { ..., IgxTextSelectionModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
diff --git a/en/components/material-icons-extended.md b/en/components/material-icons-extended.md
index 646cfe82f9..ec1d5121d6 100644
--- a/en/components/material-icons-extended.md
+++ b/en/components/material-icons-extended.md
@@ -27,7 +27,7 @@ First, let's see how we can register a single icon in our component:
 
 ```typescript
 import { Component, OnInit } from '@angular/core';
-import { IgxIconService } from 'igniteui-angular';
+import { IgxIconService } from 'igniteui-angular/icon';
 // import { IgxIconService } from '@infragistics/igniteui-angular'; for licensed package
 import { github } from '@igniteui/material-icons-extended';
 // ...
diff --git a/en/components/month-picker.md b/en/components/month-picker.md
index afc020601e..5913176026 100644
--- a/en/components/month-picker.md
+++ b/en/components/month-picker.md
@@ -38,7 +38,7 @@ The first step is to import the `IgxCalendarModule` inside our **app.module.ts**
 ...
 import { HammerModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { IgxCalendarModule } from 'igniteui-angular';
+import { IgxCalendarModule } from 'igniteui-angular/calendar';
 // import { IgxCalendarModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
@@ -56,7 +56,7 @@ Alternatively, as of `16.0.0` you can import the `IgxMonthPickerComponent` as a
 
 import { HammerModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { IgxMonthPickerComponent } from 'igniteui-angular';
+import { IgxMonthPickerComponent } from 'igniteui-angular/calendar';
 // import { IgxMonthPickerComponent } from '@infragistics/igniteui-angular'; for licensed package
 
 @Component({
diff --git a/en/components/navbar.md b/en/components/navbar.md
index 48d25f957c..84573db565 100644
--- a/en/components/navbar.md
+++ b/en/components/navbar.md
@@ -33,7 +33,7 @@ The first step is to import the `IgxNavbarModule` inside our **app.module.ts** f
 ```typescript
 // app.module.ts
 
-import { IgxNavbarModule } from 'igniteui-angular';
+import { IgxNavbarModule } from 'igniteui-angular/navbar';
 // import { IgxNavbarModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
@@ -49,7 +49,7 @@ Alternatively, as of `16.0.0` you can import the `IgxNavbarComponent` as a stand
 ```typescript
 // home.component.ts
 
-import { IGX_NAVBAR_DIRECTIVES } from 'igniteui-angular';
+import { IGX_NAVBAR_DIRECTIVES } from 'igniteui-angular/navbar';
 // import { IGX_NAVBAR_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package
 
 @Component({
@@ -96,7 +96,9 @@ We can make our app a little more functional by adding options for searching, fa
 // app.module.ts
 
 ...
-import { IgxNavbarModule, IgxIconButtonDirective, IgxIconModule } from 'igniteui-angular';
+import { IgxNavbarModule } from 'igniteui-angular/navbar';
+import { IgxIconButtonDirective } from 'igniteui-angular/directives';
+import { IgxIconModule } from 'igniteui-angular/icon';
 // import { IgxNavbarModule, IgxButtonModule, IgxIconModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
diff --git a/en/components/navdrawer.md b/en/components/navdrawer.md
index 7b7faaec8d..126119f7da 100644
--- a/en/components/navdrawer.md
+++ b/en/components/navdrawer.md
@@ -40,7 +40,7 @@ The first step is to import the `IgxNavigationDrawerModule` inside our **app.mod
 ...
 import { HammerModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { IgxNavigationDrawerModule } from 'igniteui-angular';
+import { IgxNavigationDrawerModule } from 'igniteui-angular/navigation-drawer';
 // import { IgxNavigationDrawerModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
@@ -59,7 +59,9 @@ Alternatively, as of `16.0.0` you can import the `IgxNavigationDrawerComponent`
 import { HammerModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { NgFor } from '@angular/common';
-import { IGX_NAVIGATION_DRAWER_DIRECTIVES, IgxRippleDirective, IgxIconComponent } from 'igniteui-angular';
+import { IGX_NAVIGATION_DRAWER_DIRECTIVES } from 'igniteui-angular/navigation-drawer';
+import { IgxRippleDirective } from 'igniteui-angular/directives';
+import { IgxIconComponent } from 'igniteui-angular/icon';
 // import { IGX_NAVIGATION_DRAWER_DIRECTIVES, IgxRippleDirective, IgxIconComponent } from '@infragistics/igniteui-angular'; for licensed package
 
 @Component({
@@ -196,7 +198,7 @@ Also, if you want the drawer to close when you select an item from it, you can u
 ```ts
 /* app.component.ts */
 import { Component, ViewChild } from '@angular/core';
-import { IgxNavigationDrawerComponent } from 'igniteui-angular';
+import { IgxNavigationDrawerComponent } from 'igniteui-angular/navigation-drawer';
 // import { IgxNavigationDrawerComponent } from '@infragistics/igniteui-angular'; for licensed package
 
 @Component({...})
diff --git a/en/components/overlay-position.md b/en/components/overlay-position.md
index d3815ac034..5924983333 100644
--- a/en/components/overlay-position.md
+++ b/en/components/overlay-position.md
@@ -88,7 +88,7 @@ import {
     ContainerPositionStrategy,
     ElasticPositionStrategy,
     GlobalPositionStrategy
-} from 'igniteui-angular';
+} from 'igniteui-angular/core';
 // import { AutoPositionStrategy, 
 //    ConnectedPositioningStrategy, 
 //    ContainerPositionStrategy,
diff --git a/en/components/overlay.md b/en/components/overlay.md
index 1900bfe51d..5f3e445f8a 100644
--- a/en/components/overlay.md
+++ b/en/components/overlay.md
@@ -157,7 +157,7 @@ For example, if we want the content to be positioned relative to an element, we
 ```typescript
 // my-overlay-component.component.ts
 // import the ConnectedPositioningStategy class
-import { ConnectedPositioningStrategy } from 'igniteui-angular';
+import { ConnectedPositioningStrategy } from 'igniteui-angular/core';
 // import { ConnectedPositioningStrategy } from '@infragistics/igniteui-angular'; for licensed package
 ...
 export class MyOverlayComponent {
@@ -230,7 +230,7 @@ We can modify the previously defined overlay method to not only show but also hi
 ```typescript
 // my-overlay-component.component.ts
 // add an import for the definion of ConnectedPositioningStategy class
-import { ConnectedPositioningStrategy } from 'igniteui-angular';
+import { ConnectedPositioningStrategy } from 'igniteui-angular/core';
 // import { ConnectedPositioningStrategy } from '@infragistics/igniteui-angular'; for licensed package
 
 @Component({...})
diff --git a/en/components/paginator.md b/en/components/paginator.md
index ec83809a70..0c414304c6 100644
--- a/en/components/paginator.md
+++ b/en/components/paginator.md
@@ -39,7 +39,7 @@ The next step is to import the `IgxPaginatorModule` in the **app.module.ts** fil
 ```typescript
 // app.module.ts
 
-import { IgxPaginatorModule } from 'igniteui-angular';
+import { IgxPaginatorModule } from 'igniteui-angular/paginator';
 // import { IgxPaginatorModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
@@ -57,7 +57,8 @@ Alternatively, as of `16.0.0` you can import the `IgxPaginatorComponent` as a st
 
 import { NgFor } from '@angular/common';
 import { HammerModule } from '@angular/platform-browser';
-import { IGX_PAGINATOR_DIRECTIVES, IGX_LIST_DIRECTIVES } from 'igniteui-angular';
+import { IGX_PAGINATOR_DIRECTIVES } from 'igniteui-angular/paginator';
+import { IGX_LIST_DIRECTIVES } from 'igniteui-angular/list';
 // import { IGX_PAGINATOR_DIRECTIVES, IGX_LIST_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package
 
 @Component({
@@ -150,7 +151,7 @@ With only a few lines of code you can easily localize all strings part of the Pa
 **Step 1** - Import `IPaginatorResourceStrings` interface and [changei18n]({environment:angularApiUrl}/#changei18n) function:
 
 ```ts
-import { IPaginatorResourceStrings, changei18n } from "igniteui-angular";
+import { IPaginatorResourceStrings, changei18n } from "igniteui-angular/core";
 ```
 
 **Step 2** - Define the Paging resource strings:
diff --git a/en/components/pivotGrid/pivot-grid.md b/en/components/pivotGrid/pivot-grid.md
index b0c65cda30..12d6c2d22a 100644
--- a/en/components/pivotGrid/pivot-grid.md
+++ b/en/components/pivotGrid/pivot-grid.md
@@ -40,7 +40,7 @@ The next step is to import the `IgxPivotGridModule` in your **app.module.ts** fi
 ```typescript
 // app.module.ts
 
-import { IgxPivotGridModule } from 'igniteui-angular';
+import { IgxPivotGridModule } from 'igniteui-angular/grids/pivot-grid';
 // import { IgxPivotGridModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
@@ -58,7 +58,7 @@ Alternatively, as of `16.0.0` you can import the `IgxPivotGridComponent` as a st
 ```typescript
 // home.component.ts
 
-import { IGX_PIVOT_GRID_DIRECTIVES } from 'igniteui-angular';
+import { IGX_PIVOT_GRID_DIRECTIVES } from 'igniteui-angular/grids/pivot-grid';
 // import { IGX_PIVOT_GRID_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package
 
 @Component({
diff --git a/en/components/query-builder.md b/en/components/query-builder.md
index 2d5e0dd37f..70a16d0298 100644
--- a/en/components/query-builder.md
+++ b/en/components/query-builder.md
@@ -42,7 +42,7 @@ The next step is to import the `IgxQueryBuilderModule` in the **app.module.ts**
 ```typescript
 // app.module.ts
 
-import { IgxQueryBuilderModule } from 'igniteui-angular';
+import { IgxQueryBuilderModule } from 'igniteui-angular/query-builder';
 // import { IgxQueryBuilderModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
@@ -58,7 +58,8 @@ Alternatively, as of `16.0.0` you can import the `IgxQueryBuilderComponent` as a
 ```typescript
 // home.component.ts
 
-import { IGX_QUERY_BUILDER_DIRECTIVES, FilteringExpressionsTree, FieldType } from 'igniteui-angular';
+import { IGX_QUERY_BUILDER_DIRECTIVES } from 'igniteui-angular/query-builder';
+import { FilteringExpressionsTree, FieldType } from 'igniteui-angular/core';
 // import { IGX_QUERY_BUILDER_DIRECTIVES, FilteringExpressionsTree, FieldType } from '@infragistics/igniteui-angular'; for licensed package
 
 @Component({
diff --git a/en/components/radio-button.md b/en/components/radio-button.md
index 6b48d5e1f2..4424feaa7c 100644
--- a/en/components/radio-button.md
+++ b/en/components/radio-button.md
@@ -36,7 +36,7 @@ The next step is to import the `IgxRadioModule` in the **app.module.ts** file.
 // app.module.ts
 
 ...
-import { IgxRadioModule } from 'igniteui-angular';
+import { IgxRadioModule } from 'igniteui-angular/radio';
 // import { IgxRadioModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
@@ -55,7 +55,7 @@ Alternatively, as of `16.0.0` you can import the `IgxRadioGroupDirective` and `I
 // home.component.ts
 
 import { FormsModule } from '@angular/forms';
-import { IGX_RADIO_GROUP_DIRECTIVES } from 'igniteui-angular';
+import { IGX_RADIO_GROUP_DIRECTIVES } from 'igniteui-angular/radio';
 // import { IGX_RADIO_GROUP_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package
 
 @Component({
@@ -290,7 +290,7 @@ The Radio Group Directive is exported as an `NgModule`, thus all you need to do
 ```typescript
 // app.module.ts
 ...
-import { IgxRadioModule } from 'igniteui-angular';
+import { IgxRadioModule } from 'igniteui-angular/radio';
 // import { IgxRadioModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
@@ -324,7 +324,7 @@ Use the [`alignment`]({environment:angularApiUrl}/classes/igxradiogroupdirective
 
 ```typescript
 //sample.component.ts
-import { RadioGroupAlignment } from "igniteui-angular";
+import { RadioGroupAlignment } from "igniteui-angular/radio";
 ...
 public alignment = RadioGroupAlignment.vertical;
 ...
diff --git a/en/components/rating.md b/en/components/rating.md
index e9b44c4221..70057b4d40 100644
--- a/en/components/rating.md
+++ b/en/components/rating.md
@@ -67,7 +67,7 @@ With these you can now add the Rating component in an Angular component template
 In Angular forms, components often need to be able to bind their values with `ngModel` or use `formControl` which requires an implementation of Angular's `ControlValueAccessor` interface. Ignite UI for Angular package provides such implementation in the form of a directive that uses an element selector to attach to supported web components. Currently `IgcRating` is the only component that it supports. To use the directive you just need to import `IgcFormsModule` from the library.
 
 ```typescript
-import { IgcFormsModule } from 'igniteui-angular';
+import { IgcFormsModule } from 'igniteui-angular/directives';
 // import { IgcFormsModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
@@ -87,7 +87,7 @@ Alternatively, as of `16.0.0` you can import the `IgcFormControlDirective` as a
 // home.component.ts
 
 import { FormsModule } from '@angular/forms';
-import { IgcFormControlDirective } from 'igniteui-angular';
+import { IgcFormControlDirective } from 'igniteui-angular/directives';
 // import { IgcFormControlDirective } from '@infragistics/igniteui-angular'; for licensed package
 
 @Component({
diff --git a/en/components/ripple.md b/en/components/ripple.md
index e15d090541..cddebf6acc 100644
--- a/en/components/ripple.md
+++ b/en/components/ripple.md
@@ -36,7 +36,7 @@ The next step is to import the `IgxRippleModule` in the **app.module.ts** file.
 ```typescript
 // app.module.ts
 
-import { IgxRippleModule } from 'igniteui-angular';
+import { IgxRippleModule } from 'igniteui-angular/directives';
 // import { IgxRippleModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
@@ -54,7 +54,8 @@ Alternatively, as of `16.0.0` you can import the `IgxRippleDirective` as standal
 ```typescript
 // home.component.ts
 
-import { IgxRippleDirective, IgxButtonDirective } from 'igniteui-angular';
+import { IgxRippleDirective, IgxButtonDirective } from 'igniteui-angular/directives';
+import { IgxButtonDirective } from 'igniteui-angular/button';
 // import { IgxRippleDirective, IgxButtonDirective } from '@infragistics/igniteui-angular'; for licensed package
 
 @Component({
diff --git a/en/components/select.md b/en/components/select.md
index cc486ad983..0dc2f1879f 100644
--- a/en/components/select.md
+++ b/en/components/select.md
@@ -33,7 +33,7 @@ The next step is to import the `IgxSelectModule` in the **app.module.ts** file.
 ```typescript
 // app.module.ts
 ...
-import { IgxSelectModule } from 'igniteui-angular';
+import { IgxSelectModule } from 'igniteui-angular/select';
 // import { IgxSelectModule } from '@infragistics/igniteui-angular'; for licensed package
 @NgModule({
     ...
@@ -49,7 +49,7 @@ Alternatively, as of `16.0.0` you can import the `IgxSelectComponent` as a stand
 // home.component.ts
 
 import { FormsModule } from '@angular/forms';
-import { IGX_SELECT_DIRECTIVES } from 'igniteui-angular';
+import { IGX_SELECT_DIRECTIVES } from 'igniteui-angular/select';
 // import { IGX_SELECT_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package
 
 @Component({
diff --git a/en/components/simple-combo.md b/en/components/simple-combo.md
index 14e8105135..1ee8f5b3bc 100644
--- a/en/components/simple-combo.md
+++ b/en/components/simple-combo.md
@@ -46,7 +46,7 @@ For a complete introduction to the Ignite UI for Angular, read the [_getting sta
 The next step is to import the `IgxSimpleComboModule` in your **app.module.ts** file.
 
 ```typescript
-import { IgxSimpleComboModule } from 'igniteui-angular';
+import { IgxSimpleComboModule } from 'igniteui-angular/simple-combo';
 // import { IgxSimpleComboModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
@@ -64,7 +64,7 @@ Alternatively, as of `16.0.0` you can import the `IgxSimpleComboComponent` as a
 ```typescript
 // home.component.ts
 
-import { IGX_SIMPLE_COMBO_DIRECTIVES } from 'igniteui-angular';
+import { IGX_SIMPLE_COMBO_DIRECTIVES } from 'igniteui-angular/simple-combo';
 // import { IGX_SIMPLE_COMBO_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package
 
 @Component({
diff --git a/en/components/slider/slider.md b/en/components/slider/slider.md
index f2f8cb7617..0599257656 100644
--- a/en/components/slider/slider.md
+++ b/en/components/slider/slider.md
@@ -37,7 +37,7 @@ The next step is to import the `IgxSliderModule` in your **app.module.ts** file.
 // app.module.ts
 
 import { HammerModule } from '@angular/platform-browser';
-import { IgxSliderModule } from 'igniteui-angular';
+import { IgxSliderModule } from 'igniteui-angular/slider';
 // import { IgxSliderModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
@@ -54,7 +54,7 @@ Alternatively, as of `16.0.0` you can import the `IgxSliderComponent` as a stand
 // home.component.ts
 
 import { FormsModule } from '@angular/forms';
-import { IGX_SLIDER_DIRECTIVES } from 'igniteui-angular';
+import { IGX_SLIDER_DIRECTIVES } from 'igniteui-angular/slider';
 // import { IGX_SLIDER_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package
 
 @Component({
@@ -114,7 +114,8 @@ We also bind the slider [`value`]({environment:angularApiUrl}/classes/igxsliderc
 ```typescript
 // sample.component.ts 
 import { Component, ViewChild } from '@angular/core';
-import { IgxInputDirective, IgxSliderComponent } from 'igniteui-angular';
+import { IgxInputDirective } from 'igniteui-angular/input-group';
+import { IgxSliderComponent } from 'igniteui-angular/slider';
 // import { IgxInputDirective, IgxSliderComponent } from '@infragistics/igniteui-angular'; for licensed package
 
 @Component({
@@ -209,7 +210,7 @@ First, set the slider [`type`]({environment:angularApiUrl}/classes/igxslidercomp
 ```typescript
 // sample.component.ts
 import { Component } from '@angular/core';
-import { IgxSliderType } from 'igniteui-angular';
+import { IgxSliderType } from 'igniteui-angular/slider';
 // import { IgxSliderType } from '@infragistics/igniteui-angular'; for licensed package
 
 @Component({
diff --git a/en/components/snackbar.md b/en/components/snackbar.md
index bcbc3e1e1b..8fcf109102 100644
--- a/en/components/snackbar.md
+++ b/en/components/snackbar.md
@@ -38,7 +38,7 @@ The next step is to import the `IgxSnackbarModule` in your **app.module.ts** fil
 // app.module.ts
 
 ...
-import { IgxSnackbarModule } from 'igniteui-angular';
+import { IgxSnackbarModule } from 'igniteui-angular/snackbar';
 // import { IgxSnackbarModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
@@ -54,7 +54,8 @@ Alternatively, as of `16.0.0` you can import the `IgxSnackbarComponent` as a sta
 ```typescript
 // home.component.ts
 
-import { IgxSnackbarComponent, IgxButtonDirective } from 'igniteui-angular';
+import { IgxSnackbarComponent } from 'igniteui-angular/snackbar';
+import { IgxButtonDirective } from 'igniteui-angular/directives';
 // import { IgxSnackbarComponent, IgxButtonDirective } from '@infragistics/igniteui-angular'; for licensed package
 
 @Component({
@@ -226,7 +227,7 @@ Let’s create a list with contacts that can be deleted. When an item is deleted
 //sample.component.ts
 
 import { Component, OnInit, ViewChild } from '@angular/core';
-import { IgxSnackbarComponent } from 'igniteui-angular';
+import { IgxSnackbarComponent } from 'igniteui-angular/snackbar';
 // import { IgxSnackbarComponent } from '@infragistics/igniteui-angular'; for licensed package
 ...
 @ViewChild(IgxSnackbarComponent)
@@ -275,7 +276,7 @@ Use [`positionSettings`]({environment:angularApiUrl}/classes/igxsnackbarcomponen
 
 ```typescript
 // sample.component.ts
-import { VerticalAlignment, HorizontalAlignment } from 'igniteui-angular';
+import { VerticalAlignment, HorizontalAlignment } from 'igniteui-angular/core';
 // import { VerticalAlignment, HorizontalAlignment } from '@infragistics/igniteui-angular'; for licensed package
 ...
 public open(snackbar) {
diff --git a/en/components/splitter.md b/en/components/splitter.md
index b5c5c9368c..ef31e7067d 100644
--- a/en/components/splitter.md
+++ b/en/components/splitter.md
@@ -34,7 +34,7 @@ The next step is to import the `IgxSplitterModule` in your **app.module.ts** fil
 ```typescript
 // app.module.ts
 ...
-import { IgxSplitterModule } from 'igniteui-angular';
+import { IgxSplitterModule } from 'igniteui-angular/splitter';
 // import { IgxSplitterModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
@@ -50,7 +50,7 @@ Alternatively, as of `16.0.0` you can import the `IgxSplitterComponent` as a sta
 ```typescript
 // home.component.ts
 
-import { IGX_SPLITTER_DIRECTIVES } from 'igniteui-angular';
+import { IGX_SPLITTER_DIRECTIVES } from 'igniteui-angular/splitter';
 // import { IGX_SPLITTER_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package
 
 @Component({
diff --git a/en/components/stepper.md b/en/components/stepper.md
index c8174ad48d..d37c945dab 100644
--- a/en/components/stepper.md
+++ b/en/components/stepper.md
@@ -45,7 +45,7 @@ The next step is to import the `IgxStepperModule` in your **app.module.ts** file
 // app.module.ts
 
 ...
-import { IgxStepperModule } from 'igniteui-angular';
+import { IgxStepperModule } from 'igniteui-angular/stepper';
 // import { IgxStepperModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
@@ -63,7 +63,7 @@ Alternatively, as of `16.0.0` you can import the `IgxStepperComponent` as a stan
 
 import { HammerModule } from '@angular/platform-browser';
 import { FormsModule } from '@angular/forms';
-import { IGX_STEPPER_DIRECTIVES } from 'igniteui-angular';
+import { IGX_STEPPER_DIRECTIVES } from 'igniteui-angular/stepper';
 // import { IGX_STEPPER_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package
 
 @Component({
diff --git a/en/components/switch.md b/en/components/switch.md
index 5f46bae91e..dc4acf45ca 100644
--- a/en/components/switch.md
+++ b/en/components/switch.md
@@ -34,7 +34,7 @@ The next step is to import the `IgxSwitchModule` in your **app.module.ts** file.
 // app.module.ts
 
 ...
-import { IgxSwitchModule } from 'igniteui-angular';
+import { IgxSwitchModule } from 'igniteui-angular/switch';
 // import { IgxSwitchModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
@@ -50,7 +50,7 @@ Alternatively, as of `16.0.0` you can import the `IgxSwitchComponent` as a stand
 ```typescript
 // home.component.ts
 
-import { IgxSwitchComponent } from 'igniteui-angular';
+import { IgxSwitchComponent } from 'igniteui-angular/switch';
 // import { IgxSwitchComponent } from '@infragistics/igniteui-angular'; for licensed package
 
 @Component({
diff --git a/en/components/tabbar.md b/en/components/tabbar.md
index 34f665537c..097cc0e554 100644
--- a/en/components/tabbar.md
+++ b/en/components/tabbar.md
@@ -41,7 +41,7 @@ The next step is to import the `IgxBottomNavModule` in your **app.module.ts** fi
 // app.module.ts
 
 ...
-import { IgxBottomNavModule } from 'igniteui-angular';
+import { IgxBottomNavModule } from 'igniteui-angular/bottom-nav';
 // import { IgxBottomNavModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
@@ -57,7 +57,8 @@ Alternatively, as of `16.0.0` you can import the `IgxBottomNavComponent` as a st
 ```typescript
 // home.component.ts
 
-import { IGX_BOTTOM_NAV_DIRECTIVES, IgxIconComponent } from 'igniteui-angular';
+import { IGX_BOTTOM_NAV_DIRECTIVES } from 'igniteui-angular/bottom-nav';
+import { IgxIconComponent } from 'igniteui-angular/icon';
 // import { IGX_BOTTOM_NAV_DIRECTIVES, IgxIconComponent } from '@infragistics/igniteui-angular'; for licensed package
 
 @Component({
diff --git a/en/components/tabs.md b/en/components/tabs.md
index fc9006a1ea..7eb2950d21 100644
--- a/en/components/tabs.md
+++ b/en/components/tabs.md
@@ -44,7 +44,7 @@ The next step is to import the `IgxTabsModule` in your **app.module.ts** file.
 // app.module.ts
 
 ...
-import { IgxTabsModule } from 'igniteui-angular';
+import { IgxTabsModule } from 'igniteui-angular/tabs';
 // import { IgxTabsModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
@@ -60,7 +60,7 @@ Alternatively, as of `16.0.0` you can import the `IgxTabsComponent` as a standal
 ```typescript
 // home.component.ts
 
-import { IGX_TABS_DIRECTIVES } from 'igniteui-angular';
+import { IGX_TABS_DIRECTIVES } from 'igniteui-angular/tabs';
 // import { IGX_TABS_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package
 
 @Component({
diff --git a/en/components/texthighlight.md b/en/components/texthighlight.md
index 61496855a5..bf820029e9 100644
--- a/en/components/texthighlight.md
+++ b/en/components/texthighlight.md
@@ -33,7 +33,7 @@ The next step is to import the `IgxTextHighlightModule` in your **app.module.ts*
 ```typescript
 // app.module.ts
 ...
-import { IgxTextHighlightModule } from 'igniteui-angular';
+import { IgxTextHighlightModule } from 'igniteui-angular/directives';
 // import { IgxTextHighlightModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
@@ -49,7 +49,7 @@ Alternatively, as of `16.0.0` you can import the `IgxTextHighlightDirective` as
 ```typescript
 // home.component.ts
 
-import { IgxTextHighlightDirective, IgxTextHighlightService } from 'igniteui-angular';
+import { IgxTextHighlightDirective, IgxTextHighlightService } from 'igniteui-angular/directives';
 // import { IgxTextHighlightDirective, IgxTextHighlightService } from '@infragistics/igniteui-angular'; for licensed package
 
 @Component({
diff --git a/en/components/themes/misc/angular-material-theming.md b/en/components/themes/misc/angular-material-theming.md
index b2dd92c827..0f00e744b2 100644
--- a/en/components/themes/misc/angular-material-theming.md
+++ b/en/components/themes/misc/angular-material-theming.md
@@ -54,7 +54,7 @@ Then, you can use the Ignite UI components by importing their respective modules
 
 ```ts
 // manually addition of the Igx Avatar component 
-import { IgxAvatarModule } from 'igniteui-angular';
+import { IgxAvatarModule } from 'igniteui-angular/avatar';
 // import { IgxAvatarModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
diff --git a/en/components/themes/misc/bootstrap-theming.md b/en/components/themes/misc/bootstrap-theming.md
index c13f5b2bfc..183d79496a 100644
--- a/en/components/themes/misc/bootstrap-theming.md
+++ b/en/components/themes/misc/bootstrap-theming.md
@@ -62,7 +62,7 @@ Then, you can use the Ignite UI components by importing their respective modules
 
 ```ts
 // manually addition of the Igx Avatar component 
-import { IgxAvatarModule } from 'igniteui-angular';
+import { IgxAvatarModule } from 'igniteui-angular/avatar';
 // import { IgxAvatarModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
diff --git a/en/components/time-picker.md b/en/components/time-picker.md
index d8353e5b3b..0676676328 100644
--- a/en/components/time-picker.md
+++ b/en/components/time-picker.md
@@ -45,7 +45,7 @@ The next step is to import the `IgxTimePickerModule` in your **app.module.ts** f
 ...
 import { HammerModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { IgxTimePickerModule } from 'igniteui-angular';
+import { IgxTimePickerModule } from 'igniteui-angular/time-picker';
 // import { IgxTimePickerModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
@@ -62,7 +62,7 @@ Alternatively, as of `16.0.0` you can import the `IgxTimePickerComponent` as a s
 // home.component.ts
 
 import { FormsModule } from '@angular/forms';
-import { IGX_TIME_PICKER_DIRECTIVES } from 'igniteui-angular';
+import { IGX_TIME_PICKER_DIRECTIVES } from 'igniteui-angular/time-picker';
 // import { IGX_TABS_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package
 
 @Component({
@@ -238,7 +238,7 @@ The default time picker mode is editable dropdown mode. To change the time picke
 ```typescript
 // timePickerDropdown.component.ts
 
-import { PickerInteractionMode } from 'igniteui-angular';
+import { PickerInteractionMode } from 'igniteui-angular/core';
 // import { PickerInteractionMode } from '@infragistics/igniteui-angular'; for licensed package
 ...
 public mode = PickerInteractionMode.Dialog;
@@ -311,7 +311,8 @@ You can specify [`minValue`]({environment:angularApiUrl}/classes/igxtimepickerco
 
 ...
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { IgxTimePickerModule, IgxToastModule } from 'igniteui-angular';
+import { IgxTimePickerModule } from 'igniteui-angular/time-picker';
+import { IgxToastModule } from 'igniteui-angular/toast';
 // import { IgxTimePickerModule, IgxToastModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
diff --git a/en/components/toast.md b/en/components/toast.md
index 60f58a2d35..0f131d1160 100644
--- a/en/components/toast.md
+++ b/en/components/toast.md
@@ -36,7 +36,7 @@ The next step is to import the `IgxToastModule` in your **app.module.ts** file.
 // app.module.ts
 
 ...
-import { IgxToastModule } from 'igniteui-angular';
+import { IgxToastModule } from 'igniteui-angular/toast';
 // import { IgxToastModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
@@ -52,7 +52,8 @@ Alternatively, as of `16.0.0` you can import the `IgxToastComponent` as a standa
 ```typescript
 // home.component.ts
 
-import { IgxToastComponent, IgxButtonDirective } from 'igniteui-angular';
+import { IgxToastComponent } from 'igniteui-angular/toast';
+import { IgxButtonDirective } from 'igniteui-angular/directives';
 // import { IgxToastComponent, IgxButtonDirective } from '@infragistics/igniteui-angular'; for licensed package
 
 @Component({
@@ -165,7 +166,7 @@ Use [`positionSettings`]({environment:angularApiUrl}/classes/igxtoastcomponent.h
 
 ```typescript
 // sample.component.ts
-import { VerticalAlignment } from 'igniteui-angular';
+import { VerticalAlignment } from 'igniteui-angular/core';
 // import { VerticalAlignment } from '@infragistics/igniteui-angular'; for licensed package
 ...
 public open(toast) {
diff --git a/en/components/toggle.md b/en/components/toggle.md
index 4fb18a4ba5..70600403d8 100644
--- a/en/components/toggle.md
+++ b/en/components/toggle.md
@@ -34,7 +34,7 @@ The next step is to import the `IgxToggleModule` in your **app.module.ts** file.
 // app.module.ts
 
 ...
-import { IgxToggleModule } from 'igniteui-angular';
+import { IgxToggleModule } from 'igniteui-angular/directives';
 // import { IgxToggleModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
@@ -50,7 +50,8 @@ Alternatively, as of `16.0.0` you can import the `IgxToggleDirective` as a stand
 ```typescript
 // home.component.ts
 
-import { IgxToggleDirective, IgxButtonDirective } from 'igniteui-angular';
+import { IgxToggleDirective, IgxButtonDirective } from 'igniteui-angular/directives';
+
 // import { IgxToggleDirective, IgxButtonDirective } from '@infragistics/igniteui-angular'; for licensed package
 
 @Component({
@@ -79,7 +80,7 @@ Now that you have the Ignite UI for Angular Toggle module or directive imported,
 In order to show and hide the toggle content, use its [open]({environment:angularApiUrl}/classes/igxtoggledirective.html#open) and [close]({environment:angularApiUrl}/classes/igxtoggledirective.html#close) methods:
 
 ```typescript
-import { IgxToggleDirective } from 'igniteui-angular'
+import { IgxToggleDirective } from 'igniteui-angular/directives'
 // import { IgxToggleDirective } from '@infragistics/igniteui-angular'; for licensed package
 ...
 
diff --git a/en/components/tooltip.md b/en/components/tooltip.md
index 55e2b2f861..83d21dc783 100644
--- a/en/components/tooltip.md
+++ b/en/components/tooltip.md
@@ -35,7 +35,7 @@ The next step is to import the `IgxTooltipModule` in your **app.module.ts** file
 // app.module.ts
 
 ...
-import { IgxTooltipModule } from 'igniteui-angular';
+import { IgxTooltipModule } from 'igniteui-angular/tooltip';
 // import { IgxTooltipModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
@@ -50,7 +50,8 @@ Alternatively, as of `16.0.0` you can import the `IgxTooltipDirective` as a stan
 ```typescript
 // home.component.ts
 
-import { IGX_TOOLTIP_DIRECTIVES, IgxAvatarComponent } from 'igniteui-angular';
+import { IGX_TOOLTIP_DIRECTIVES } from 'igniteui-angular/tooltip';
+import { IgxAvatarComponent } from 'igniteui-angular/avatar';
 // import { IGX_TOOLTIP_DIRECTIVES, IgxAvatarComponent } from '@infragistics/igniteui-angular'; for licensed package
 
 @Component({
@@ -85,7 +86,8 @@ Let's say we want to create a simple text tooltip like the one above. In our cas
 ```typescript
 // app.module.ts
 
-import { IgxTooltipModule, IgxAvatarModule } from 'igniteui-angular';
+import { IgxTooltipModule } from 'igniteui-angular/tooltip';
+import { IgxAvatarModule } from 'igniteui-angular/avatar';
 // import { IgxTooltipModule, IgxAvatarModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
@@ -158,7 +160,9 @@ Let's expand on the use of the [`igxTooltip`]({environment:angularApiUrl}/classe
 ```typescript
 // app.module.ts
 
-import { IgxTooltipModule, IgxAvatarModule, IgxIconModule } from 'igniteui-angular';
+import { IgxTooltipModule } from 'igniteui-angular/tooltip';
+import { IgxAvatarModule } from 'igniteui-angular/avatar';
+import { IgxIconModule } from 'igniteui-angular/icon';
 // import { IgxTooltipModule, IgxAvatarModule, IgxIconModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
diff --git a/en/components/transaction-classes.md b/en/components/transaction-classes.md
index 9e0b50deb3..4c50d3b737 100644
--- a/en/components/transaction-classes.md
+++ b/en/components/transaction-classes.md
@@ -83,7 +83,7 @@ Both [`IgxFlatTransactionFactory`]({environment:angularApiUrl}/classes/igxflatra
 In the below example, you can see how you can instantiate different transaction services depending on an arbitrary (`hasUndo`) flag:
 
 ```typescript
-import { IgxFlatTransactionFactory, TRANSACTION_TYPE } from 'igniteui-angular';
+import { IgxFlatTransactionFactory, TRANSACTION_TYPE } from 'igniteui-angular/core';
 // import { IgxFlatTransactionFactory, TRANSACTION_TYPE } from '@infragistics/igniteui-angular'; for licensed package
 
 export class MyCustomComponent {
@@ -110,7 +110,7 @@ First, define a custom factory class
 
 ```typescript
 import { IgxFlatTransactionFactory, TRANSACTION_TYPE, IgxBaseTransactionService,
-TransactionService, Transaction, State } from 'igniteui-angular';
+TransactionService, Transaction, State } from 'igniteui-angular/core';
 // import { IgxFlatTransactionFactory, TRANSACTION_TYPE, IgxBaseTransactionService,
 // TransactionService, Transaction, State } from '@infragistics/igniteui-angular'; for licensed package
 
@@ -133,7 +133,7 @@ export class CustomTransactionFactory extends IgxFlatTransactionFactory {
 Then, in your component's `providers` array, override the `IgxFlatTransactionFactory` (used by `igx-grid`) with your custom implementation.
 
 ```typescript
-import { IgxFlatTransactionFactory } from 'igniteui-angular';
+import { IgxFlatTransactionFactory } from 'igniteui-angular/core';
 // import { IgxFlatTransactionFactory } from '@infragistics/igniteui-angular'; for licensed package
 import { CustomTransactionFactory } from '../custom-factory.ts';
 
diff --git a/en/components/transaction-how-to-use.md b/en/components/transaction-how-to-use.md
index e8024a1c96..422ef39451 100644
--- a/en/components/transaction-how-to-use.md
+++ b/en/components/transaction-how-to-use.md
@@ -55,7 +55,7 @@ export class TransactionBaseComponent { }
 In our `ts` file, we should import [`igxTransactionService`]({environment:angularApiUrl}/classes/igxtransactionservice.html) from the `igniteui-angular` library, as well as the [`State`]({environment:angularApiUrl}/interfaces/state.html) and [`Transaction`]({environment:angularApiUrl}/interfaces/transaction.html) interfaces and the [`TransactionType`]({environment:angularApiUrl}/enums/TransactionType.html) enum, which will be needed by our application:
 
 ```typescript
-import { IgxTransactionService, State, Transaction, TransactionType } from 'igniteui-angular';
+import { IgxTransactionService, State, Transaction, TransactionType } from 'igniteui-angular/core';
 // import { IgxTransactionService, State, Transaction, TransactionType } from '@infragistics/igniteui-angular'; for licensed package
 ```
 
diff --git a/en/components/tree.md b/en/components/tree.md
index b2938a6205..84f24def20 100644
--- a/en/components/tree.md
+++ b/en/components/tree.md
@@ -41,7 +41,7 @@ The next step is to import the `IgxTreeModule` in your app.module file.
 // app.module.ts
 
 ...
-import { IgxTreeModule } from 'igniteui-angular';
+import { IgxTreeModule } from 'igniteui-angular/tree';
 // import { IgxTreeModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
@@ -57,7 +57,7 @@ Alternatively, as of `16.0.0` you can import the `IgxTreeComponent` as a standal
 ```typescript
 // home.component.ts
 
-import { IGX_TREE_DIRECTIVES } from 'igniteui-angular';
+import { IGX_TREE_DIRECTIVES } from 'igniteui-angular/tree';
 // import { IGX_TREE_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package
 
 @Component({
diff --git a/en/components/treegrid/tree-grid.md b/en/components/treegrid/tree-grid.md
index 9516b9e0b5..cd41bdb336 100644
--- a/en/components/treegrid/tree-grid.md
+++ b/en/components/treegrid/tree-grid.md
@@ -35,7 +35,7 @@ The next step is to import the `IgxTreeGridModule` in your **app.module.ts** fil
 ```typescript
 // app.module.ts
 
-import { IgxTreeGridModule } from 'igniteui-angular';
+import { IgxTreeGridModule } from 'igniteui-angular/grids/tree-grid';
 // import { IgxTreeGridModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
@@ -53,7 +53,7 @@ Alternatively, as of `16.0.0` you can import the `IgxTreeGridComponent` as a sta
 ```typescript
 // home.component.ts
 
-import { IGX_TREE_GRID_DIRECTIVES } from 'igniteui-angular';
+import { IGX_TREE_GRID_DIRECTIVES } from 'igniteui-angular/grids/tree-grid';
 // import { IGX_TREE_GRID_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package
 
 @Component({
diff --git a/jp/components/general/code-splitting-and-multiple-entry-points.md b/jp/components/general/code-splitting-and-multiple-entry-points.md
index e8891f853a..2851d43b21 100644
--- a/jp/components/general/code-splitting-and-multiple-entry-points.md
+++ b/jp/components/general/code-splitting-and-multiple-entry-points.md
@@ -32,7 +32,7 @@ _language: ja
 
 ### コア エントリ ポイント
 
-- `igniteui-angular/core` - コア ユーティリティ、サービス、および基本タイプ (例: `IgxOverlayService`、`DisplayDensity`)
+- `igniteui-angular/core` - コア ユーティリティ、サービス、および基本タイプ (例: `IgxOverlayService`)
 - `igniteui-angular/directives` - 共通ディレクティブ
 
 ### コンポーネント エントリ ポイント
@@ -119,7 +119,6 @@ import {
   IgxTreeGridComponent,
   IgxInputDirective,
   IgxBottomNavComponent,
-  DisplayDensity, 
   Direction, 
   GridBaseAPIService,
   IgxOverlayService,
@@ -130,7 +129,7 @@ import {
 #### 以降 (バージョン 21.0.0)
 
 ```typescript
-import { DisplayDensity, IgxOverlayService } from 'igniteui-angular/core';
+import { IgxOverlayService } from 'igniteui-angular/core';
 import { IFilteringExpression, GridBaseAPIService } from 'igniteui-angular/grids/core';
 import { IgxGridComponent } from 'igniteui-angular/grids/grid';
 import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid';