From 5abea29bd0fd978c4d34e50b6af312d98fc7633d Mon Sep 17 00:00:00 2001
From: Simeon Simeonoff <sim.simeonoff@gmail.com>
Date: Mon, 11 Sep 2023 18:21:31 +0300
Subject: [PATCH 1/9] refactor(*): update samples to reflect displayDensity
 changes

---
 .../src/app/grid-crm/grid-crm.component.html  |  4 +-
 .../src/app/grid-crm/grid-crm.component.scss  |  5 +++
 .../data-analysis-dock-manager.component.html |  2 +-
 .../data-analysis-dock-manager.component.scss |  4 ++
 .../grid-dynamic-chart-data.component.html    |  2 +-
 .../grid-dynamic-chart-data.component.scss    |  1 +
 .../app/grid-finjs/grid-finjs.component.html  |  1 -
 .../app/grid-finjs/grid-finjs.component.scss  |  2 +
 .../grid-boston-marathon/grid.component.html  |  2 +-
 .../grid-boston-marathon/grid.component.scss  |  4 ++
 .../grid-master-detail.component.html         |  4 +-
 .../grid-master-detail.component.scss         |  1 +
 .../tree-grid-finjs-sample.component.html     |  1 -
 .../tree-grid-finjs-sample.component.scss     |  4 ++
 .../button-group-sample-5.component.html      |  5 +--
 .../button-group-sample-5.component.ts        | 32 ++++++++++------
 .../buttons-display-density.component.html    | 14 ++++---
 .../buttons-display-density.component.ts      | 24 +++++++-----
 .../custom-grid-paging-style.component.html   |  2 +-
 .../custom-grid-paging-style.component.scss   |  1 +
 .../grid-cascading-combos.component.html      |  2 +-
 .../grid-cascading-combos.component.scss      |  1 +
 ...id-column-data-types-sample.component.html |  2 +-
 ...id-column-data-types-sample.component.scss |  1 +
 .../grid-displaydensity-sample.component.html |  4 +-
 .../grid-displaydensity-sample.component.ts   | 35 ++++++++++--------
 .../grid-editing-sample.component.html        |  2 +-
 .../grid-editing-sample.component.scss        |  3 +-
 ...el-style-filtering-sample-1.component.html |  4 +-
 ...xcel-style-filtering-sample-1.component.ts | 32 +++++++++-------
 .../grid-keyboardnav-sample.component.html    |  2 +-
 .../grid-keyboardnav-sample.component.scss    |  1 +
 .../grid-nested-data-bind2.html               |  2 +-
 .../grid-nested-data-bind2.scss               |  1 +
 .../grid-nested-data-bind.html                |  4 +-
 .../grid-nested-data-bind.scss                |  6 ++-
 .../grid-pager-sample.component.html          |  2 +-
 .../grid-pager-sample.component.scss          | 15 ++++----
 .../grid-paging-sample.component.html         |  2 +-
 .../grid-paging-sample.component.scss         |  2 +
 .../grid-resize-line-styling-sample.html      |  2 +-
 .../grid-resize-line-styling-sample.scss      |  1 +
 .../grid-search-sample.component.html         | 14 +++----
 .../multi-column-header-template.html         |  2 +-
 .../multi-column-header-template.scss         |  5 ++-
 ...multi-column-headers-export.component.html |  2 +-
 ...multi-column-headers-export.component.scss |  1 +
 ...ulti-column-headers-styling.component.html |  2 +-
 ...ulti-column-headers-styling.component.scss |  1 +
 .../multi-column-headers.html                 |  2 +-
 .../multi-column-headers.scss                 |  1 +
 .../hgrid-keyboard-guide.component.html       |  2 +-
 .../hgrid-keyboard-guide.component.scss       |  1 +
 ...d-collapsible-column-groups.component.html |  2 +-
 ...d-collapsible-column-groups.component.scss |  3 ++
 ...grid-cross-field-validation.component.html |  2 +-
 ...grid-cross-field-validation.component.scss |  9 ++++-
 .../hierarchical-grid-density.component.html  |  5 +--
 .../hierarchical-grid-density.component.ts    | 33 +++++++++--------
 ...el-style-filtering-sample-1.component.html |  4 +-
 ...xcel-style-filtering-sample-1.component.ts | 32 +++++++++-------
 ...-grid-multi-column-template.component.html |  2 +-
 ...-grid-multi-column-template.component.scss |  5 ++-
 ...al-grid-multi-column-export.component.html |  2 +-
 ...al-grid-multi-column-export.component.scss |  1 +
 ...l-grid-multi-column-styling.component.html |  2 +-
 ...l-grid-multi-column-styling.component.scss |  1 +
 ...rarchical-grid-multi-column.component.html |  2 +-
 ...rarchical-grid-multi-column.component.scss |  3 +-
 ...rarchical-grid-pager-sample.component.html |  3 +-
 ...rarchical-grid-pager-sample.component.scss |  1 +
 .../hGrid-state.component.html                |  1 -
 .../hGrid-state.component.scss                |  1 +
 ...rousel-no-navigation-sample.component.html |  2 +-
 ...rousel-no-navigation-sample.component.scss |  1 +
 .../list-sample-4.component.html              |  4 +-
 .../list-sample-4/list-sample-4.component.ts  | 25 ++++++++-----
 ...ion-strip-paragraph-styling.component.html |  2 +-
 ...ction-strip-paragraph-styling.component.ts |  1 -
 .../pivot-features.component.html             |  5 +--
 .../pivot-features.component.scss             |  4 ++
 .../default-theme-sample.component.html       |  2 +-
 .../display-density.component.html            |  2 +-
 .../display-density.component.ts              | 37 +++++++++----------
 .../tgrid-keyboardnav-guide.component.html    |  2 +-
 .../tgrid-keyboardnav-guide.component.scss    |  1 +
 .../tree-grid-add-row-sample.component.html   |  2 +-
 ...d-collapsible-column-groups.component.html |  3 +-
 ...d-collapsible-column-groups.component.scss |  3 ++
 ...-grid-displaydensity-sample.component.html |  4 +-
 ...ee-grid-displaydensity-sample.component.ts | 33 +++++++++--------
 .../tree-grid-editing-sample.component.html   |  2 +-
 ...el-style-filtering-sample-1.component.html |  4 +-
 ...xcel-style-filtering-sample-1.component.ts | 32 +++++++++-------
 ...up-by-load-on-demand-sample.component.scss |  2 +
 ...-keyboard-navigation-sample.component.html |  2 +-
 ...-keyboard-navigation-sample.component.scss |  1 +
 ...lumn-header-template-sample.component.html |  2 +-
 ...lumn-header-template-sample.component.scss |  3 +-
 ...multi-column-headers-export.component.html |  2 +-
 ...multi-column-headers-export.component.scss |  1 +
 ...multi-column-headers-sample.component.html |  2 +-
 ...multi-column-headers-sample.component.scss |  1 +
 ...ulti-column-headers-styling.component.html |  3 +-
 ...ulti-column-headers-styling.component.scss |  1 +
 .../tree-grid-pager-sample.component.html     |  3 +-
 .../tree-grid-pager-sample.component.scss     | 13 ++++---
 .../tree-grid-paging-sample.component.html    |  3 +-
 .../tree-grid-paging-sample.component.scss    |  2 +
 ...ee-grid-paging-style-sample.component.html |  2 +-
 ...ee-grid-paging-style-sample.component.scss |  1 +
 .../tGrid-state.component.html                |  1 -
 .../tGrid-state.component.scss                |  1 +
 .../tree-grid-search-sample.component.html    | 14 +++----
 114 files changed, 359 insertions(+), 260 deletions(-)

diff --git a/projects/app-crm/src/app/grid-crm/grid-crm.component.html b/projects/app-crm/src/app/grid-crm/grid-crm.component.html
index 7e9b64605f..97a61fbe35 100644
--- a/projects/app-crm/src/app/grid-crm/grid-crm.component.html
+++ b/projects/app-crm/src/app/grid-crm/grid-crm.component.html
@@ -1,5 +1,5 @@
 <div [ngClass]="{'grid__wrapper': true, 'dark_grid': dark === true }">
-    <igx-grid #grid1 [igxPreventDocumentScroll]="true" id="grid1" [data]="localData" [height]="'100%'" [moving]="true" [width]="'100%'" [rowSelection]="selectionMode" displayDensity="cosy" rowHeight="50" [allowFiltering]="true">
+    <igx-grid #grid1 [igxPreventDocumentScroll]="true" id="grid1" [data]="localData" [height]="'100%'" [moving]="true" [width]="'100%'" [rowSelection]="selectionMode" rowHeight="50" [allowFiltering]="true">
         <igx-grid-toolbar>
             <igx-grid-toolbar-actions>
                 <igx-grid-toolbar-hiding></igx-grid-toolbar-hiding>
@@ -15,7 +15,7 @@
                         <span class="crm-sample-toolbar__ellipsis">Business Propeller</span>
                     </div>
                     <div class="sample-flex-container">
-                        <igx-input-group type="search" class="searchInputGroup" displayDensity="compact">
+                        <igx-input-group type="search">
                             <igx-prefix>
                                 <igx-icon class="prefixIcon" *ngIf="searchText.length === 0">search</igx-icon>
                                 <igx-icon class="prefixIcon" *ngIf="searchText.length > 0" (click)="clearSearch()">clear
diff --git a/projects/app-crm/src/app/grid-crm/grid-crm.component.scss b/projects/app-crm/src/app/grid-crm/grid-crm.component.scss
index 141159e876..77ac0e95f9 100644
--- a/projects/app-crm/src/app/grid-crm/grid-crm.component.scss
+++ b/projects/app-crm/src/app/grid-crm/grid-crm.component.scss
@@ -50,7 +50,12 @@
         $idle-text-color: color($light-palette, 'gray', 900)
     );
 
+    input-group[type="search"] {
+        --ig-size: var(--ig-size-small);
+    }
+
 	.grid__wrapper {
+        --ig-size: var(--ig-size-medium);
 		width: inherit;
 		position: relative;
 		height: 100%;
diff --git a/projects/app-lob/src/app/grid-dynamic-chart-data/data-analysis-dock-manager/data-analysis-dock-manager.component.html b/projects/app-lob/src/app/grid-dynamic-chart-data/data-analysis-dock-manager/data-analysis-dock-manager.component.html
index c182f1723d..ee24e31f30 100644
--- a/projects/app-lob/src/app/grid-dynamic-chart-data/data-analysis-dock-manager/data-analysis-dock-manager.component.html
+++ b/projects/app-lob/src/app/grid-dynamic-chart-data/data-analysis-dock-manager/data-analysis-dock-manager.component.html
@@ -1,7 +1,7 @@
 <igc-dockmanager #dock class="light-theme dock-m-position" [layout]="docLayout">
     <div slot="grid" igxOverlayOutlet style="height: 100%">
         <igx-grid #grid columnSelection="multiple" [moving]="true" chartIntegration conditionalFormatting [formatter]="currentFormatter"
-            [chartData]="chartData" primaryKey="id" displayDensity="compact" [data]="data"
+            [chartData]="chartData" primaryKey="id" [data]="data"
             [allowFiltering]="true" [filterMode]="'excelStyleFilter'">
             <igx-column [sortable]="true"  [disablePinning]="true" [disableHiding]="true" field="id" [hidden]="true"></igx-column>
             <igx-column [sortable]="true"  [disablePinning]="true" [disableHiding]="true" field="category" [width]="'110px'"></igx-column>
diff --git a/projects/app-lob/src/app/grid-dynamic-chart-data/data-analysis-dock-manager/data-analysis-dock-manager.component.scss b/projects/app-lob/src/app/grid-dynamic-chart-data/data-analysis-dock-manager/data-analysis-dock-manager.component.scss
index f2d745467a..e12f48a243 100644
--- a/projects/app-lob/src/app/grid-dynamic-chart-data/data-analysis-dock-manager/data-analysis-dock-manager.component.scss
+++ b/projects/app-lob/src/app/grid-dynamic-chart-data/data-analysis-dock-manager/data-analysis-dock-manager.component.scss
@@ -17,6 +17,10 @@
     height: 100vh;
     padding: 0 rem(8px) rem(8px) rem(8px);
     --igc-pane-content-background: #{contrast-color($color: 'gray', $variant: 900)};
+
+    igx-grid {
+        --ig-size: var(--ig-size-small);
+    }
 }
 
 .chart-types-container {
diff --git a/projects/app-lob/src/app/grid-dynamic-chart-data/grid-dynamic-chart-data.component.html b/projects/app-lob/src/app/grid-dynamic-chart-data/grid-dynamic-chart-data.component.html
index 57774daa80..e2b9e26abd 100644
--- a/projects/app-lob/src/app/grid-dynamic-chart-data/grid-dynamic-chart-data.component.html
+++ b/projects/app-lob/src/app/grid-dynamic-chart-data/grid-dynamic-chart-data.component.html
@@ -3,7 +3,7 @@
     Excel like data analysis showcase application with Ignite UI Angular components and extras
 </app-page-header>
 <div class="grid-chart-contextmenu-wrapper">
-    <igx-grid #grid igxChartIntegration igxConditionalFormatting igxContextMenu primaryKey='id' displayDensity="compact" [data]="data">
+    <igx-grid #grid igxChartIntegration igxConditionalFormatting igxContextMenu primaryKey='id' [data]="data">
         <igx-column field="id" [hidden]="true"></igx-column>
         <igx-column field="category" [editable]="true" [width]="'110px'"></igx-column>
         <igx-column field="type" [editable]="true" [filterable]="false" [width]="'130px'"></igx-column>
diff --git a/projects/app-lob/src/app/grid-dynamic-chart-data/grid-dynamic-chart-data.component.scss b/projects/app-lob/src/app/grid-dynamic-chart-data/grid-dynamic-chart-data.component.scss
index c908f89714..a57848e3ed 100644
--- a/projects/app-lob/src/app/grid-dynamic-chart-data/grid-dynamic-chart-data.component.scss
+++ b/projects/app-lob/src/app/grid-dynamic-chart-data/grid-dynamic-chart-data.component.scss
@@ -1,5 +1,6 @@
 :host ::ng-deep {
     .grid-chart-contextmenu-wrapper {
+        --ig-size: var(--ig-size-small);
         width: 90%;
         margin: 50px auto;
         height: 80%;
diff --git a/projects/app-lob/src/app/grid-finjs/grid-finjs.component.html b/projects/app-lob/src/app/grid-finjs/grid-finjs.component.html
index 0c3c6538c2..daa9cafd2c 100644
--- a/projects/app-lob/src/app/grid-finjs/grid-finjs.component.html
+++ b/projects/app-lob/src/app/grid-finjs/grid-finjs.component.html
@@ -2,7 +2,6 @@
     <igx-grid #grid1
         [igxPreventDocumentScroll]="true"
         width="100%" height="100%"
-        displayDensity="compact"
         hiddenColumnsText="Hidden"
         primaryKey="id"
         [autoGenerate]="false"
diff --git a/projects/app-lob/src/app/grid-finjs/grid-finjs.component.scss b/projects/app-lob/src/app/grid-finjs/grid-finjs.component.scss
index 1719518e3e..de82e774e2 100644
--- a/projects/app-lob/src/app/grid-finjs/grid-finjs.component.scss
+++ b/projects/app-lob/src/app/grid-finjs/grid-finjs.component.scss
@@ -1,6 +1,8 @@
 @use '../../variables' as *;
 
 .grid__wrapper {
+    --ig-size: var(--ig-size-small);
+
 	position: relative;
 	width: 100%;
 	height: 98%;
diff --git a/projects/app-lob/src/app/grid/grid-boston-marathon/grid.component.html b/projects/app-lob/src/app/grid/grid-boston-marathon/grid.component.html
index 476de2d59e..82fc3621ca 100644
--- a/projects/app-lob/src/app/grid/grid-boston-marathon/grid.component.html
+++ b/projects/app-lob/src/app/grid/grid-boston-marathon/grid.component.html
@@ -10,7 +10,7 @@ <h5 class="switch-sample__title">Boston Marathon 2023</h5>
         </igx-input-group>
     </div>
     <div class="grid__wrapper__inner">
-        <igx-grid #grid1 [igxPreventDocumentScroll]="true" [data]="localData" height="600px" displayDensity="cosy" [allowFiltering]="true" [filterMode]="'excelStyleFilter'" [allowAdvancedFiltering]="true">
+        <igx-grid #grid1 [igxPreventDocumentScroll]="true" [data]="localData" height="600px" [allowFiltering]="true" [filterMode]="'excelStyleFilter'" [allowAdvancedFiltering]="true">
             <igx-paginator [perPage]="10"></igx-paginator>
             <igx-column header="Rank" [width]="'12%'" field="Id" [sortable]="true" [filterable]="false">
                 <ng-template igxCell let-cell="cell">
diff --git a/projects/app-lob/src/app/grid/grid-boston-marathon/grid.component.scss b/projects/app-lob/src/app/grid/grid-boston-marathon/grid.component.scss
index 334a303546..26c8e34f08 100644
--- a/projects/app-lob/src/app/grid/grid-boston-marathon/grid.component.scss
+++ b/projects/app-lob/src/app/grid/grid-boston-marathon/grid.component.scss
@@ -27,6 +27,10 @@ $progressBar-sample-theme: progress-linear-theme(
     justify-content: center;
 }
 
+igx-grid {
+    --ig-size: var(--ig-size-medium);
+}
+
 :host {
     ::ng-deep {
         .igx-paginator > * {
diff --git a/projects/app-lob/src/app/grid/grid-master-detail/grid-master-detail.component.html b/projects/app-lob/src/app/grid/grid-master-detail/grid-master-detail.component.html
index dfbdb9c9ff..98360f4b1f 100644
--- a/projects/app-lob/src/app/grid/grid-master-detail/grid-master-detail.component.html
+++ b/projects/app-lob/src/app/grid/grid-master-detail/grid-master-detail.component.html
@@ -1,5 +1,5 @@
 <div class="grid__wrapper">
-    <igx-grid [igxPreventDocumentScroll]="true" displayDensity="cosy" [data]="data" [autoGenerate]="false" height="592px" width="100%">
+    <igx-grid [igxPreventDocumentScroll]="true" [data]="data" [autoGenerate]="false" height="592px" width="100%">
         <igx-column field="name" header="Name" width="250px"></igx-column>
         <igx-column field="position" header="Position"></igx-column>
         <igx-column field="company" header="Company"></igx-column>
@@ -53,7 +53,7 @@ <h6>{{dataItem.name}}</h6>
                                 </igx-pie-chart>
                                 <igx-divider [vertical]="true"></igx-divider>
                                 <igx-grid [data]="dataItem.gridData ? dataItem.gridData: gridData(dataItem)"
-                                    [autoGenerate]="true" class="details-grid" columnWidth="70px" displayDensity="cosy"
+                                    [autoGenerate]="true" class="details-grid" columnWidth="70px"
                                     width="260px" height="206px" (columnInit)="columnInit($event)">
                                 </igx-grid>
                             </div>
diff --git a/projects/app-lob/src/app/grid/grid-master-detail/grid-master-detail.component.scss b/projects/app-lob/src/app/grid/grid-master-detail/grid-master-detail.component.scss
index cbc1cbebaf..da52f2185a 100644
--- a/projects/app-lob/src/app/grid/grid-master-detail/grid-master-detail.component.scss
+++ b/projects/app-lob/src/app/grid/grid-master-detail/grid-master-detail.component.scss
@@ -40,5 +40,6 @@ h6 {
 }
 
 .grid__wrapper {
+    --ig-size: var(--ig-size-medium);
     margin: rem(4px) rem(16px);
 }
diff --git a/projects/app-lob/src/app/treegrid-finjs/tree-grid-finjs-sample.component.html b/projects/app-lob/src/app/treegrid-finjs/tree-grid-finjs-sample.component.html
index 08407ac8c4..ac2898a64b 100644
--- a/projects/app-lob/src/app/treegrid-finjs/tree-grid-finjs-sample.component.html
+++ b/projects/app-lob/src/app/treegrid-finjs/tree-grid-finjs-sample.component.html
@@ -32,7 +32,6 @@
         width="100%"
         [moving]="true"
         [autoGenerate]="false"
-        displayDensity="compact"
         hiddenColumnsText="Hidden"
         [isLoading]="isLoading"
         [allowFiltering]="true"
diff --git a/projects/app-lob/src/app/treegrid-finjs/tree-grid-finjs-sample.component.scss b/projects/app-lob/src/app/treegrid-finjs/tree-grid-finjs-sample.component.scss
index d88fabdc26..00c7a92157 100644
--- a/projects/app-lob/src/app/treegrid-finjs/tree-grid-finjs-sample.component.scss
+++ b/projects/app-lob/src/app/treegrid-finjs/tree-grid-finjs-sample.component.scss
@@ -253,6 +253,10 @@
 	padding: rem(15px);
 	display: flex;
 	flex-direction: column;
+
+    igx-tree-grid {
+        --ig-size: var(--ig-size-small);
+    }
 }
 
 igx-grid {
diff --git a/src/app/data-entries/buttonGroup/button-group-sample-5/button-group-sample-5.component.html b/src/app/data-entries/buttonGroup/button-group-sample-5/button-group-sample-5.component.html
index 1887a0bdff..baaf314768 100644
--- a/src/app/data-entries/buttonGroup/button-group-sample-5/button-group-sample-5.component.html
+++ b/src/app/data-entries/buttonGroup/button-group-sample-5/button-group-sample-5.component.html
@@ -1,6 +1,3 @@
 <article class="sample-column">
-    <igx-buttongroup [values]="displayDensities"
-                     (selected)="selectDensity($event)"
-                     [displayDensity]="displayDensity">
-    </igx-buttongroup>
+    <igx-buttongroup [values]="sizes" (selected)="selectSize($event)"></igx-buttongroup>
 </article>
diff --git a/src/app/data-entries/buttonGroup/button-group-sample-5/button-group-sample-5.component.ts b/src/app/data-entries/buttonGroup/button-group-sample-5/button-group-sample-5.component.ts
index ed5b748287..6f90fc4264 100644
--- a/src/app/data-entries/buttonGroup/button-group-sample-5/button-group-sample-5.component.ts
+++ b/src/app/data-entries/buttonGroup/button-group-sample-5/button-group-sample-5.component.ts
@@ -1,5 +1,10 @@
-import { Component, OnInit } from '@angular/core';
-import { DisplayDensity } from 'igniteui-angular';
+import { Component, HostBinding, OnInit } from '@angular/core';
+
+type Button = {
+    label: string,
+    selected: boolean,
+    togglable: boolean
+}
 
 @Component({
     selector: 'app-button-group-sample-5',
@@ -7,22 +12,25 @@ import { DisplayDensity } from 'igniteui-angular';
     templateUrl: './button-group-sample-5.component.html'
 })
 export class ButtonGroupSample5Component implements OnInit {
-
     public rippleColor = 'grey';
-
-    public displayDensity: DisplayDensity = 'comfortable';
-    public displayDensities;
+    public size = 'large';
+    public sizes: Button[];
 
     public ngOnInit() {
-        this.displayDensities = [
-            { label: 'compact', selected: this.displayDensity === 'compact', togglable: true },
-            { label: 'cosy', selected: this.displayDensity === 'cosy', togglable: true },
-            { label: 'comfortable', selected: this.displayDensity === 'comfortable', togglable: true }
+        this.sizes = [
+            { label: 'small', selected: this.size === 'small', togglable: true },
+            { label: 'medium', selected: this.size === 'medium', togglable: true },
+            { label: 'large', selected: this.size === 'large', togglable: true }
         ];
     }
 
-    public selectDensity(event) {
-        this.displayDensity = this.displayDensities[event.index].label;
+    public selectSize(event: any) {
+        this.size = this.sizes[event.index].label;
     }
 
+
+    @HostBinding('style.--ig-size')
+    protected get sizeStyle() {
+        return `var(--ig-size-${this.size})`;
+    }
 }
diff --git a/src/app/data-entries/buttons/buttons-display-density/buttons-display-density.component.html b/src/app/data-entries/buttons/buttons-display-density/buttons-display-density.component.html
index be6c654757..79b8bddfc5 100644
--- a/src/app/data-entries/buttons/buttons-display-density/buttons-display-density.component.html
+++ b/src/app/data-entries/buttons/buttons-display-density/buttons-display-density.component.html
@@ -1,22 +1,24 @@
 <article class="sample-column">
     <div class="density-chooser">
-        <igx-buttongroup [values]="displayDensities" (selected)="selectDensity($event)"></igx-buttongroup>
+        <igx-buttongroup [values]="sizes" (selected)="selectSize($event)"></igx-buttongroup>
     </div>
     <div class="button-sample">
         <div class="button-sample">
-            <button igxButton="flat" igxRipple [displayDensity]="density">Flat</button>
+            <button igxButton="flat" igxRipple>Flat</button>
         </div>
         <div class="button-sample">
-            <button igxButton="raised" igxRipple [displayDensity]="density">Raised</button>
+            <button igxButton="raised" igxRipple>Raised</button>
         </div>
         <div class="button-sample">
-            <button igxButton="outlined" igxRipple [displayDensity]="density">Outlined</button>
+            <button igxButton="outlined" igxRipple>Outlined</button>
         </div>
         <div class="button-sample">
-            <button igxButton="fab" igxRipple [displayDensity]="density"><igx-icon family="material">edit</igx-icon></button>
+            <button igxButton="fab" igxRipple>
+                <igx-icon family="material">edit</igx-icon>
+            </button>
         </div>
         <div class="button-sample">
-            <button igxButton="fab" igxRipple [displayDensity]="density">
+            <button igxButton="fab" igxRipple>
                 <span>Like</span>
                 <igx-icon family="material">favorite</igx-icon>
             </button>
diff --git a/src/app/data-entries/buttons/buttons-display-density/buttons-display-density.component.ts b/src/app/data-entries/buttons/buttons-display-density/buttons-display-density.component.ts
index a0ab03fde2..6b6ee37f24 100644
--- a/src/app/data-entries/buttons/buttons-display-density/buttons-display-density.component.ts
+++ b/src/app/data-entries/buttons/buttons-display-density/buttons-display-density.component.ts
@@ -1,5 +1,4 @@
-import { Component, OnInit } from '@angular/core';
-import { DisplayDensity } from 'igniteui-angular';
+import { Component, HostBinding, OnInit } from '@angular/core';
 
 @Component({
     selector: 'app-buttons-display-density',
@@ -7,18 +6,23 @@ import { DisplayDensity } from 'igniteui-angular';
     templateUrl: './buttons-display-density.component.html'
 })
 export class ButtonsDisplayDensityComponent implements OnInit {
-    public density: DisplayDensity = 'comfortable';
-    public displayDensities;
+    public size = 'large';
+    public sizes;
 
     public ngOnInit(): void {
-        this.displayDensities = [
-            { label: 'comfortable', selected: this.density === 'comfortable', togglable: true },
-            { label: 'cosy', selected: this.density === 'cosy', togglable: true },
-            { label: 'compact', selected: this.density === 'compact', togglable: true }
+        this.sizes = [
+            { label: 'large', selected: this.size === 'large', togglable: true },
+            { label: 'medium', selected: this.size === 'medium', togglable: true },
+            { label: 'small', selected: this.size === 'small', togglable: true }
         ];
     }
 
-    public selectDensity(event) {
-        this.density = this.displayDensities[event.index].label;
+    @HostBinding('style.--ig-size')
+    protected get sizeStyle() {
+        return `var(--ig-size-${this.size})`;
+    }
+
+    public selectSize(event) {
+        this.size = this.sizes[event.index].label;
     }
 }
diff --git a/src/app/grid/custom-grid-paging-style/custom-grid-paging-style.component.html b/src/app/grid/custom-grid-paging-style/custom-grid-paging-style.component.html
index 5eab2ac57c..5678e95b1b 100644
--- a/src/app/grid/custom-grid-paging-style/custom-grid-paging-style.component.html
+++ b/src/app/grid/custom-grid-paging-style/custom-grid-paging-style.component.html
@@ -1,5 +1,5 @@
 <div class="grid__wrapper">
-    <igx-grid [igxPreventDocumentScroll]="true" #grid1 [data]="data" height="520px" width="100%" displayDensity="cosy">
+    <igx-grid [igxPreventDocumentScroll]="true" #grid1 [data]="data" height="520px" width="100%">
         <igx-paginator [perPage]="10"></igx-paginator>
         <igx-column header="Rank" headerClasses="myClass" field="Id" [sortable]="true"></igx-column>
         <igx-column field="Name" header="Athlete"></igx-column>
diff --git a/src/app/grid/custom-grid-paging-style/custom-grid-paging-style.component.scss b/src/app/grid/custom-grid-paging-style/custom-grid-paging-style.component.scss
index d75ea1fb2e..fec6d92554 100644
--- a/src/app/grid/custom-grid-paging-style/custom-grid-paging-style.component.scss
+++ b/src/app/grid/custom-grid-paging-style/custom-grid-paging-style.component.scss
@@ -66,6 +66,7 @@ $dark-drop-down-theme: drop-down-theme(
 }
 
 .grid__wrapper {
+    --ig-size: var(--ig-size-medium);
     margin: 0 16px;
     padding-top: 16px;
 }
diff --git a/src/app/grid/grid-cascading-combos/grid-cascading-combos.component.html b/src/app/grid/grid-cascading-combos/grid-cascading-combos.component.html
index 09b643b496..37d541746e 100644
--- a/src/app/grid/grid-cascading-combos/grid-cascading-combos.component.html
+++ b/src/app/grid/grid-cascading-combos/grid-cascading-combos.component.html
@@ -1,6 +1,6 @@
 <div class="grid__wrapper">
     <div class="sample__header">
-        <igx-grid [igxPreventDocumentScroll]="true" #grid1 [data]="data" [autoGenerate]="false" displayDensity="cosy"
+        <igx-grid [igxPreventDocumentScroll]="true" #grid1 [data]="data" [autoGenerate]="false"
             width="100%" height="500px" [primaryKey]="'ID'">
             <igx-column field="ID" header="ID" [dataType]="'number'" width="50px">
             </igx-column>
diff --git a/src/app/grid/grid-cascading-combos/grid-cascading-combos.component.scss b/src/app/grid/grid-cascading-combos/grid-cascading-combos.component.scss
index f9f5030e0d..4c53688301 100644
--- a/src/app/grid/grid-cascading-combos/grid-cascading-combos.component.scss
+++ b/src/app/grid/grid-cascading-combos/grid-cascading-combos.component.scss
@@ -1,4 +1,5 @@
 .grid__wrapper {
+    --ig-size: var(--ig-size-medium);
     padding: 16px;
 }
 
diff --git a/src/app/grid/grid-column-data-types-sample/grid-column-data-types-sample.component.html b/src/app/grid/grid-column-data-types-sample/grid-column-data-types-sample.component.html
index ec4f364b3b..60cb307f0b 100644
--- a/src/app/grid/grid-column-data-types-sample/grid-column-data-types-sample.component.html
+++ b/src/app/grid/grid-column-data-types-sample/grid-column-data-types-sample.component.html
@@ -78,7 +78,7 @@
 
     <span class="grid-wrapper">
         <igx-grid [igxPreventDocumentScroll]="true" #grid1 [data]="data" [allowFiltering]="true" [locale]="locale"
-            [filterMode]="'excelStyleFilter'" [autoGenerate]="false" [height]="null" displayDensity="compact">
+            [filterMode]="'excelStyleFilter'" [autoGenerate]="false" [height]="null">
             <igx-column field="ProductName" [width]="'120px'" header="Prod. Name" [sortable]="true" [hasSummary]="true"
                 [editable]="true" [dataType]="'string'" [resizable]="true">
             </igx-column>
diff --git a/src/app/grid/grid-column-data-types-sample/grid-column-data-types-sample.component.scss b/src/app/grid/grid-column-data-types-sample/grid-column-data-types-sample.component.scss
index 993e754607..d58355e454 100644
--- a/src/app/grid/grid-column-data-types-sample/grid-column-data-types-sample.component.scss
+++ b/src/app/grid/grid-column-data-types-sample/grid-column-data-types-sample.component.scss
@@ -1,6 +1,7 @@
 @use '../../../variables' as *;
 
 .grid-wrapper {
+    --ig-size: var(--ig-size-small);
     margin: 15px;
 }
 
diff --git a/src/app/grid/grid-displaydensity-sample/grid-displaydensity-sample.component.html b/src/app/grid/grid-displaydensity-sample/grid-displaydensity-sample.component.html
index fee3667d06..2627aa48c0 100644
--- a/src/app/grid/grid-displaydensity-sample/grid-displaydensity-sample.component.html
+++ b/src/app/grid/grid-displaydensity-sample/grid-displaydensity-sample.component.html
@@ -1,7 +1,7 @@
 <div class="density-chooser">
-    <igx-buttongroup [values]="displayDensities" (selected)="selectDensity($event)"></igx-buttongroup>
+    <igx-buttongroup [values]="sizes" (selected)="selectSize($event)"></igx-buttongroup>
 </div>
-<igx-grid [igxPreventDocumentScroll]="true" #grid [data]="data" [displayDensity]="density" width="100%" height="550px" [allowFiltering]="true">
+<igx-grid [igxPreventDocumentScroll]="true" #grid [data]="data" width="100%" height="550px" [allowFiltering]="true">
     <igx-column-group header="Customer Information">
         <igx-column field="CustomerName" header="Customer Name" [dataType]="'string'" [sortable]="true" [hasSummary]="true">
         </igx-column>
diff --git a/src/app/grid/grid-displaydensity-sample/grid-displaydensity-sample.component.ts b/src/app/grid/grid-displaydensity-sample/grid-displaydensity-sample.component.ts
index c66bf4d2af..42f3743d4b 100644
--- a/src/app/grid/grid-displaydensity-sample/grid-displaydensity-sample.component.ts
+++ b/src/app/grid/grid-displaydensity-sample/grid-displaydensity-sample.component.ts
@@ -1,5 +1,5 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
-import { DisplayDensity, IgxButtonGroupComponent, IgxGridComponent, IgxNumberSummaryOperand,
+import { Component, HostBinding, OnInit, ViewChild } from '@angular/core';
+import { IgxButtonGroupComponent, IgxGridComponent, IgxNumberSummaryOperand,
     IgxSummaryOperand, IgxSummaryResult } from 'igniteui-angular';
 import { INVOICE_DATA } from '../../data/invoiceData';
 
@@ -25,39 +25,44 @@ class CustomNumberSummary {
   templateUrl: './grid-displaydensity-sample.component.html'
 })
 export class GridDisplayDensitySampleComponent implements OnInit {
-
     @ViewChild('grid', { read: IgxGridComponent, static: true })
     public grid: IgxGridComponent;
+
     @ViewChild(IgxButtonGroupComponent, { static: true }) public buttonGroup: IgxButtonGroupComponent;
     public data;
-    public density: DisplayDensity = 'compact';
-    public displayDensities;
+
+    public size = 'small';
+    public sizes;
     public numberSummaries = CustomNumberSummary;
 
     public ngOnInit() {
         this.data = INVOICE_DATA;
-        this.displayDensities = [
+        this.sizes = [
             {
-                label: 'compact',
-                selected: this.density === 'compact',
+                label: 'small',
+                selected: this.size === 'small',
                 togglable: true
             },
             {
-                label: 'cosy',
-                selected: this.density === 'cosy',
+                label: 'medium',
+                selected: this.size === 'medium',
                 togglable: true
             },
             {
-                label: 'comfortable',
-                selected: this.density === 'comfortable',
+                label: 'large',
+                selected: this.size === 'large',
                 togglable: true
             }
         ];
     }
 
-    public selectDensity(event) {
-        this.density = this.displayDensities[event.index].label;
-        this.grid.displayDensity = this.displayDensities[event.index].label;
+    @HostBinding('style.--ig-size')
+    protected get sizeStyle() {
+        return `var(--ig-size-${this.size})`;
+    }
+
+    public selectSize(event) {
+        this.size = this.sizes[event.index].label;
         this.grid.reflow();
     }
 
diff --git a/src/app/grid/grid-editing-sample/grid-editing-sample.component.html b/src/app/grid/grid-editing-sample/grid-editing-sample.component.html
index 7cb023173d..7ef34e7d5a 100644
--- a/src/app/grid/grid-editing-sample/grid-editing-sample.component.html
+++ b/src/app/grid/grid-editing-sample/grid-editing-sample.component.html
@@ -1,6 +1,6 @@
 <div class="grid__wrapper">
     <div class="sample__header">
-        <igx-grid [igxPreventDocumentScroll]="true" #grid1 [data]="data" [autoGenerate]="false" displayDensity="cosy" width="100%" height="600px" [primaryKey]="'ProductID'" [allowFiltering]="true" (rowDeleted)="show($event)">
+        <igx-grid [igxPreventDocumentScroll]="true" #grid1 [data]="data" [autoGenerate]="false" width="100%" height="600px" [primaryKey]="'ProductID'" [allowFiltering]="true" (rowDeleted)="show($event)">
             <igx-paginator [perPage]="10"></igx-paginator>
             <igx-grid-toolbar>
 
diff --git a/src/app/grid/grid-editing-sample/grid-editing-sample.component.scss b/src/app/grid/grid-editing-sample/grid-editing-sample.component.scss
index 48bdfcb748..4c53688301 100644
--- a/src/app/grid/grid-editing-sample/grid-editing-sample.component.scss
+++ b/src/app/grid/grid-editing-sample/grid-editing-sample.component.scss
@@ -1,4 +1,5 @@
 .grid__wrapper {
+    --ig-size: var(--ig-size-medium);
     padding: 16px;
 }
 
@@ -12,7 +13,7 @@
     }
 
     #discontinued {
-        margin-top: 15px; 
+        margin-top: 15px;
     }
 }
 
diff --git a/src/app/grid/grid-excel-style-filtering-sample-1/grid-excel-style-filtering-sample-1.component.html b/src/app/grid/grid-excel-style-filtering-sample-1/grid-excel-style-filtering-sample-1.component.html
index 68efb056b5..bd0320d517 100644
--- a/src/app/grid/grid-excel-style-filtering-sample-1/grid-excel-style-filtering-sample-1.component.html
+++ b/src/app/grid/grid-excel-style-filtering-sample-1/grid-excel-style-filtering-sample-1.component.html
@@ -1,8 +1,8 @@
 <div class="grid__wrapper">
     <div class="density-chooser">
-        <igx-buttongroup [values]="displayDensities" (selected)="selectDensity($event)"></igx-buttongroup>
+        <igx-buttongroup [values]="sizes" (selected)="selectSize($event)"></igx-buttongroup>
     </div>
-    <igx-grid [igxPreventDocumentScroll]="true" #grid1 [data]="data" [displayDensity]="density" [moving]="true" [autoGenerate]="false" height="850px" width="100%" [allowFiltering]="true" [filterMode]="'excelStyleFilter'">
+    <igx-grid [igxPreventDocumentScroll]="true" #grid1 [data]="data" [moving]="true" [autoGenerate]="false" height="850px" width="100%" [allowFiltering]="true" [filterMode]="'excelStyleFilter'">
         <igx-grid-toolbar>
             <igx-grid-toolbar-actions>
                 <igx-grid-toolbar-hiding></igx-grid-toolbar-hiding>
diff --git a/src/app/grid/grid-excel-style-filtering-sample-1/grid-excel-style-filtering-sample-1.component.ts b/src/app/grid/grid-excel-style-filtering-sample-1/grid-excel-style-filtering-sample-1.component.ts
index 0ed345d2e9..94339eeae1 100644
--- a/src/app/grid/grid-excel-style-filtering-sample-1/grid-excel-style-filtering-sample-1.component.ts
+++ b/src/app/grid/grid-excel-style-filtering-sample-1/grid-excel-style-filtering-sample-1.component.ts
@@ -1,5 +1,5 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
-import { DisplayDensity, IgxGridComponent } from 'igniteui-angular';
+import { Component, HostBinding, OnInit, ViewChild } from '@angular/core';
+import { IgxGridComponent } from 'igniteui-angular';
 import { DATA } from '../../data/nwindData';
 
 @Component({
@@ -14,35 +14,39 @@ export class ExcelStyleFilteringSample1Component implements OnInit {
 
     public data: any[];
 
-    public density: DisplayDensity = 'comfortable';
-    public displayDensities;
+    public size = 'large';
+    public sizes;
 
     constructor() {
     }
     public ngOnInit(): void {
         this.data = DATA;
-        this.displayDensities = [
+        this.sizes = [
             {
-                label: 'compact',
-                selected: this.density === 'compact',
+                label: 'small',
+                selected: this.size === 'small',
                 togglable: true
             },
             {
-                label: 'cosy',
-                selected: this.density === 'cosy',
+                label: 'medium',
+                selected: this.size === 'medium',
                 togglable: true
             },
             {
-                label: 'comfortable',
-                selected: this.density === 'comfortable',
+                label: 'large',
+                selected: this.size === 'large',
                 togglable: true
             }
         ];
     }
 
-    public selectDensity(event) {
-        this.density = this.displayDensities[event.index].label;
-        this.grid1.displayDensity = this.displayDensities[event.index].label;
+    @HostBinding('style.--ig-size')
+    protected get sizeStyle() {
+        return `var(--ig-size-${this.size})`;
+    }
+
+    public selectSize(event) {
+        this.size = this.sizes[event.index].label;
         this.grid1.reflow();
     }
 
diff --git a/src/app/grid/grid-keyboardnav-guide-sample/grid-keyboardnav-sample.component.html b/src/app/grid/grid-keyboardnav-guide-sample/grid-keyboardnav-sample.component.html
index 25f0b31939..6cef71685a 100644
--- a/src/app/grid/grid-keyboardnav-guide-sample/grid-keyboardnav-sample.component.html
+++ b/src/app/grid/grid-keyboardnav-guide-sample/grid-keyboardnav-sample.component.html
@@ -1,6 +1,6 @@
 <div class="sample">
     <div class="grid_wrapper">
-        <igx-grid height="450px" width="100%" [allowFiltering]="true" [filterMode]="'excelStyleFilter'" displayDensity="compact"
+        <igx-grid height="450px" width="100%" [allowFiltering]="true" [filterMode]="'excelStyleFilter'"
             summaryCalculationMode="rootLevelOnly" columnSelection="single" [allowAdvancedFiltering]="true" [moving]="true"
             (keydown)="gridKeydown($event)" (activeNodeChange)="onActiveNodeChange($event)">
             <igx-paginator></igx-paginator>
diff --git a/src/app/grid/grid-keyboardnav-guide-sample/grid-keyboardnav-sample.component.scss b/src/app/grid/grid-keyboardnav-guide-sample/grid-keyboardnav-sample.component.scss
index e692144c67..350dfb9014 100644
--- a/src/app/grid/grid-keyboardnav-guide-sample/grid-keyboardnav-sample.component.scss
+++ b/src/app/grid/grid-keyboardnav-guide-sample/grid-keyboardnav-sample.component.scss
@@ -15,6 +15,7 @@ $custom-checkbox-theme: checkbox-theme(
     display: flex;
 
     .grid_wrapper {
+        --ig-size: var(--ig-size-small);
         padding-left: 15px;
         padding-top: 15px;
         width: 75%;
diff --git a/src/app/grid/grid-nested-data-binding-2/grid-nested-data-bind2.html b/src/app/grid/grid-nested-data-binding-2/grid-nested-data-bind2.html
index 9b1e549f93..7469cadf00 100644
--- a/src/app/grid/grid-nested-data-binding-2/grid-nested-data-bind2.html
+++ b/src/app/grid/grid-nested-data-binding-2/grid-nested-data-bind2.html
@@ -1,6 +1,6 @@
 <div class="sample-wrapper">
     <div class="grid__wrapper">
-        <igx-grid displayDensity="compact" [igxPreventDocumentScroll]="true" [data]="data" [allowFiltering]="true" filterMode="excelStyleFilter">
+        <igx-grid [igxPreventDocumentScroll]="true" [data]="data" [allowFiltering]="true" filterMode="excelStyleFilter">
             <igx-column *ngFor="let each of nestedConfigColumns"
                 [sortable]="true"
                 [field]="each.field"
diff --git a/src/app/grid/grid-nested-data-binding-2/grid-nested-data-bind2.scss b/src/app/grid/grid-nested-data-binding-2/grid-nested-data-bind2.scss
index c3b4e6cdcb..00aafb6564 100644
--- a/src/app/grid/grid-nested-data-binding-2/grid-nested-data-bind2.scss
+++ b/src/app/grid/grid-nested-data-binding-2/grid-nested-data-bind2.scss
@@ -10,6 +10,7 @@
 }
 
 .grid__wrapper {
+    --ig-size: var(--ig-size-small);
     margin: 0 auto;
     padding: 16px;
     height: 450px
diff --git a/src/app/grid/grid-nested-data-binding/grid-nested-data-bind.html b/src/app/grid/grid-nested-data-binding/grid-nested-data-bind.html
index 542fb00d3b..b497bc3e62 100644
--- a/src/app/grid/grid-nested-data-binding/grid-nested-data-bind.html
+++ b/src/app/grid/grid-nested-data-binding/grid-nested-data-bind.html
@@ -14,11 +14,11 @@
                             </igx-expansion-panel-header>
                             <igx-expansion-panel-body>
                                 <div class="description">
-                                    <igx-input-group  displayDensity="compact">
+                                    <igx-input-group>
                                         <label igxLabel for="title">Title</label>
                                         <input type="text" name="title" igxInput [(ngModel)]="person.Title" style="text-overflow: ellipsis;" />
                                     </igx-input-group>
-                                    <igx-input-group  displayDensity="compact">
+                                    <igx-input-group>
                                         <label igxLabel for="age">Age</label>
                                         <input type="number" name="age" igxInput [(ngModel)]="person.Age" />
                                     </igx-input-group>
diff --git a/src/app/grid/grid-nested-data-binding/grid-nested-data-bind.scss b/src/app/grid/grid-nested-data-binding/grid-nested-data-bind.scss
index 17ccd3c5af..f3f7cb51c5 100644
--- a/src/app/grid/grid-nested-data-binding/grid-nested-data-bind.scss
+++ b/src/app/grid/grid-nested-data-binding/grid-nested-data-bind.scss
@@ -20,10 +20,14 @@ igx-expansion-panel {
         text-overflow: ellipsis;
         padding: .5rem 1rem;
         flex: 1 1 auto;
-        flex-direction: column; 
+        flex-direction: column;
     }
 }
 
+igx-input-group {
+    --ig-size: var(--ig-size-small);
+}
+
 ::ng-deep {
     .expand {
         padding: 2px;
diff --git a/src/app/grid/grid-pager-sample/grid-pager-sample.component.html b/src/app/grid/grid-pager-sample/grid-pager-sample.component.html
index 47f7c4ae77..0df3e4ca53 100644
--- a/src/app/grid/grid-pager-sample/grid-pager-sample.component.html
+++ b/src/app/grid/grid-pager-sample/grid-pager-sample.component.html
@@ -1,6 +1,6 @@
 <div class="grid__wrapper">
     <igx-grid [igxPreventDocumentScroll]="true" #grid [data]="data" height="500px"
-        width="100%" displayDensity="cosy">
+        width="100%">
         <igx-paginator #paginator [(page)]="grid.page" [totalRecords]="grid.totalRecords" [(perPage)]="grid.perPage"
             [selectOptions]="selectOptions" [displayDensity]="grid.displayDensity">
             <igx-paginator-content>
diff --git a/src/app/grid/grid-pager-sample/grid-pager-sample.component.scss b/src/app/grid/grid-pager-sample/grid-pager-sample.component.scss
index 4874f398e9..3701f0f7bc 100644
--- a/src/app/grid/grid-pager-sample/grid-pager-sample.component.scss
+++ b/src/app/grid/grid-pager-sample/grid-pager-sample.component.scss
@@ -1,23 +1,24 @@
 .grid__wrapper {
+    --ig-size: var(--ig-size-medium);
     margin: 0 16px;
     padding-top: 10px;
 }
 
 igx-switch {
     margin: 24px;
-} 
+}
 
 .options-container {
-    display: flex; 
-    flex-direction: row; 
-    align-items: center; 
+    display: flex;
+    flex-direction: row;
+    align-items: center;
     padding: 0 1rem;
 }
 .options_container * { margin-right: 15px; }
 
 .select-input {
-    max-width: 150px; 
-    padding-top: 5px; 
+    max-width: 150px;
+    padding-top: 5px;
     padding-bottom: 5px;
     margin-left: 15px;
-}
\ No newline at end of file
+}
diff --git a/src/app/grid/grid-paging-sample/grid-paging-sample.component.html b/src/app/grid/grid-paging-sample/grid-paging-sample.component.html
index 97f327e069..fd0bfc264e 100644
--- a/src/app/grid/grid-paging-sample/grid-paging-sample.component.html
+++ b/src/app/grid/grid-paging-sample/grid-paging-sample.component.html
@@ -1,6 +1,6 @@
 <div class="grid__wrapper">
 
-    <igx-grid [igxPreventDocumentScroll]="true" #grid1 [data]="data" height="500px" width="100%" displayDensity="cosy">
+    <igx-grid [igxPreventDocumentScroll]="true" #grid1 [data]="data" height="500px" width="100%">
         <igx-paginator [perPage]="10"></igx-paginator>
         <igx-column header="Rank" headerClasses="myClass" field="Id" [sortable]="true"></igx-column>
         <igx-column field="Name" header="Athlete"></igx-column>
diff --git a/src/app/grid/grid-paging-sample/grid-paging-sample.component.scss b/src/app/grid/grid-paging-sample/grid-paging-sample.component.scss
index 4bc3ebc99c..c36c25d405 100644
--- a/src/app/grid/grid-paging-sample/grid-paging-sample.component.scss
+++ b/src/app/grid/grid-paging-sample/grid-paging-sample.component.scss
@@ -7,6 +7,8 @@ $progressBar-sample-theme: progress-linear-theme(
 
 .grid__wrapper {
     @include progress-linear($progressBar-sample-theme);
+
+    --ig-size: var(--ig-size-medium);
     margin: 0 16px;
     padding-top: 10px;
 }
diff --git a/src/app/grid/grid-resize-line-styling-sample/grid-resize-line-styling-sample.html b/src/app/grid/grid-resize-line-styling-sample/grid-resize-line-styling-sample.html
index edf66931a2..f2b6640148 100644
--- a/src/app/grid/grid-resize-line-styling-sample/grid-resize-line-styling-sample.html
+++ b/src/app/grid/grid-resize-line-styling-sample/grid-resize-line-styling-sample.html
@@ -1,5 +1,5 @@
 <div class="grid__wrapper">
-    <igx-grid [igxPreventDocumentScroll]="true" [data]="data" [autoGenerate]="false" height="510px" width="100%" displayDensity="cosy">
+    <igx-grid [igxPreventDocumentScroll]="true" [data]="data" [autoGenerate]="false" height="510px" width="100%">
         <igx-column [field]="'Id'" [header]="'Rank'" [resizable]="true"></igx-column>
         <igx-column [field]="'Name'" [header]="'Athlete'" [resizable]="true"></igx-column>
         <igx-column [field]="'BeatsPerMinute'" [header]="'Beats per minute'" [resizable]="true"></igx-column>
diff --git a/src/app/grid/grid-resize-line-styling-sample/grid-resize-line-styling-sample.scss b/src/app/grid/grid-resize-line-styling-sample/grid-resize-line-styling-sample.scss
index 8ac0097bf2..f6eaef0cf4 100644
--- a/src/app/grid/grid-resize-line-styling-sample/grid-resize-line-styling-sample.scss
+++ b/src/app/grid/grid-resize-line-styling-sample/grid-resize-line-styling-sample.scss
@@ -21,5 +21,6 @@ $custom-grid-theme: grid-theme(
 }
 
 .grid__wrapper {
+    --ig-size: var(--ig-size-medium);
     padding: 16px;
 }
diff --git a/src/app/grid/grid-search-sample/grid-search-sample.component.html b/src/app/grid/grid-search-sample/grid-search-sample.component.html
index 11637f1aea..c5b561bbe8 100644
--- a/src/app/grid/grid-search-sample/grid-search-sample.component.html
+++ b/src/app/grid/grid-search-sample/grid-search-sample.component.html
@@ -10,13 +10,13 @@
 
         <igx-suffix *ngIf="searchText.length > 0">
             <div class="resultsText" *ngIf="grid.lastSearchInfo">
-                <span *ngIf="grid.lastSearchInfo.matchInfoCache.length > 0">
-                    {{ grid.lastSearchInfo.activeMatchIndex + 1 }} of {{ grid.lastSearchInfo.matchInfoCache.length }}
-                    results
-                </span>
-                <span *ngIf="grid.lastSearchInfo.matchInfoCache.length === 0">
-                    No results
-                </span>
+                <!-- <span *ngIf="grid.lastSearchInfo.matchInfoCache.length > 0"> -->
+                <!--     {{ grid.lastSearchInfo.activeMatchIndex + 1 }} of {{ grid.lastSearchInfo.matchInfoCache.length }} -->
+                <!--     results -->
+                <!-- </span> -->
+                <!-- <span *ngIf="grid.lastSearchInfo.matchInfoCache.length === 0"> -->
+                <!--     No results -->
+                <!-- </span> -->
             </div>
             <div class="chips">
                 <igx-chips-area>
diff --git a/src/app/grid/multi-column-header-template/multi-column-header-template.html b/src/app/grid/multi-column-header-template/multi-column-header-template.html
index 1dd143a534..024bba8da8 100644
--- a/src/app/grid/multi-column-header-template/multi-column-header-template.html
+++ b/src/app/grid/multi-column-header-template/multi-column-header-template.html
@@ -9,7 +9,7 @@
         </div>
     </ng-template>
 
-    <igx-grid [igxPreventDocumentScroll]="true" [rowSelection]="selectionMode" #grid height="500px" [moving]="true" [data]="data" displayDensity="compact" [allowFiltering]="true">
+    <igx-grid [igxPreventDocumentScroll]="true" [rowSelection]="selectionMode" #grid height="500px" [moving]="true" [data]="data" [allowFiltering]="true">
         <igx-column [resizable]="true" field="ID" [filterable]="false"></igx-column>
         <igx-column-group [pinned]="false" header="General Information" [headerTemplate]="columnGroupTemplate">
             <igx-column [sortable]="true" [resizable]="true" field="CompanyName"></igx-column>
diff --git a/src/app/grid/multi-column-header-template/multi-column-header-template.scss b/src/app/grid/multi-column-header-template/multi-column-header-template.scss
index 080b756433..69606dd344 100644
--- a/src/app/grid/multi-column-header-template/multi-column-header-template.scss
+++ b/src/app/grid/multi-column-header-template/multi-column-header-template.scss
@@ -1,12 +1,13 @@
 .grid__wrapper {
+    --ig-size: var(--ig-size-small);
     margin: 16px;
 }
 
 .column-group-template__container {
-    display: flex; 
+    display: flex;
     align-items: center;
 }
 
 .column-group-template__icon {
     cursor: pointer;
-}
\ No newline at end of file
+}
diff --git a/src/app/grid/multi-column-headers-export/multi-column-headers-export.component.html b/src/app/grid/multi-column-headers-export/multi-column-headers-export.component.html
index ff8c8eb2f7..177b22fd99 100644
--- a/src/app/grid/multi-column-headers-export/multi-column-headers-export.component.html
+++ b/src/app/grid/multi-column-headers-export/multi-column-headers-export.component.html
@@ -1,5 +1,5 @@
 <div class="grid__wrapper">
-    <igx-grid [igxPreventDocumentScroll]="true" #grid height="750px" [data]="data" [moving]="true" displayDensity="compact" [allowFiltering]="true">
+    <igx-grid [igxPreventDocumentScroll]="true" #grid height="750px" [data]="data" [moving]="true" [allowFiltering]="true">
         <igx-grid-toolbar>
             <igx-grid-toolbar-actions>
                 <igx-switch [(ngModel)]="exportHeaders">Export multi-column headers</igx-switch>
diff --git a/src/app/grid/multi-column-headers-export/multi-column-headers-export.component.scss b/src/app/grid/multi-column-headers-export/multi-column-headers-export.component.scss
index 2649777ff2..40f8f54c54 100644
--- a/src/app/grid/multi-column-headers-export/multi-column-headers-export.component.scss
+++ b/src/app/grid/multi-column-headers-export/multi-column-headers-export.component.scss
@@ -1,3 +1,4 @@
 .grid__wrapper {
+    --ig-size: var(--ig-size-small);
     margin: 15px;
 }
diff --git a/src/app/grid/multi-column-headers-styling/multi-column-headers-styling.component.html b/src/app/grid/multi-column-headers-styling/multi-column-headers-styling.component.html
index 11a9af267e..21e73d066d 100644
--- a/src/app/grid/multi-column-headers-styling/multi-column-headers-styling.component.html
+++ b/src/app/grid/multi-column-headers-styling/multi-column-headers-styling.component.html
@@ -1,5 +1,5 @@
 <div class="grid__wrapper">
-    <igx-grid [igxPreventDocumentScroll]="true" #grid height="470px" [data]="data" displayDensity="compact">
+    <igx-grid [igxPreventDocumentScroll]="true" #grid height="470px" [data]="data">
         <igx-column field="ID"></igx-column>
         <igx-column-group header="General Information">
             <igx-column field="CompanyName"></igx-column>
diff --git a/src/app/grid/multi-column-headers-styling/multi-column-headers-styling.component.scss b/src/app/grid/multi-column-headers-styling/multi-column-headers-styling.component.scss
index 3bb0e2d891..e1dc781485 100644
--- a/src/app/grid/multi-column-headers-styling/multi-column-headers-styling.component.scss
+++ b/src/app/grid/multi-column-headers-styling/multi-column-headers-styling.component.scss
@@ -13,5 +13,6 @@ $custom-theme: grid-theme(
 }
 
 .grid__wrapper {
+    --ig-size: var(--ig-size-small);
     margin: 16px;
 }
diff --git a/src/app/grid/multi-column-headers/multi-column-headers.html b/src/app/grid/multi-column-headers/multi-column-headers.html
index 4ea5408458..c0198f1544 100644
--- a/src/app/grid/multi-column-headers/multi-column-headers.html
+++ b/src/app/grid/multi-column-headers/multi-column-headers.html
@@ -1,5 +1,5 @@
 <div class="grid__wrapper">
-    <igx-grid [igxPreventDocumentScroll]="true" [rowSelection]="selectionMode" #grid height="480px" [data]="data" [moving]="true" displayDensity="compact" [allowFiltering]="true">
+    <igx-grid [igxPreventDocumentScroll]="true" [rowSelection]="selectionMode" #grid height="480px" [data]="data" [moving]="true" [allowFiltering]="true">
         <igx-column [resizable]="true" field="ID" [filterable]="false"></igx-column>
         <igx-column-group [pinned]="false" header="General Information">
             <igx-column [sortable]="true" [resizable]="true" field="CompanyName"></igx-column>
diff --git a/src/app/grid/multi-column-headers/multi-column-headers.scss b/src/app/grid/multi-column-headers/multi-column-headers.scss
index bc362e35dd..541c6c8003 100644
--- a/src/app/grid/multi-column-headers/multi-column-headers.scss
+++ b/src/app/grid/multi-column-headers/multi-column-headers.scss
@@ -1,4 +1,5 @@
 .grid__wrapper {
+    --ig-size: var(--ig-size-small);
     margin: 16px;
 }
 
diff --git a/src/app/hierarchical-grid/hgrid-keybarod-nav-guide-sample/hgrid-keyboard-guide.component.html b/src/app/hierarchical-grid/hgrid-keybarod-nav-guide-sample/hgrid-keyboard-guide.component.html
index 08fd6df676..f6d7d9c5d4 100644
--- a/src/app/hierarchical-grid/hgrid-keybarod-nav-guide-sample/hgrid-keyboard-guide.component.html
+++ b/src/app/hierarchical-grid/hgrid-keybarod-nav-guide-sample/hgrid-keyboard-guide.component.html
@@ -1,7 +1,7 @@
 <div class="sample">
     <div class="grid_wrapper">
         <igx-hierarchical-grid height="570px" width="100%" [allowAdvancedFiltering]="true"
-            columnSelection="multiple" [allowFiltering]="true" [filterMode]="'excelStyleFilter'" displayDensity="compact"
+            columnSelection="multiple" [allowFiltering]="true" [filterMode]="'excelStyleFilter'"
             (keydown)="gridKeydown($event)" (activeNodeChange)="onActiveNodeChange($event)">
             <igx-paginator></igx-paginator>
             <igx-grid-toolbar *ngIf="false"></igx-grid-toolbar>
diff --git a/src/app/hierarchical-grid/hgrid-keybarod-nav-guide-sample/hgrid-keyboard-guide.component.scss b/src/app/hierarchical-grid/hgrid-keybarod-nav-guide-sample/hgrid-keyboard-guide.component.scss
index 65eef84f9c..4e4ab393c2 100644
--- a/src/app/hierarchical-grid/hgrid-keybarod-nav-guide-sample/hgrid-keyboard-guide.component.scss
+++ b/src/app/hierarchical-grid/hgrid-keybarod-nav-guide-sample/hgrid-keyboard-guide.component.scss
@@ -16,6 +16,7 @@ $custom-checkbox-theme: checkbox-theme(
 
 
     .grid_wrapper {
+        --ig-size: var(--ig-size-small);
         padding-left: 15px;
         padding-top: 15px;
         width: 75%;
diff --git a/src/app/hierarchical-grid/hierarchical-grid-collapsible-column-groups/hierarchical-grid-collapsible-column-groups.component.html b/src/app/hierarchical-grid/hierarchical-grid-collapsible-column-groups/hierarchical-grid-collapsible-column-groups.component.html
index cc22b35455..55319f09c1 100644
--- a/src/app/hierarchical-grid/hierarchical-grid-collapsible-column-groups/hierarchical-grid-collapsible-column-groups.component.html
+++ b/src/app/hierarchical-grid/hierarchical-grid-collapsible-column-groups/hierarchical-grid-collapsible-column-groups.component.html
@@ -1,7 +1,7 @@
 <div class="wrapper theme">
     <div class="sample-content">
         <div class="sample-column">
-            <igx-hierarchical-grid [igxPreventDocumentScroll]="true"  #hierarchicalGrid [data]="localdata" [moving]="true" [height]="'560px'" displayDensity="compact" [allowFiltering]="true">
+            <igx-hierarchical-grid [igxPreventDocumentScroll]="true"  #hierarchicalGrid [data]="localdata" [moving]="true" [height]="'560px'" [allowFiltering]="true">
                 <igx-column-group [pinned]="false" header="General Information" [collapsible]="true" [expanded]="false">
                     <ng-template igxCollapsibleIndicator let-column="column">
                         <igx-icon [attr.draggable]="false" #target="tooltipTarget" [igxTooltipTarget]="tooltipRef" [showDelay]="0" [hideDelay]="0">{{column.expanded ? 'expand_more' : 'chevron_right'}} </igx-icon>
diff --git a/src/app/hierarchical-grid/hierarchical-grid-collapsible-column-groups/hierarchical-grid-collapsible-column-groups.component.scss b/src/app/hierarchical-grid/hierarchical-grid-collapsible-column-groups/hierarchical-grid-collapsible-column-groups.component.scss
index e69de29bb2..3f4940ba6f 100644
--- a/src/app/hierarchical-grid/hierarchical-grid-collapsible-column-groups/hierarchical-grid-collapsible-column-groups.component.scss
+++ b/src/app/hierarchical-grid/hierarchical-grid-collapsible-column-groups/hierarchical-grid-collapsible-column-groups.component.scss
@@ -0,0 +1,3 @@
+igx-hierarchical-grid {
+    --ig-size: var(--ig-size-small);
+}
diff --git a/src/app/hierarchical-grid/hierarchical-grid-cross-field-validation/hierarchical-grid-cross-field-validation.component.html b/src/app/hierarchical-grid/hierarchical-grid-cross-field-validation/hierarchical-grid-cross-field-validation.component.html
index 1e1594c4ac..f008c3b46d 100644
--- a/src/app/hierarchical-grid/hierarchical-grid-cross-field-validation/hierarchical-grid-cross-field-validation.component.html
+++ b/src/app/hierarchical-grid/hierarchical-grid-cross-field-validation/hierarchical-grid-cross-field-validation.component.html
@@ -3,7 +3,7 @@
 </div>
 <div class="grid__wrapper">
     <igx-hierarchical-grid  [igxPreventDocumentScroll]="true" [primaryKey]="'CustomerID'" [rowEditable]="rowEdit" [batchEditing]="true"
-        #hierarchicalGrid [data]="localdata" [height]="'500px'" [width]="'100%'" displayDensity="compact"
+        #hierarchicalGrid [data]="localdata" [height]="'500px'" [width]="'100%'"
         (formGroupCreated)="formCreateCustomerHandler($event)" (cellEdit)="editHandler($event)" (rowEdit)="editHandler($event)">
         <igx-column field="row_valid" header=" " [editable]="false" [dataType]="'number'" [pinned]="true" [width]="'50px'">
             <ng-template igxCell let-cell="cell">
diff --git a/src/app/hierarchical-grid/hierarchical-grid-cross-field-validation/hierarchical-grid-cross-field-validation.component.scss b/src/app/hierarchical-grid/hierarchical-grid-cross-field-validation/hierarchical-grid-cross-field-validation.component.scss
index e56b199e1b..d6fdedc686 100644
--- a/src/app/hierarchical-grid/hierarchical-grid-cross-field-validation/hierarchical-grid-cross-field-validation.component.scss
+++ b/src/app/hierarchical-grid/hierarchical-grid-cross-field-validation/hierarchical-grid-cross-field-validation.component.scss
@@ -1,12 +1,17 @@
+.grid__wrapper {
+    --ig-size: var(--ig-size-small);
+}
 
-.top-row, .grid__wrapper {
+.top-row,
+.grid__wrapper {
     padding: 16px;
     padding-bottom: 0;
 }
 
+
 .buttons-wrapper {
     display: flex;
     flex-direction: row;
-    justify-content: start;
+    justify-content: flex-start;
     padding: 10px 0;
 }
diff --git a/src/app/hierarchical-grid/hierarchical-grid-display-density/hierarchical-grid-density.component.html b/src/app/hierarchical-grid/hierarchical-grid-display-density/hierarchical-grid-density.component.html
index 9cbc037b3b..f31619891c 100644
--- a/src/app/hierarchical-grid/hierarchical-grid-display-density/hierarchical-grid-density.component.html
+++ b/src/app/hierarchical-grid/hierarchical-grid-display-density/hierarchical-grid-density.component.html
@@ -1,7 +1,7 @@
 <div class="density-chooser">
-    <igx-buttongroup [values]="displayDensities" (selected)="selectDensity($event)"></igx-buttongroup>
+    <igx-buttongroup [values]="sizes" (selected)="selectSize($event)"></igx-buttongroup>
 </div>
-<igx-hierarchical-grid [igxPreventDocumentScroll]="true"  #hierarchicalGrid [data]="localdata" [displayDensity]="density" [height]="'600px'" [width]="'100%'" [allowFiltering]="true">
+<igx-hierarchical-grid [igxPreventDocumentScroll]="true"  #hierarchicalGrid [data]="localdata" [height]="'600px'" [width]="'100%'" [allowFiltering]="true">
     <igx-column field="CustomerID"></igx-column>
     <igx-column field="CompanyName"></igx-column>
     <igx-column field="ContactName"></igx-column>
@@ -33,5 +33,4 @@
                 <igx-column field="Discount"></igx-column>
         </igx-row-island>
     </igx-row-island>
-
 </igx-hierarchical-grid>
diff --git a/src/app/hierarchical-grid/hierarchical-grid-display-density/hierarchical-grid-density.component.ts b/src/app/hierarchical-grid/hierarchical-grid-display-density/hierarchical-grid-density.component.ts
index fbdf6f042e..8d6beb025f 100644
--- a/src/app/hierarchical-grid/hierarchical-grid-display-density/hierarchical-grid-density.component.ts
+++ b/src/app/hierarchical-grid/hierarchical-grid-display-density/hierarchical-grid-density.component.ts
@@ -1,5 +1,5 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
-import { DisplayDensity, IgxHierarchicalGridComponent } from 'igniteui-angular';
+import { Component, HostBinding, OnInit, ViewChild } from '@angular/core';
+import { IgxHierarchicalGridComponent } from 'igniteui-angular';
 import { CUSTOMERS } from '../../data/hierarchical-data';
 
 @Component({
@@ -13,37 +13,40 @@ export class HGridDisplayDensitySampleComponent implements OnInit {
     private hierarchicalGrid: IgxHierarchicalGridComponent;
 
     public localdata;
-    public density: DisplayDensity = 'compact';
-    public displayDensities;
+    public size = 'small';
+    public sizes;
 
     constructor() {
 
     }
     public ngOnInit(): void {
         this.localdata = CUSTOMERS;
-        this.displayDensities = [
+        this.sizes = [
             {
-                label: 'compact',
-                selected: this.density === 'compact',
+                label: 'small',
+                selected: this.size === 'small',
                 togglable: true
             },
             {
-                label: 'cosy',
-                selected: this.density === 'cosy',
+                label: 'medium',
+                selected: this.size === 'medium',
                 togglable: true
             },
             {
-                label: 'comfortable',
-                selected: this.density === 'comfortable',
+                label: 'large',
+                selected: this.size === 'large',
                 togglable: true
             }
         ];
     }
 
-    public selectDensity(event) {
-        this.density = this.displayDensities[event.index].label;
-        this.hierarchicalGrid.displayDensity = this.displayDensities[event.index].label;
-        this.hierarchicalGrid.reflow();
+    @HostBinding('style.--ig-size')
+    protected get sizeStyle() {
+        return `var(--ig-size-${this.size})`;
     }
 
+    public selectSize(event: any) {
+        this.size = this.sizes[event.index].label;
+        this.hierarchicalGrid.reflow();
+    }
 }
diff --git a/src/app/hierarchical-grid/hierarchical-grid-excel-style-filtering-sample-1/hierarchical-grid-excel-style-filtering-sample-1.component.html b/src/app/hierarchical-grid/hierarchical-grid-excel-style-filtering-sample-1/hierarchical-grid-excel-style-filtering-sample-1.component.html
index 9550f4ab62..34948de79b 100644
--- a/src/app/hierarchical-grid/hierarchical-grid-excel-style-filtering-sample-1/hierarchical-grid-excel-style-filtering-sample-1.component.html
+++ b/src/app/hierarchical-grid/hierarchical-grid-excel-style-filtering-sample-1/hierarchical-grid-excel-style-filtering-sample-1.component.html
@@ -1,8 +1,8 @@
 <div class="wrapper">
     <div class="density-chooser">
-        <igx-buttongroup [values]="displayDensities" (selected)="selectDensity($event)"></igx-buttongroup>
+        <igx-buttongroup [values]="sizes" (selected)="selectSize($event)"></igx-buttongroup>
     </div>
-    <igx-hierarchical-grid [igxPreventDocumentScroll]="true"  class="hgrid" [data]="localdata" [moving]="true" [displayDensity]="density" [autoGenerate]="false" [allowFiltering]='true' filterMode="excelStyleFilter"
+    <igx-hierarchical-grid [igxPreventDocumentScroll]="true"  class="hgrid" [data]="localdata" [moving]="true" [autoGenerate]="false" [allowFiltering]='true' filterMode="excelStyleFilter"
     height="850px" [width]="'100%'" [rowHeight]="'65px'" #hierarchicalGrid>
         <igx-grid-toolbar>
             <igx-grid-toolbar-actions>
diff --git a/src/app/hierarchical-grid/hierarchical-grid-excel-style-filtering-sample-1/hierarchical-grid-excel-style-filtering-sample-1.component.ts b/src/app/hierarchical-grid/hierarchical-grid-excel-style-filtering-sample-1/hierarchical-grid-excel-style-filtering-sample-1.component.ts
index d15e06d808..0ed6ca1875 100644
--- a/src/app/hierarchical-grid/hierarchical-grid-excel-style-filtering-sample-1/hierarchical-grid-excel-style-filtering-sample-1.component.ts
+++ b/src/app/hierarchical-grid/hierarchical-grid-excel-style-filtering-sample-1/hierarchical-grid-excel-style-filtering-sample-1.component.ts
@@ -1,5 +1,5 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
-import { DisplayDensity, IgxHierarchicalGridComponent } from 'igniteui-angular';
+import { Component, HostBinding, OnInit, ViewChild } from '@angular/core';
+import { IgxHierarchicalGridComponent } from 'igniteui-angular';
 import { SINGERS } from '../../data/singersData';
 
 @Component({
@@ -15,27 +15,27 @@ export class HGridExcelStyleFilteringSample1Component implements OnInit {
 
     public localdata;
 
-    public density: DisplayDensity = 'comfortable';
-    public displayDensities;
+    public size = 'large';
+    public sizes: any[];
 
     constructor() {
         this.localdata = SINGERS;
     }
     public ngOnInit(): void {
-        this.displayDensities = [
+        this.sizes = [
             {
-                label: 'compact',
-                selected: this.density === 'compact',
+                label: 'small',
+                selected: this.size === 'small',
                 togglable: true
             },
             {
-                label: 'cosy',
-                selected: this.density === 'cosy',
+                label: 'medium',
+                selected: this.size === 'medium',
                 togglable: true
             },
             {
-                label: 'comfortable',
-                selected: this.density === 'comfortable',
+                label: 'large',
+                selected: this.size === 'large',
                 togglable: true
             }
         ];
@@ -43,9 +43,13 @@ export class HGridExcelStyleFilteringSample1Component implements OnInit {
 
     public formatter = (a) => a;
 
-    public selectDensity(event) {
-        this.density = this.displayDensities[event.index].label;
-        this.hierarchicalGrid.displayDensity = this.displayDensities[event.index].label;
+    @HostBinding('style.--ig-size')
+    protected get sizeStyle() {
+        return `var(--ig-size-${this.size})`;
+    }
+
+    public selectSize(event) {
+        this.size = this.sizes[event.index].label;
         this.hierarchicalGrid.reflow();
     }
 }
diff --git a/src/app/hierarchical-grid/hierarchical-grid-multi-column-header-template/hierarchical-grid-multi-column-template.component.html b/src/app/hierarchical-grid/hierarchical-grid-multi-column-header-template/hierarchical-grid-multi-column-template.component.html
index ecbbe4f399..687d301909 100644
--- a/src/app/hierarchical-grid/hierarchical-grid-multi-column-header-template/hierarchical-grid-multi-column-template.component.html
+++ b/src/app/hierarchical-grid/hierarchical-grid-multi-column-header-template/hierarchical-grid-multi-column-template.component.html
@@ -9,7 +9,7 @@
         </div>
     </ng-template>
 
-    <igx-hierarchical-grid [igxPreventDocumentScroll]="true"  #hierarchicalGrid [data]="localData" [moving]="true" [height]="'500px'" [width]="'100%'" displayDensity="compact" [allowFiltering]="true">
+    <igx-hierarchical-grid [igxPreventDocumentScroll]="true"  #hierarchicalGrid [data]="localData" [moving]="true" [height]="'500px'" [width]="'100%'" [allowFiltering]="true">
         <igx-column field="CustomerID" [sortable]="true" [resizable]="true"></igx-column>
         <igx-column-group [pinned]="false" header="General Information" [headerTemplate]="columnGroupTemplate">
             <igx-column field="CompanyName" [sortable]="true" [resizable]="true"></igx-column>
diff --git a/src/app/hierarchical-grid/hierarchical-grid-multi-column-header-template/hierarchical-grid-multi-column-template.component.scss b/src/app/hierarchical-grid/hierarchical-grid-multi-column-header-template/hierarchical-grid-multi-column-template.component.scss
index 080b756433..69606dd344 100644
--- a/src/app/hierarchical-grid/hierarchical-grid-multi-column-header-template/hierarchical-grid-multi-column-template.component.scss
+++ b/src/app/hierarchical-grid/hierarchical-grid-multi-column-header-template/hierarchical-grid-multi-column-template.component.scss
@@ -1,12 +1,13 @@
 .grid__wrapper {
+    --ig-size: var(--ig-size-small);
     margin: 16px;
 }
 
 .column-group-template__container {
-    display: flex; 
+    display: flex;
     align-items: center;
 }
 
 .column-group-template__icon {
     cursor: pointer;
-}
\ No newline at end of file
+}
diff --git a/src/app/hierarchical-grid/hierarchical-grid-multi-column-headers-export/hierarchical-grid-multi-column-export.component.html b/src/app/hierarchical-grid/hierarchical-grid-multi-column-headers-export/hierarchical-grid-multi-column-export.component.html
index 82e1b43c16..10c1626aec 100644
--- a/src/app/hierarchical-grid/hierarchical-grid-multi-column-headers-export/hierarchical-grid-multi-column-export.component.html
+++ b/src/app/hierarchical-grid/hierarchical-grid-multi-column-headers-export/hierarchical-grid-multi-column-export.component.html
@@ -1,5 +1,5 @@
 <div class="grid__wrapper">
-    <igx-hierarchical-grid [igxPreventDocumentScroll]="true"  #hierarchicalGrid [data]="localdata" [moving]="true" [height]="'740px'" [width]="'100%'" displayDensity="compact" [allowFiltering]="true">
+    <igx-hierarchical-grid [igxPreventDocumentScroll]="true"  #hierarchicalGrid [data]="localdata" [moving]="true" [height]="'740px'" [width]="'100%'" [allowFiltering]="true">
         <igx-grid-toolbar>
             <igx-grid-toolbar-actions>
                 <igx-switch [(ngModel)]="exportHeaders">Export multi-column headers</igx-switch>
diff --git a/src/app/hierarchical-grid/hierarchical-grid-multi-column-headers-export/hierarchical-grid-multi-column-export.component.scss b/src/app/hierarchical-grid/hierarchical-grid-multi-column-headers-export/hierarchical-grid-multi-column-export.component.scss
index b6f79f464f..17d9b1429e 100644
--- a/src/app/hierarchical-grid/hierarchical-grid-multi-column-headers-export/hierarchical-grid-multi-column-export.component.scss
+++ b/src/app/hierarchical-grid/hierarchical-grid-multi-column-headers-export/hierarchical-grid-multi-column-export.component.scss
@@ -1,3 +1,4 @@
 .grid__wrapper {
+    --ig-size: var(--ig-size-small);
     margin: 16px;
 }
diff --git a/src/app/hierarchical-grid/hierarchical-grid-multi-column-headers-styling/hierarchical-grid-multi-column-styling.component.html b/src/app/hierarchical-grid/hierarchical-grid-multi-column-headers-styling/hierarchical-grid-multi-column-styling.component.html
index a59ba3c5ad..0e3654a8f6 100644
--- a/src/app/hierarchical-grid/hierarchical-grid-multi-column-headers-styling/hierarchical-grid-multi-column-styling.component.html
+++ b/src/app/hierarchical-grid/hierarchical-grid-multi-column-headers-styling/hierarchical-grid-multi-column-styling.component.html
@@ -1,5 +1,5 @@
 <div class="grid__wrapper">
-<igx-hierarchical-grid [igxPreventDocumentScroll]="true"  #hierarchicalGrid [data]="localdata" [height]="'470px'" [width]="'100%'" displayDensity="compact">
+<igx-hierarchical-grid [igxPreventDocumentScroll]="true"  #hierarchicalGrid [data]="localdata" [height]="'470px'" [width]="'100%'">
     <igx-column field="CustomerID"></igx-column>
     <igx-column-group header="General Information">
         <igx-column field="CompanyName"></igx-column>
diff --git a/src/app/hierarchical-grid/hierarchical-grid-multi-column-headers-styling/hierarchical-grid-multi-column-styling.component.scss b/src/app/hierarchical-grid/hierarchical-grid-multi-column-headers-styling/hierarchical-grid-multi-column-styling.component.scss
index 888bb53129..b0fc29f8f6 100644
--- a/src/app/hierarchical-grid/hierarchical-grid-multi-column-headers-styling/hierarchical-grid-multi-column-styling.component.scss
+++ b/src/app/hierarchical-grid/hierarchical-grid-multi-column-headers-styling/hierarchical-grid-multi-column-styling.component.scss
@@ -13,5 +13,6 @@ $custom-theme: grid-theme(
 }
 
 .grid__wrapper {
+    --ig-size: var(--ig-size-small);
     padding: 16px;
 }
diff --git a/src/app/hierarchical-grid/hierarchical-grid-multi-column-headers/hierarchical-grid-multi-column.component.html b/src/app/hierarchical-grid/hierarchical-grid-multi-column-headers/hierarchical-grid-multi-column.component.html
index 6cc23ba370..de34512624 100644
--- a/src/app/hierarchical-grid/hierarchical-grid-multi-column-headers/hierarchical-grid-multi-column.component.html
+++ b/src/app/hierarchical-grid/hierarchical-grid-multi-column-headers/hierarchical-grid-multi-column.component.html
@@ -1,5 +1,5 @@
 <div class="grid__wrapper">
-<igx-hierarchical-grid [igxPreventDocumentScroll]="true"  #hierarchicalGrid [data]="localdata" [height]="'480px'" [moving]="true" [width]="'100%'" displayDensity="compact" [allowFiltering]="true">
+<igx-hierarchical-grid [igxPreventDocumentScroll]="true"  #hierarchicalGrid [data]="localdata" [height]="'480px'" [moving]="true" [width]="'100%'" [allowFiltering]="true">
     <igx-column field="CustomerID" [sortable]="true" [resizable]="true"></igx-column>
     <igx-column-group [pinned]="false" header="General Information">
         <igx-column field="CompanyName" [sortable]="true" [resizable]="true"></igx-column>
diff --git a/src/app/hierarchical-grid/hierarchical-grid-multi-column-headers/hierarchical-grid-multi-column.component.scss b/src/app/hierarchical-grid/hierarchical-grid-multi-column-headers/hierarchical-grid-multi-column.component.scss
index 109197c9a8..4c9580a6fe 100644
--- a/src/app/hierarchical-grid/hierarchical-grid-multi-column-headers/hierarchical-grid-multi-column.component.scss
+++ b/src/app/hierarchical-grid/hierarchical-grid-multi-column-headers/hierarchical-grid-multi-column.component.scss
@@ -1,7 +1,8 @@
 .grid__wrapper {
+    --ig-size: var(--ig-size-small);
     margin: 16px;
 }
 
 .igx-button--raised {
     margin-right: 5px;
-}
\ No newline at end of file
+}
diff --git a/src/app/hierarchical-grid/hierarchical-grid-pager-sample/hierarchical-grid-pager-sample.component.html b/src/app/hierarchical-grid/hierarchical-grid-pager-sample/hierarchical-grid-pager-sample.component.html
index 555e5b01c6..6e103b187e 100644
--- a/src/app/hierarchical-grid/hierarchical-grid-pager-sample/hierarchical-grid-pager-sample.component.html
+++ b/src/app/hierarchical-grid/hierarchical-grid-pager-sample/hierarchical-grid-pager-sample.component.html
@@ -1,6 +1,5 @@
 <div class="grid__wrapper">
-    <igx-hierarchical-grid [igxPreventDocumentScroll]="true" #hGrid [data]="data" height="500px" width="100%"
-        displayDensity="cosy" primaryKey="ID">
+    <igx-hierarchical-grid [igxPreventDocumentScroll]="true" #hGrid [data]="data" height="500px" width="100%" primaryKey="ID">
         <igx-paginator #paginator [(page)]="hGrid.page" [totalRecords]="hGrid.totalRecords" [perPage]="10" [selectOptions]="selectOptions" [displayDensity]="hGrid.displayDensity">
             <igx-paginator-content>
                 <igx-page-size *ngIf="!isDropdownHidden"></igx-page-size>
diff --git a/src/app/hierarchical-grid/hierarchical-grid-pager-sample/hierarchical-grid-pager-sample.component.scss b/src/app/hierarchical-grid/hierarchical-grid-pager-sample/hierarchical-grid-pager-sample.component.scss
index ed67dd5458..3701f0f7bc 100644
--- a/src/app/hierarchical-grid/hierarchical-grid-pager-sample/hierarchical-grid-pager-sample.component.scss
+++ b/src/app/hierarchical-grid/hierarchical-grid-pager-sample/hierarchical-grid-pager-sample.component.scss
@@ -1,4 +1,5 @@
 .grid__wrapper {
+    --ig-size: var(--ig-size-medium);
     margin: 0 16px;
     padding-top: 10px;
 }
diff --git a/src/app/hierarchical-grid/hierarchical-grid-save-state/hGrid-state.component.html b/src/app/hierarchical-grid/hierarchical-grid-save-state/hGrid-state.component.html
index 3aad1db564..84129f32f3 100644
--- a/src/app/hierarchical-grid/hierarchical-grid-save-state/hGrid-state.component.html
+++ b/src/app/hierarchical-grid/hierarchical-grid-save-state/hGrid-state.component.html
@@ -48,7 +48,6 @@
         [primaryKey]="'Photo'"
         [autoGenerate]="false"
         [columnSelection]="'multiple'"
-        displayDensity="cosy"
         [cellSelection]="'multiple'">
         <igx-paginator></igx-paginator>
         <igx-grid-toolbar>
diff --git a/src/app/hierarchical-grid/hierarchical-grid-save-state/hGrid-state.component.scss b/src/app/hierarchical-grid/hierarchical-grid-save-state/hGrid-state.component.scss
index e05b6128ef..bc3a4752f7 100644
--- a/src/app/hierarchical-grid/hierarchical-grid-save-state/hGrid-state.component.scss
+++ b/src/app/hierarchical-grid/hierarchical-grid-save-state/hGrid-state.component.scss
@@ -31,6 +31,7 @@
 }
 
 .grid__wrapper {
+    --ig-size: var(--ig-size-medium);
     margin: 0 16px;
     padding-top: 10px;
     width: 100%;
diff --git a/src/app/layouts/carousel/carousel-no-navigation-sample/carousel-no-navigation-sample.component.html b/src/app/layouts/carousel/carousel-no-navigation-sample/carousel-no-navigation-sample.component.html
index 96c52c0753..897b42cd2a 100644
--- a/src/app/layouts/carousel/carousel-no-navigation-sample/carousel-no-navigation-sample.component.html
+++ b/src/app/layouts/carousel/carousel-no-navigation-sample/carousel-no-navigation-sample.component.html
@@ -13,7 +13,7 @@
         </igx-carousel>
     </div>
     <div class="list-wrapper">
-        <igx-list displayDensity="compact">
+        <igx-list>
             <igx-list-item *ngFor="let item of slides; let i=index" [ngClass]="{'disabled': i !== currentIndex }" >
                 <img igxListThumbnail src="{{item.thumb}}" />
                 <div class="titles">
diff --git a/src/app/layouts/carousel/carousel-no-navigation-sample/carousel-no-navigation-sample.component.scss b/src/app/layouts/carousel/carousel-no-navigation-sample/carousel-no-navigation-sample.component.scss
index f832f482a0..f6bda84464 100644
--- a/src/app/layouts/carousel/carousel-no-navigation-sample/carousel-no-navigation-sample.component.scss
+++ b/src/app/layouts/carousel/carousel-no-navigation-sample/carousel-no-navigation-sample.component.scss
@@ -45,6 +45,7 @@
     }
 
     igx-list {
+        --ig-size: var(--ig-size-small);
         justify-content: space-between;
     }
 
diff --git a/src/app/lists/list/list-sample-4/list-sample-4.component.html b/src/app/lists/list/list-sample-4/list-sample-4.component.html
index 2ac49e461d..6dce3afefe 100644
--- a/src/app/lists/list/list-sample-4/list-sample-4.component.html
+++ b/src/app/lists/list/list-sample-4/list-sample-4.component.html
@@ -1,5 +1,5 @@
 <div class="density-chooser">
-    <igx-buttongroup [values]="displayDensities" (selected)="selectDensity($event)"></igx-buttongroup>
+    <igx-buttongroup [values]="sizes" (selected)="selectSize($event)"></igx-buttongroup>
 </div>
 
 <igx-input-group type="search" class="search">
@@ -13,7 +13,7 @@
 </igx-input-group>
 
 <div class="list-sample">
-    <igx-list [displayDensity]="density">
+    <igx-list>
         <igx-list-item [isHeader]="true">Contacts</igx-list-item>
         <igx-list-item igxRipple igxRippleTarget=".igx-list__item-content" #item
             *ngFor="let contact of contacts | igxFilter: filterContacts;">
diff --git a/src/app/lists/list/list-sample-4/list-sample-4.component.ts b/src/app/lists/list/list-sample-4/list-sample-4.component.ts
index b2915894cd..4e8fb64421 100644
--- a/src/app/lists/list/list-sample-4/list-sample-4.component.ts
+++ b/src/app/lists/list/list-sample-4/list-sample-4.component.ts
@@ -1,5 +1,5 @@
-import { Component, OnInit } from '@angular/core';
-import { DisplayDensity, IgxFilterOptions } from 'igniteui-angular';
+import { Component, HostBinding, OnInit } from '@angular/core';
+import { IgxFilterOptions } from 'igniteui-angular';
 @Component({
     selector: 'app-contact-list2',
     styleUrls: ['./list-sample-4.component.scss'],
@@ -41,21 +41,26 @@ export class ListSample4Component implements OnInit {
         }
     ];
 
-    public density: DisplayDensity = 'comfortable';
-    public displayDensities;
+    public size = 'large';
+    public sizes;
 
     constructor() { }
 
     public ngOnInit() {
-        this.displayDensities = [
-            { label: 'comfortable', selected: this.density === 'comfortable', togglable: true },
-            { label: 'cosy', selected: this.density === 'cosy', togglable: true },
-            { label: 'compact', selected: this.density === 'compact', togglable: true }
+        this.sizes = [
+            { label: 'large', selected: this.size === 'large', togglable: true },
+            { label: 'medium', selected: this.size === 'medium', togglable: true },
+            { label: 'small', selected: this.size === 'small', togglable: true }
         ];
     }
 
-    public selectDensity(event) {
-        this.density = this.displayDensities[event.index].label;
+    @HostBinding('style.--ig-size')
+    protected get sizeStyle() {
+        return `var(--ig-size-${this.size})`;
+    }
+
+    public selectSize(event) {
+        this.size = this.sizes[event.index].label;
     }
 
     public toggleFavorite(contact: any, event: Event) {
diff --git a/src/app/menus/action-strip/action-strip-paragraph-styling/action-strip-paragraph-styling.component.html b/src/app/menus/action-strip/action-strip-paragraph-styling/action-strip-paragraph-styling.component.html
index b16e453c33..a45f591a83 100644
--- a/src/app/menus/action-strip/action-strip-paragraph-styling/action-strip-paragraph-styling.component.html
+++ b/src/app/menus/action-strip/action-strip-paragraph-styling/action-strip-paragraph-styling.component.html
@@ -10,7 +10,7 @@
         mollis luctus. Morbi lacinia orci augue, sed blandit est ornare placerat. Cras a ante nec mauris euismod aliquam
         vel pulvinar urna. Morbi tincidunt fringilla tortor, at ultricies neque rhoncus ac.
     </p>
-    <igx-action-strip [displayDensity]="displayDensity" class="my-action-strip" #actionStrip [hidden]="true">
+    <igx-action-strip class="my-action-strip" #actionStrip [hidden]="true">
         <button igxButton (click)="textRestore()">
             <igx-icon>restore</igx-icon>
         </button>
diff --git a/src/app/menus/action-strip/action-strip-paragraph-styling/action-strip-paragraph-styling.component.ts b/src/app/menus/action-strip/action-strip-paragraph-styling/action-strip-paragraph-styling.component.ts
index aaa89a4600..0be22f2bcc 100644
--- a/src/app/menus/action-strip/action-strip-paragraph-styling/action-strip-paragraph-styling.component.ts
+++ b/src/app/menus/action-strip/action-strip-paragraph-styling/action-strip-paragraph-styling.component.ts
@@ -14,7 +14,6 @@ export class ActionStripStylingComponent {
     public textLeft = false;
     public textCenter = false;
     public textRight = false;
-    public displayDensity = DisplayDensity.comfortable;
 
     public textDelete() {
         this.paragraph.nativeElement.classList.add('text-strike-through');
diff --git a/src/app/pivot-grid/pivot-features/pivot-features.component.html b/src/app/pivot-grid/pivot-features/pivot-features.component.html
index 1bb6c5309d..9fae7aa613 100644
--- a/src/app/pivot-grid/pivot-features/pivot-features.component.html
+++ b/src/app/pivot-grid/pivot-features/pivot-features.component.html
@@ -2,6 +2,5 @@
     <igx-pivot-grid #grid1 [data]="data" [height]="'850px'" [pivotConfiguration]="pivotConfig" [rowSelection]="'single'"
         [superCompactMode]="true" [defaultExpandState]='true'>
     </igx-pivot-grid>
-    <igx-pivot-data-selector [grid]="grid1" displayDensity="compact">
-    </igx-pivot-data-selector>
-</div>
\ No newline at end of file
+    <igx-pivot-data-selector [grid]="grid1"></igx-pivot-data-selector>
+</div>
diff --git a/src/app/pivot-grid/pivot-features/pivot-features.component.scss b/src/app/pivot-grid/pivot-features/pivot-features.component.scss
index a3e65f4a0f..8a26f2d959 100644
--- a/src/app/pivot-grid/pivot-features/pivot-features.component.scss
+++ b/src/app/pivot-grid/pivot-features/pivot-features.component.scss
@@ -24,6 +24,10 @@ igx-pivot-grid {
     flex: 1;
 }
 
+igx-pivot-data-selector {
+    --ig-size: var(--ig-size-small);
+}
+
 .pivot-container {
     display: flex;
     align-items: flex-start;
diff --git a/src/app/theming/default-theme-sample/default-theme-sample.component.html b/src/app/theming/default-theme-sample/default-theme-sample.component.html
index 936fa196f1..62bfcbb474 100644
--- a/src/app/theming/default-theme-sample/default-theme-sample.component.html
+++ b/src/app/theming/default-theme-sample/default-theme-sample.component.html
@@ -29,7 +29,7 @@
         <button igxButton="flat" class="addProdBtn" (click)="openDialog()">Add New Product</button>
     </div>
     <igx-grid igxPreventDocumentScroll [data]="data" [autoGenerate]="false" height="550px" width="100%"
-        displayDensity="comfortable" #grid1 [allowFiltering]="true">
+        #grid1 [allowFiltering]="true">
         <igx-paginator [perPage]="10"></igx-paginator>
         <igx-column [field]="'IndustrySector'" dataType="string" [sortable]="true"></igx-column>
         <igx-column [field]="'IndustryGroup'" dataType="string" [sortable]="true" [editable]="true"></igx-column>
diff --git a/src/app/theming/display-density/display-density.component.html b/src/app/theming/display-density/display-density.component.html
index c8ddd0db10..71bc6c9e40 100644
--- a/src/app/theming/display-density/display-density.component.html
+++ b/src/app/theming/display-density/display-density.component.html
@@ -1,5 +1,5 @@
 <div class="density-chooser">
-    <igx-buttongroup [values]="displayDensities" (selected)="changeDensity($event)"></igx-buttongroup>
+    <igx-buttongroup [values]="sizes" (selected)="selectSize($event)"></igx-buttongroup>
 </div>
 
 <igx-input-group>
diff --git a/src/app/theming/display-density/display-density.component.ts b/src/app/theming/display-density/display-density.component.ts
index 13c5040a6d..ec55d757e7 100644
--- a/src/app/theming/display-density/display-density.component.ts
+++ b/src/app/theming/display-density/display-density.component.ts
@@ -1,36 +1,31 @@
-import { Component, Inject, OnInit } from '@angular/core';
-import { DisplayDensityToken, IDisplayDensityOptions } from 'igniteui-angular';
+import { Component, HostBinding, OnInit } from '@angular/core';
 
 @Component({
-    providers: [{ provide: DisplayDensityToken, useValue: { displayDensity: 'comfortable' } }],
     selector: 'app-display-density',
     styleUrls: ['./display-density.component.scss'],
     templateUrl: './display-density.component.html'
 })
 
 export class DisplayDensityComponent implements OnInit {
-    public displayDensities;
-    public density: any;
-    public user;
-
-    constructor(@Inject(DisplayDensityToken) public displayDensityOptions: IDisplayDensityOptions) { }
+    public sizes: any[];
+    public size = 'large';
+    public user: any;
 
     public ngOnInit() {
-        const initialDensity = this.displayDensityOptions.displayDensity;
-        this.displayDensities = [
+        this.sizes = [
             {
-                label: 'compact',
-                selected: initialDensity === 'compact',
+                label: 'small',
+                selected: this.size === 'small',
                 togglable: true
             },
             {
-                label: 'cosy',
-                selected: initialDensity === 'cosy',
+                label: 'medium',
+                selected: this.size === 'medium',
                 togglable: true
             },
             {
-                label: 'comfortable',
-                selected: initialDensity === 'comfortable',
+                label: 'large',
+                selected: this.size === 'large',
                 togglable: true
             }
         ];
@@ -42,8 +37,12 @@ export class DisplayDensityComponent implements OnInit {
         };
     }
 
-    public changeDensity(eventArgs) {
-        this.density = this.displayDensities[eventArgs.index].label;
-        this.displayDensityOptions.displayDensity = this.density;
+    @HostBinding('style.--ig-size')
+    protected get sizeStyle() {
+        return `var(--ig-size-${this.size})`;
+    }
+
+    public selectSize(eventArgs: any) {
+        this.size = this.sizes[eventArgs.index].label;
     }
 }
diff --git a/src/app/tree-grid/tgrid-keyboard-guide/tgrid-keyboardnav-guide.component.html b/src/app/tree-grid/tgrid-keyboard-guide/tgrid-keyboardnav-guide.component.html
index 925169cbda..ae68d32a5e 100644
--- a/src/app/tree-grid/tgrid-keyboard-guide/tgrid-keyboardnav-guide.component.html
+++ b/src/app/tree-grid/tgrid-keyboard-guide/tgrid-keyboardnav-guide.component.html
@@ -1,6 +1,6 @@
 <div class="sample">
     <div class="grid_wrapper">
-        <igx-tree-grid [data]="data" height="450px" width="100%" [moving]="true" [allowFiltering]="true" [filterMode]="'excelStyleFilter'" displayDensity="compact"
+        <igx-tree-grid [data]="data" height="450px" width="100%" [moving]="true" [allowFiltering]="true" [filterMode]="'excelStyleFilter'"
             summaryCalculationMode="rootLevelOnly" primaryKey="ID" foreignKey="ParentID" columnSelection="single" [allowAdvancedFiltering]="true"
             (keydown)="gridKeydown($event)" (activeNodeChange)="onActiveNodeChange($event)">
             <igx-paginator></igx-paginator>
diff --git a/src/app/tree-grid/tgrid-keyboard-guide/tgrid-keyboardnav-guide.component.scss b/src/app/tree-grid/tgrid-keyboard-guide/tgrid-keyboardnav-guide.component.scss
index 1d0ef598e0..d15b413092 100644
--- a/src/app/tree-grid/tgrid-keyboard-guide/tgrid-keyboardnav-guide.component.scss
+++ b/src/app/tree-grid/tgrid-keyboard-guide/tgrid-keyboardnav-guide.component.scss
@@ -15,6 +15,7 @@ $custom-checkbox-theme: checkbox-theme(
     display: flex;
 
     .grid_wrapper {
+        --ig-size: var(--ig-size-small);
         padding-left: 15px;
         padding-top: 15px;
         width: 75%;
diff --git a/src/app/tree-grid/tree-grid-add-row-sample/tree-grid-add-row-sample.component.html b/src/app/tree-grid/tree-grid-add-row-sample/tree-grid-add-row-sample.component.html
index 1efbc5c38a..599c5c684f 100644
--- a/src/app/tree-grid/tree-grid-add-row-sample/tree-grid-add-row-sample.component.html
+++ b/src/app/tree-grid/tree-grid-add-row-sample/tree-grid-add-row-sample.component.html
@@ -1,6 +1,6 @@
 <div class="grid__wrapper">
     <igx-tree-grid [igxPreventDocumentScroll]="true" #treeGrid [data]="data" primaryKey="ID" foreignKey="ParentID"
-        [autoGenerate]="false" displayDensity="comfortable" width="100%" height="500px"
+        [autoGenerate]="false" width="100%" height="500px"
         [allowFiltering]="true" [rowEditable]="true">
         <igx-column [field]="'Name'" dataType="string"></igx-column>
         <igx-column [field]="'Title'" dataType="string"></igx-column>
diff --git a/src/app/tree-grid/tree-grid-collapsible-groups/tree-grid-collapsible-column-groups.component.html b/src/app/tree-grid/tree-grid-collapsible-groups/tree-grid-collapsible-column-groups.component.html
index 10eba02c59..f49651d9c6 100644
--- a/src/app/tree-grid/tree-grid-collapsible-groups/tree-grid-collapsible-column-groups.component.html
+++ b/src/app/tree-grid/tree-grid-collapsible-groups/tree-grid-collapsible-column-groups.component.html
@@ -1,8 +1,7 @@
 <div class="wrapper theme">
     <div class="sample-content">
         <div class="sample-column">
-            <igx-tree-grid [igxPreventDocumentScroll]="true"  #treeGrid [data]="data" [moving]="true" primaryKey="ID" foreignKey="ParentID" [rowSelection]="selectionMode" height="550px"
-            displayDensity="compact">
+            <igx-tree-grid [igxPreventDocumentScroll]="true"  #treeGrid [data]="data" [moving]="true" primaryKey="ID" foreignKey="ParentID" [rowSelection]="selectionMode" height="550px">
                 <igx-column-group [pinned]="false" header="General Information" [collapsible]="true" [expanded]="false">
                     <ng-template igxCollapsibleIndicator let-column="column">
                         <igx-icon [attr.draggable]="false" #target="tooltipTarget" [igxTooltipTarget]="tooltipRef" [showDelay]="0" [hideDelay]="0">{{column.expanded ? 'expand_more' : 'chevron_right'}} </igx-icon>
diff --git a/src/app/tree-grid/tree-grid-collapsible-groups/tree-grid-collapsible-column-groups.component.scss b/src/app/tree-grid/tree-grid-collapsible-groups/tree-grid-collapsible-column-groups.component.scss
index e69de29bb2..d56f8843d3 100644
--- a/src/app/tree-grid/tree-grid-collapsible-groups/tree-grid-collapsible-column-groups.component.scss
+++ b/src/app/tree-grid/tree-grid-collapsible-groups/tree-grid-collapsible-column-groups.component.scss
@@ -0,0 +1,3 @@
+igx-tree-grid {
+    --ig-size: var(--ig-size-small);
+}
diff --git a/src/app/tree-grid/tree-grid-displaydensity-sample/tree-grid-displaydensity-sample.component.html b/src/app/tree-grid/tree-grid-displaydensity-sample/tree-grid-displaydensity-sample.component.html
index 5a1439e28c..23b4ee26da 100644
--- a/src/app/tree-grid/tree-grid-displaydensity-sample/tree-grid-displaydensity-sample.component.html
+++ b/src/app/tree-grid/tree-grid-displaydensity-sample/tree-grid-displaydensity-sample.component.html
@@ -1,7 +1,7 @@
 <div class="density-chooser">
-    <igx-buttongroup [values]="displayDensities" (selected)="selectDensity($event)"></igx-buttongroup>
+    <igx-buttongroup [values]="sizes" (selected)="selectSize($event)"></igx-buttongroup>
 </div>
-<igx-tree-grid [igxPreventDocumentScroll]="true"  #treeGrid [data]="data" primaryKey="ID" foreignKey="ParentID" [displayDensity]="density" width="100%"
+<igx-tree-grid [igxPreventDocumentScroll]="true"  #treeGrid [data]="data" primaryKey="ID" foreignKey="ParentID" width="100%"
     height="550px" [allowFiltering]="true">
     <igx-column field="Name" dataType="string" [sortable]="true" [hasSummary]="true" width="200px"></igx-column>
     <igx-column-group [pinned]="false" header="General Information">
diff --git a/src/app/tree-grid/tree-grid-displaydensity-sample/tree-grid-displaydensity-sample.component.ts b/src/app/tree-grid/tree-grid-displaydensity-sample/tree-grid-displaydensity-sample.component.ts
index fd10afb060..b04069539b 100644
--- a/src/app/tree-grid/tree-grid-displaydensity-sample/tree-grid-displaydensity-sample.component.ts
+++ b/src/app/tree-grid/tree-grid-displaydensity-sample/tree-grid-displaydensity-sample.component.ts
@@ -1,12 +1,10 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, HostBinding, OnInit, ViewChild } from '@angular/core';
 import {
-    DisplayDensity,
     IgxButtonGroupComponent, IgxNumberSummaryOperand, IgxSummaryOperand, IgxSummaryResult, IgxTreeGridComponent
 } from 'igniteui-angular';
 import { generateEmployeeDetailedFlatData } from '../data/employees-flat-detailed';
 
 class CustomNumberSummary {
-
     public operate(data?: any[]): IgxSummaryResult[] {
         const result = new IgxSummaryOperand().operate(data);
         result.push({
@@ -29,39 +27,42 @@ class CustomNumberSummary {
     templateUrl: './tree-grid-displaydensity-sample.component.html'
 })
 export class TreeGridDisplaydensitySampleComponent implements OnInit {
-
     @ViewChild('treeGrid', { read: IgxTreeGridComponent, static: true })
     public treeGrid: IgxTreeGridComponent;
     @ViewChild(IgxButtonGroupComponent, { static: true }) public buttonGroup: IgxButtonGroupComponent;
     public data;
-    public density: DisplayDensity = 'compact';
-    public displayDensities;
+    public size = 'small';
+    public sizes;
     public numberSummaries = CustomNumberSummary;
 
     public ngOnInit() {
         this.data = generateEmployeeDetailedFlatData();
-        this.displayDensities = [
+        this.sizes = [
             {
-                label: 'compact',
-                selected: this.density === 'compact',
+                label: 'small',
+                selected: this.size === 'small',
                 togglable: true
             },
             {
-                label: 'cosy',
-                selected: this.density === 'cosy',
+                label: 'medium',
+                selected: this.size === 'medium',
                 togglable: true
             },
             {
-                label: 'comfortable',
-                selected: this.density === 'comfortable',
+                label: 'large',
+                selected: this.size === 'large',
                 togglable: true
             }
         ];
     }
 
-    public selectDensity(event) {
-        this.density = this.displayDensities[event.index].label;
-        this.treeGrid.displayDensity = this.displayDensities[event.index].label;
+    @HostBinding('style.--ig-size')
+    protected get sizeStyle() {
+        return `var(--ig-size-${this.size})`;
+    }
+
+    public selectSize(event) {
+        this.size = this.sizes[event.index].label;
         this.treeGrid.reflow();
     }
 }
diff --git a/src/app/tree-grid/tree-grid-editing-sample/tree-grid-editing-sample.component.html b/src/app/tree-grid/tree-grid-editing-sample/tree-grid-editing-sample.component.html
index 6eed154f60..4e6647ef84 100644
--- a/src/app/tree-grid/tree-grid-editing-sample/tree-grid-editing-sample.component.html
+++ b/src/app/tree-grid/tree-grid-editing-sample/tree-grid-editing-sample.component.html
@@ -3,7 +3,7 @@
         <igx-icon>person_add</igx-icon>
         <span>Add Root Employee</span>
     </button>
-    <igx-tree-grid [igxPreventDocumentScroll]="true"  #treeGrid [data]="data" primaryKey="ID" foreignKey="ParentID" [autoGenerate]="false" displayDensity="comfortable"
+    <igx-tree-grid [igxPreventDocumentScroll]="true"  #treeGrid [data]="data" primaryKey="ID" foreignKey="ParentID" [autoGenerate]="false"
         width="100%" height="800px" [allowFiltering]="true">
         <igx-paginator [perPage]="10"></igx-paginator>
         <igx-column [field]="'Name'" dataType="string" [editable]="true" [hasSummary]="true"></igx-column>
diff --git a/src/app/tree-grid/tree-grid-excel-style-filtering-sample-1/tree-grid-excel-style-filtering-sample-1.component.html b/src/app/tree-grid/tree-grid-excel-style-filtering-sample-1/tree-grid-excel-style-filtering-sample-1.component.html
index 9ec1806447..59ac361e15 100644
--- a/src/app/tree-grid/tree-grid-excel-style-filtering-sample-1/tree-grid-excel-style-filtering-sample-1.component.html
+++ b/src/app/tree-grid/tree-grid-excel-style-filtering-sample-1/tree-grid-excel-style-filtering-sample-1.component.html
@@ -1,8 +1,8 @@
 <div class="grid__wrapper">
     <div class="density-chooser">
-        <igx-buttongroup [values]="displayDensities" (selected)="selectDensity($event)"></igx-buttongroup>
+        <igx-buttongroup [values]="sizes" (selected)="selectSize($event)"></igx-buttongroup>
     </div>
-    <igx-tree-grid [igxPreventDocumentScroll]="true" [moving]="true"  #treegrid1 [data]="data" [displayDensity]="density" [autoGenerate]="false" height="850px" width="100%" [allowFiltering]="true"
+    <igx-tree-grid [igxPreventDocumentScroll]="true" [moving]="true"  #treegrid1 [data]="data" [autoGenerate]="false" height="850px" width="100%" [allowFiltering]="true"
         primaryKey="ID" foreignKey="ParentID" filterMode="excelStyleFilter" [filterStrategy]="filterStrategy">
         <igx-grid-toolbar>
             <igx-grid-toolbar-actions>
diff --git a/src/app/tree-grid/tree-grid-excel-style-filtering-sample-1/tree-grid-excel-style-filtering-sample-1.component.ts b/src/app/tree-grid/tree-grid-excel-style-filtering-sample-1/tree-grid-excel-style-filtering-sample-1.component.ts
index 97e3a123d2..c67aeae24b 100644
--- a/src/app/tree-grid/tree-grid-excel-style-filtering-sample-1/tree-grid-excel-style-filtering-sample-1.component.ts
+++ b/src/app/tree-grid/tree-grid-excel-style-filtering-sample-1/tree-grid-excel-style-filtering-sample-1.component.ts
@@ -1,5 +1,5 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
-import { DisplayDensity, IgxTreeGridComponent, TreeGridFilteringStrategy } from 'igniteui-angular';
+import { Component, HostBinding, OnInit, ViewChild } from '@angular/core';
+import { IgxTreeGridComponent, TreeGridFilteringStrategy } from 'igniteui-angular';
 import { ORDERS_DATA } from '../data/orders';
 
 @Component({
@@ -22,35 +22,39 @@ export class TreeGridExcelStyleFilteringSample1Component implements OnInit {
 
     public filterStrategy = new TreeGridFilteringStrategy(['ID', 'Name']);
 
-    public density: DisplayDensity = 'comfortable';
-    public displayDensities;
+    public size = 'large';
+    public sizes: any[];
 
     constructor() {
     }
     public ngOnInit(): void {
         this.data = ORDERS_DATA;
-        this.displayDensities = [
+        this.sizes = [
             {
-                label: 'compact',
-                selected: this.density === 'compact',
+                label: 'small',
+                selected: this.size === 'small',
                 togglable: true
             },
             {
-                label: 'cosy',
-                selected: this.density === 'cosy',
+                label: 'medium',
+                selected: this.size === 'medium',
                 togglable: true
             },
             {
-                label: 'comfortable',
-                selected: this.density === 'comfortable',
+                label: 'large',
+                selected: this.size === 'large',
                 togglable: true
             }
         ];
     }
 
-    public selectDensity(event) {
-        this.density = this.displayDensities[event.index].label;
-        this.treegrid1.displayDensity = this.displayDensities[event.index].label;
+    @HostBinding('style.--ig-size')
+    protected get sizeStyle() {
+        return `var(--ig-size-${this.size})`;
+    }
+
+    public selectSize(event: any) {
+        this.size = this.sizes[event.index].label;
         this.treegrid1.reflow();
     }
 
diff --git a/src/app/tree-grid/tree-grid-group-by-load-on-demand-sample/tree-grid-group-by-load-on-demand-sample.component.scss b/src/app/tree-grid/tree-grid-group-by-load-on-demand-sample/tree-grid-group-by-load-on-demand-sample.component.scss
index 41c8160c66..626380ebc6 100644
--- a/src/app/tree-grid/tree-grid-group-by-load-on-demand-sample/tree-grid-group-by-load-on-demand-sample.component.scss
+++ b/src/app/tree-grid/tree-grid-group-by-load-on-demand-sample/tree-grid-group-by-load-on-demand-sample.component.scss
@@ -6,6 +6,8 @@
 }
 
 .grid__wrapper {
+    --ig-size: var(--ig-size-small);
+
     position: relative;
     width: 100%;
     height: 100%;
diff --git a/src/app/tree-grid/tree-grid-keyboard-navigation/tree-grid-keyboard-navigation-sample.component.html b/src/app/tree-grid/tree-grid-keyboard-navigation/tree-grid-keyboard-navigation-sample.component.html
index 222ee869df..28ffe34246 100644
--- a/src/app/tree-grid/tree-grid-keyboard-navigation/tree-grid-keyboard-navigation-sample.component.html
+++ b/src/app/tree-grid/tree-grid-keyboard-navigation/tree-grid-keyboard-navigation-sample.component.html
@@ -1,6 +1,6 @@
 <div class="grid__wrapper">
     <igx-tree-grid [igxPreventDocumentScroll]="true"  #grid1 [data]="localData" childDataKey="Employees" width="100%" height="500px"
-        displayDensity="compact" (gridKeydown)="customKeydown($event)" [moving]="true" [autoGenerate]="false" [rowSelection]="selectionMode" [allowFiltering]="true">
+        (gridKeydown)="customKeydown($event)" [moving]="true" [autoGenerate]="false" [rowSelection]="selectionMode" [allowFiltering]="true">
         <igx-paginator></igx-paginator>
         <igx-column field="HireDate" dataType="date" [sortable]="true" [editable]="true"
             [resizable]="true"></igx-column>
diff --git a/src/app/tree-grid/tree-grid-keyboard-navigation/tree-grid-keyboard-navigation-sample.component.scss b/src/app/tree-grid/tree-grid-keyboard-navigation/tree-grid-keyboard-navigation-sample.component.scss
index 2649777ff2..40f8f54c54 100644
--- a/src/app/tree-grid/tree-grid-keyboard-navigation/tree-grid-keyboard-navigation-sample.component.scss
+++ b/src/app/tree-grid/tree-grid-keyboard-navigation/tree-grid-keyboard-navigation-sample.component.scss
@@ -1,3 +1,4 @@
 .grid__wrapper {
+    --ig-size: var(--ig-size-small);
     margin: 15px;
 }
diff --git a/src/app/tree-grid/tree-grid-multi-column-header-template-sample/tree-grid-multi-column-header-template-sample.component.html b/src/app/tree-grid/tree-grid-multi-column-header-template-sample/tree-grid-multi-column-header-template-sample.component.html
index 35aed46d4f..5c25af5bca 100644
--- a/src/app/tree-grid/tree-grid-multi-column-header-template-sample/tree-grid-multi-column-header-template-sample.component.html
+++ b/src/app/tree-grid/tree-grid-multi-column-header-template-sample/tree-grid-multi-column-header-template-sample.component.html
@@ -10,7 +10,7 @@
     </ng-template>
 
     <igx-tree-grid [igxPreventDocumentScroll]="true"  #treeGrid [data]="data" primaryKey="ID" [moving]="true" foreignKey="ParentID" [rowSelection]="selectionMode" height="520px"
-        displayDensity="compact" [allowFiltering]="true" width="100%">
+        [allowFiltering]="true" width="100%">
         <igx-column field="Name" dataType="string" [sortable]="true" [resizable]="true" width="200px"></igx-column>
         <igx-column-group [pinned]="false" header="General Information" [headerTemplate]="columnGroupTemplate">
             <igx-column field="HireDate" dataType="date" [sortable]="true" [resizable]="true"></igx-column>
diff --git a/src/app/tree-grid/tree-grid-multi-column-header-template-sample/tree-grid-multi-column-header-template-sample.component.scss b/src/app/tree-grid/tree-grid-multi-column-header-template-sample/tree-grid-multi-column-header-template-sample.component.scss
index 386cbb8c38..715340ac15 100644
--- a/src/app/tree-grid/tree-grid-multi-column-header-template-sample/tree-grid-multi-column-header-template-sample.component.scss
+++ b/src/app/tree-grid/tree-grid-multi-column-header-template-sample/tree-grid-multi-column-header-template-sample.component.scss
@@ -1,9 +1,10 @@
 .grid__wrapper {
+    --ig-size: var(--ig-size-small);
     margin: 10px;
 }
 
 .column-group-template__container {
-    display: flex; 
+    display: flex;
     align-items: center;
 }
 
diff --git a/src/app/tree-grid/tree-grid-multi-column-headers-export/tree-grid-multi-column-headers-export.component.html b/src/app/tree-grid/tree-grid-multi-column-headers-export/tree-grid-multi-column-headers-export.component.html
index b39644009e..8bd4024c4d 100644
--- a/src/app/tree-grid/tree-grid-multi-column-headers-export/tree-grid-multi-column-headers-export.component.html
+++ b/src/app/tree-grid/tree-grid-multi-column-headers-export/tree-grid-multi-column-headers-export.component.html
@@ -1,6 +1,6 @@
 <div class="grid__wrapper">
     <igx-tree-grid [igxPreventDocumentScroll]="true"  #treeGrid [data]="data" primaryKey="ID" [moving]="true" foreignKey="ParentID" [rowSelection]="selectionMode" height="740px"
-        displayDensity="compact" [allowFiltering]="true" width="100%">
+        [allowFiltering]="true" width="100%">
         <igx-grid-toolbar>
             <igx-grid-toolbar-actions>
                 <igx-switch [(ngModel)]="exportHeaders">Export multi-column headers</igx-switch>
diff --git a/src/app/tree-grid/tree-grid-multi-column-headers-export/tree-grid-multi-column-headers-export.component.scss b/src/app/tree-grid/tree-grid-multi-column-headers-export/tree-grid-multi-column-headers-export.component.scss
index 2649777ff2..40f8f54c54 100644
--- a/src/app/tree-grid/tree-grid-multi-column-headers-export/tree-grid-multi-column-headers-export.component.scss
+++ b/src/app/tree-grid/tree-grid-multi-column-headers-export/tree-grid-multi-column-headers-export.component.scss
@@ -1,3 +1,4 @@
 .grid__wrapper {
+    --ig-size: var(--ig-size-small);
     margin: 15px;
 }
diff --git a/src/app/tree-grid/tree-grid-multi-column-headers-sample/tree-grid-multi-column-headers-sample.component.html b/src/app/tree-grid/tree-grid-multi-column-headers-sample/tree-grid-multi-column-headers-sample.component.html
index 31876621de..d021657255 100644
--- a/src/app/tree-grid/tree-grid-multi-column-headers-sample/tree-grid-multi-column-headers-sample.component.html
+++ b/src/app/tree-grid/tree-grid-multi-column-headers-sample/tree-grid-multi-column-headers-sample.component.html
@@ -1,6 +1,6 @@
 <div class="grid__wrapper">
     <igx-tree-grid [igxPreventDocumentScroll]="true"  #treeGrid [data]="data" primaryKey="ID" [moving]="true" foreignKey="ParentID" [rowSelection]="selectionMode" height="480px"
-        displayDensity="compact" [allowFiltering]="true" width="100%">
+        [allowFiltering]="true" width="100%">
         <igx-column field="Name" dataType="string" [sortable]="true" [resizable]="true" width="200px"></igx-column>
         <igx-column-group [pinned]="false" header="General Information">
             <igx-column field="HireDate" dataType="date" [sortable]="true" [resizable]="true"></igx-column>
diff --git a/src/app/tree-grid/tree-grid-multi-column-headers-sample/tree-grid-multi-column-headers-sample.component.scss b/src/app/tree-grid/tree-grid-multi-column-headers-sample/tree-grid-multi-column-headers-sample.component.scss
index 7324c76832..a2d3285174 100644
--- a/src/app/tree-grid/tree-grid-multi-column-headers-sample/tree-grid-multi-column-headers-sample.component.scss
+++ b/src/app/tree-grid/tree-grid-multi-column-headers-sample/tree-grid-multi-column-headers-sample.component.scss
@@ -1,4 +1,5 @@
 .grid__wrapper {
+    --ig-size: var(--ig-size-small);
     margin: 10px;
 }
 
diff --git a/src/app/tree-grid/tree-grid-multi-column-headers-styling/tree-grid-multi-column-headers-styling.component.html b/src/app/tree-grid/tree-grid-multi-column-headers-styling/tree-grid-multi-column-headers-styling.component.html
index c062f78422..8846034a5c 100644
--- a/src/app/tree-grid/tree-grid-multi-column-headers-styling/tree-grid-multi-column-headers-styling.component.html
+++ b/src/app/tree-grid/tree-grid-multi-column-headers-styling/tree-grid-multi-column-headers-styling.component.html
@@ -1,6 +1,5 @@
 <div class="grid__wrapper">
-    <igx-tree-grid [igxPreventDocumentScroll]="true"  #treeGrid [data]="data" primaryKey="ID" foreignKey="ParentID" height="480px"
-        displayDensity="compact" width="100%">
+    <igx-tree-grid [igxPreventDocumentScroll]="true"  #treeGrid [data]="data" primaryKey="ID" foreignKey="ParentID" height="480px" width="100%">
         <igx-column field="Name" dataType="string" width="200px"></igx-column>
         <igx-column-group header="General Information">
             <igx-column field="HireDate" dataType="date"></igx-column>
diff --git a/src/app/tree-grid/tree-grid-multi-column-headers-styling/tree-grid-multi-column-headers-styling.component.scss b/src/app/tree-grid/tree-grid-multi-column-headers-styling/tree-grid-multi-column-headers-styling.component.scss
index 7716dd5dbb..c04ddcf45c 100644
--- a/src/app/tree-grid/tree-grid-multi-column-headers-styling/tree-grid-multi-column-headers-styling.component.scss
+++ b/src/app/tree-grid/tree-grid-multi-column-headers-styling/tree-grid-multi-column-headers-styling.component.scss
@@ -13,5 +13,6 @@ $custom-theme: grid-theme(
 }
 
 .grid__wrapper {
+    --ig-size: var(--ig-size-small);
     margin: 10px;
 }
diff --git a/src/app/tree-grid/tree-grid-pager-sample/tree-grid-pager-sample.component.html b/src/app/tree-grid/tree-grid-pager-sample/tree-grid-pager-sample.component.html
index f7dd7ef097..fc63c11cad 100644
--- a/src/app/tree-grid/tree-grid-pager-sample/tree-grid-pager-sample.component.html
+++ b/src/app/tree-grid/tree-grid-pager-sample/tree-grid-pager-sample.component.html
@@ -1,6 +1,5 @@
 <div class="grid__wrapper">
-    <igx-tree-grid [igxPreventDocumentScroll]="true" #treegrid1 [data]="data" height="500px" width="100%"
-        displayDensity="cosy" primaryKey="ID" foreignKey="ParentID">
+    <igx-tree-grid [igxPreventDocumentScroll]="true" #treegrid1 [data]="data" height="500px" width="100%" primaryKey="ID" foreignKey="ParentID">
         <igx-paginator #paginator [(page)]="treegrid1.page" [totalRecords]="treegrid1.totalRecords"
             [perPage]="10" [selectOptions]="selectOptions" [displayDensity]="treegrid1.displayDensity">
             <igx-paginator-content>
diff --git a/src/app/tree-grid/tree-grid-pager-sample/tree-grid-pager-sample.component.scss b/src/app/tree-grid/tree-grid-pager-sample/tree-grid-pager-sample.component.scss
index 57ab3f06c5..3701f0f7bc 100644
--- a/src/app/tree-grid/tree-grid-pager-sample/tree-grid-pager-sample.component.scss
+++ b/src/app/tree-grid/tree-grid-pager-sample/tree-grid-pager-sample.component.scss
@@ -1,23 +1,24 @@
 .grid__wrapper {
+    --ig-size: var(--ig-size-medium);
     margin: 0 16px;
     padding-top: 10px;
 }
 
 igx-switch {
     margin: 24px;
-} 
+}
 
 .options-container {
-    display: flex; 
-    flex-direction: row; 
-    align-items: center; 
+    display: flex;
+    flex-direction: row;
+    align-items: center;
     padding: 0 1rem;
 }
 .options_container * { margin-right: 15px; }
 
 .select-input {
-    max-width: 150px; 
-    padding-top: 5px; 
+    max-width: 150px;
+    padding-top: 5px;
     padding-bottom: 5px;
     margin-left: 15px;
 }
diff --git a/src/app/tree-grid/tree-grid-paging-sample/tree-grid-paging-sample.component.html b/src/app/tree-grid/tree-grid-paging-sample/tree-grid-paging-sample.component.html
index 906a65bf93..2885944f07 100644
--- a/src/app/tree-grid/tree-grid-paging-sample/tree-grid-paging-sample.component.html
+++ b/src/app/tree-grid/tree-grid-paging-sample/tree-grid-paging-sample.component.html
@@ -1,7 +1,6 @@
 <div class="grid__wrapper">
-
     <igx-tree-grid [igxPreventDocumentScroll]="true"  #treegrid1 [data]="data" height="500px" width="100%"
-        displayDensity="cosy" primaryKey="ID" foreignKey="ParentID">
+        primaryKey="ID" foreignKey="ParentID">
         <igx-paginator [perPage]="10"></igx-paginator>
         <igx-column field="ID" header="Order ID">
         </igx-column>
diff --git a/src/app/tree-grid/tree-grid-paging-sample/tree-grid-paging-sample.component.scss b/src/app/tree-grid/tree-grid-paging-sample/tree-grid-paging-sample.component.scss
index 4bc3ebc99c..c36c25d405 100644
--- a/src/app/tree-grid/tree-grid-paging-sample/tree-grid-paging-sample.component.scss
+++ b/src/app/tree-grid/tree-grid-paging-sample/tree-grid-paging-sample.component.scss
@@ -7,6 +7,8 @@ $progressBar-sample-theme: progress-linear-theme(
 
 .grid__wrapper {
     @include progress-linear($progressBar-sample-theme);
+
+    --ig-size: var(--ig-size-medium);
     margin: 0 16px;
     padding-top: 10px;
 }
diff --git a/src/app/tree-grid/tree-grid-paging-style/tree-grid-paging-style-sample.component.html b/src/app/tree-grid/tree-grid-paging-style/tree-grid-paging-style-sample.component.html
index a85290deae..21742db1c0 100644
--- a/src/app/tree-grid/tree-grid-paging-style/tree-grid-paging-style-sample.component.html
+++ b/src/app/tree-grid/tree-grid-paging-style/tree-grid-paging-style-sample.component.html
@@ -1,6 +1,6 @@
 <div class="grid__wrapper">
     <igx-tree-grid [igxPreventDocumentScroll]="true"  #treegrid1 [data]="data" height="520px" width="100%"
-        displayDensity="cosy" primaryKey="ID" foreignKey="ParentID">
+        primaryKey="ID" foreignKey="ParentID">
         <igx-paginator [perPage]="10"></igx-paginator>
         <igx-column field="ID" header="Order ID">
         </igx-column>
diff --git a/src/app/tree-grid/tree-grid-paging-style/tree-grid-paging-style-sample.component.scss b/src/app/tree-grid/tree-grid-paging-style/tree-grid-paging-style-sample.component.scss
index 4d5af1e574..ba503c0f50 100644
--- a/src/app/tree-grid/tree-grid-paging-style/tree-grid-paging-style-sample.component.scss
+++ b/src/app/tree-grid/tree-grid-paging-style/tree-grid-paging-style-sample.component.scss
@@ -1,6 +1,7 @@
 @use '../../../variables' as *;
 
 .grid__wrapper {
+    --ig-size: var(--ig-size-medium);
     margin: 0 16px;
     padding-top: 10px;
 }
diff --git a/src/app/tree-grid/tree-grid-save-state/tGrid-state.component.html b/src/app/tree-grid/tree-grid-save-state/tGrid-state.component.html
index 0d96dc123b..3037948fc6 100644
--- a/src/app/tree-grid/tree-grid-save-state/tGrid-state.component.html
+++ b/src/app/tree-grid/tree-grid-save-state/tGrid-state.component.html
@@ -51,7 +51,6 @@
         primaryKey="Name"
         [data]="localData"
         childDataKey="Employees"
-        displayDensity="cosy"
         [moving]="true"
         width="98%" height="800px"
         [autoGenerate]="false"
diff --git a/src/app/tree-grid/tree-grid-save-state/tGrid-state.component.scss b/src/app/tree-grid/tree-grid-save-state/tGrid-state.component.scss
index c13e245dd4..21b6a74925 100644
--- a/src/app/tree-grid/tree-grid-save-state/tGrid-state.component.scss
+++ b/src/app/tree-grid/tree-grid-save-state/tGrid-state.component.scss
@@ -31,6 +31,7 @@
 }
 
 .grid__wrapper {
+    --ig-size: var(--ig-size-medium);
     margin: 0 16px;
     padding-top: 16px;
     width: 100%;
diff --git a/src/app/tree-grid/tree-grid-search-sample/tree-grid-search-sample.component.html b/src/app/tree-grid/tree-grid-search-sample/tree-grid-search-sample.component.html
index abe4f59b6b..c35577a8c6 100644
--- a/src/app/tree-grid/tree-grid-search-sample/tree-grid-search-sample.component.html
+++ b/src/app/tree-grid/tree-grid-search-sample/tree-grid-search-sample.component.html
@@ -10,13 +10,13 @@
 
         <igx-suffix *ngIf="searchText.length > 0">
             <div class="resultsText" *ngIf="treeGrid.lastSearchInfo">
-                <span *ngIf="treeGrid.lastSearchInfo.matchInfoCache.length > 0">
-                    {{ treeGrid.lastSearchInfo.activeMatchIndex + 1 }} of {{ treeGrid.lastSearchInfo.matchInfoCache.length }}
-                    results
-                </span>
-                <span *ngIf="treeGrid.lastSearchInfo.matchInfoCache.length === 0">
-                    No results
-                </span>
+                <!-- <span *ngIf="treeGrid.lastSearchInfo.matchInfoCache.length > 0"> -->
+                <!--     {{ treeGrid.lastSearchInfo.activeMatchIndex + 1 }} of {{ treeGrid.lastSearchInfo.matchInfoCache.length }} -->
+                <!--     results -->
+                <!-- </span> -->
+                <!-- <span *ngIf="treeGrid.lastSearchInfo.matchInfoCache.length === 0"> -->
+                <!--     No results -->
+                <!-- </span> -->
             </div>
             <div class="chips">
                 <igx-chips-area>

From 852903d2aaaad2786f568c21fbc3e8e399ae8b11 Mon Sep 17 00:00:00 2001
From: Simeon Simeonoff <sim.simeonoff@gmail.com>
Date: Tue, 12 Sep 2023 12:13:05 +0300
Subject: [PATCH 2/9] refactor(*): update display density in samples

---
 .../grid-finjs-dock-manager.component.html    | 12 ++++-----
 .../grid-finjs-dock-manager.component.scss    |  7 ++++++
 .../grid-finjs-dock-manager.component.ts      |  1 -
 .../column-selection-sample.component.html    |  2 +-
 .../column-selection-sample.component.scss    |  6 ++++-
 ...batch-editing-remote-paging.component.html |  2 +-
 .../grid-cascading-combos.component.html      |  7 +++---
 .../grid-cascading-combos.component.scss      |  4 +++
 ...d-collapsible-column-groups.component.html |  2 +-
 ...d-collapsible-column-groups.component.scss |  3 +++
 ...id-column-data-types-sample.component.html | 15 ++++++-----
 ...id-column-data-types-sample.component.scss |  5 ++++
 .../crud-sample.component.html                |  1 -
 ...custom-kb-navigation-sample.component.html |  2 +-
 ...custom-kb-navigation-sample.component.scss |  1 +
 ...le-filtering-load-on-demand.component.html |  2 +-
 ...le-filtering-load-on-demand.component.scss |  2 ++
 ...d-filtering-template-sample.component.html |  4 +--
 ...d-filtering-template-sample.component.scss |  5 ++++
 .../grid-mrl-custom-navigation.component.html |  2 +-
 .../grid-mrl-custom-navigation.component.scss |  3 ++-
 ...id-multi-row-layout-styling.component.html |  3 +--
 ...id-multi-row-layout-styling.component.scss |  1 +
 .../grid-multi-row-layout.component.html      |  3 +--
 .../grid-multi-row-layout.component.scss      |  3 ++-
 .../grid-pager-sample.component.html          | 10 +-------
 .../grid-pager-sample.component.ts            |  2 --
 .../remote-paging-sample.component.html       |  1 -
 .../grid-save-state/grid-state.component.html |  4 +--
 .../grid-save-state/grid-state.component.scss |  4 +++
 .../grid-sorting-sample.component.html        |  1 -
 .../grid-sorting-sample.component.scss        |  4 +++
 .../grid-sorting-styling.component.html       |  2 +-
 .../grid-sorting-styling.component.scss       |  4 +++
 .../grid-summary-template.component.html      |  4 +--
 .../grid-summary-template.component.ts        | 25 +++++++++++--------
 ...hical-grid-column-selection.component.html |  2 +-
 ...hical-grid-column-selection.component.scss |  6 ++++-
 .../hgrid-summary-template.component.html     |  4 +--
 .../hgrid-summary-template.component.ts       | 24 ++++++++++--------
 ...le-filtering-load-on-demand.component.html |  2 +-
 ...le-filtering-load-on-demand.component.scss |  1 +
 ...cal-grid-filtering-template.component.html |  4 +--
 ...cal-grid-filtering-template.component.scss |  7 +++++-
 ...rarchical-grid-pager-sample.component.html | 10 +-------
 ...action-strip-paragraph-menu.component.html |  2 +-
 .../action-strip-paragraph-menu.component.ts  |  3 +--
 .../action-strip-paragraph.component.html     |  2 +-
 .../action-strip-paragraph.component.ts       |  2 --
 .../localization-all-resources.component.html |  2 +-
 .../localization-all-resources.component.scss |  1 +
 .../tree-grid-column-selection.component.html |  2 +-
 .../tree-grid-column-selection.component.scss |  6 ++++-
 ...le-filtering-load-on-demand.component.html |  2 +-
 ...le-filtering-load-on-demand.component.scss |  1 +
 ...d-filtering-template-sample.component.html |  4 +--
 ...d-filtering-template-sample.component.scss |  5 ++++
 ...up-by-load-on-demand-sample.component.html |  3 +--
 .../tree-grid-pager-sample.component.html     | 10 +-------
 ...e-grid-remote-paging-sample.component.html |  1 -
 .../tree-grid-sorting-sample.component.html   |  1 -
 .../tree-grid-sorting-sample.component.scss   |  1 +
 ...lidator-service-cross-field.component.scss |  2 +-
 .../treegrid-allData-summary.component.html   |  2 +-
 .../treegrid-allData-summary.component.scss   |  3 ++-
 .../treegrid-summary-template.component.html  |  6 ++---
 .../treegrid-summary-template.component.ts    | 25 +++++++++++--------
 67 files changed, 173 insertions(+), 132 deletions(-)

diff --git a/projects/app-lob/src/app/grid-finjs-dock-manager/grid-finjs-dock-manager.component.html b/projects/app-lob/src/app/grid-finjs-dock-manager/grid-finjs-dock-manager.component.html
index 6a099873fd..f1c3b27b0d 100644
--- a/projects/app-lob/src/app/grid-finjs-dock-manager/grid-finjs-dock-manager.component.html
+++ b/projects/app-lob/src/app/grid-finjs-dock-manager/grid-finjs-dock-manager.component.html
@@ -9,7 +9,7 @@
         </div>
         <div class="actionItem">
             <!-- Change volume -->
-            <igx-select [(ngModel)]="dataVolume" (ngModelChange)="paramsChanged()" [overlaySettings]="customOverlaySettings" [displayDensity]="'compact'">
+            <igx-select [(ngModel)]="dataVolume" (ngModelChange)="paramsChanged()" [overlaySettings]="customOverlaySettings">
                 <label igxLabel>Change data volume</label>
                 <igx-prefix>
                     <igx-icon>view_list</igx-icon>
@@ -21,7 +21,7 @@
         </div>
         <div class="actionItem">
             <!-- Change frequency -->
-            <igx-select [(ngModel)]="frequency" (ngModelChange)="paramsChanged()" [overlaySettings]="freqOverlaySettings" [displayDensity]="'compact'" #freq>
+            <igx-select [(ngModel)]="frequency" (ngModelChange)="paramsChanged()" [overlaySettings]="freqOverlaySettings" #freq>
                 <label igxLabel>Change update frequency</label>
                 <igx-prefix>
                     <igx-icon>cell_wifi</igx-icon>
@@ -35,7 +35,7 @@
         <div igxOverlayOutlet #outlet></div>
     </div>
     <div slot="gridStockPrices" style="height: 100%;">
-        <igx-grid #grid1 [data]="data | async" [displayDensity]="'compact'" [isLoading]="isLoading"
+        <igx-grid #grid1 [data]="data | async" [isLoading]="isLoading"
             [allowFiltering]="true" [filterMode]="'excelStyleFilter'" [primaryKey]="'id'"
             [columnSelection]="'multiple'" [cellSelection]="'none'" [outlet]="filteringOverlayOutlet">
             <igx-column [field]="'id'" [width]="'70px'" [hidden]="true" [sortable]="true"></igx-column>
@@ -67,7 +67,7 @@
         </igx-grid>
     </div>
     <div slot="forexMarket" style="height: 100%;">
-        <igx-grid #grid2 [data]="data | async" [displayDensity]="'compact'" [isLoading]="isLoading"
+        <igx-grid #grid2 [data]="data | async" [isLoading]="isLoading"
             [allowFiltering]="true" [filterMode]="'excelStyleFilter'" [primaryKey]="'id'" [outlet]="filteringOverlayOutlet"
             [columnSelection]="'multiple'" [cellSelection]="'none'">
             <igx-column [field]="'id'" [width]="'70px'" [hidden]="true" [sortable]="true"></igx-column>
@@ -99,7 +99,7 @@
         </igx-grid>
     </div>
     <div slot="content4" style="height: 100%;">
-        <igx-grid #grid3 [data]="data | async" [displayDensity]="'compact'" [isLoading]="isLoading"
+        <igx-grid #grid3 [data]="data | async" [isLoading]="isLoading"
             [allowFiltering]="true" [filterMode]="'excelStyleFilter'" [primaryKey]="'id'" [outlet]="filteringOverlayOutlet"
             [columnSelection]="'multiple'" [cellSelection]="'none'">
             <igx-column [field]="'id'" [width]="'70px'" [hidden]="true" [sortable]="true"></igx-column>
@@ -131,7 +131,7 @@
         </igx-grid>
     </div>
     <div slot="etfStockPrices" style="height: 100%;">
-        <igx-grid #grid4 [data]="data | async" [displayDensity]="'compact'" [isLoading]="isLoading"
+        <igx-grid #grid4 [data]="data | async" [isLoading]="isLoading"
             [allowFiltering]="true" [filterMode]="'excelStyleFilter'" [primaryKey]="'id'" [outlet]="filteringOverlayOutlet"
             [columnSelection]="'multiple'" [cellSelection]="'none'">
             <igx-paginator></igx-paginator>
diff --git a/projects/app-lob/src/app/grid-finjs-dock-manager/grid-finjs-dock-manager.component.scss b/projects/app-lob/src/app/grid-finjs-dock-manager/grid-finjs-dock-manager.component.scss
index cb28f1a0a1..dd4842ab34 100644
--- a/projects/app-lob/src/app/grid-finjs-dock-manager/grid-finjs-dock-manager.component.scss
+++ b/projects/app-lob/src/app/grid-finjs-dock-manager/grid-finjs-dock-manager.component.scss
@@ -128,6 +128,8 @@
 }
 
 igx-grid {
+    --ig-size: var(--ig-size-small);
+
 	.grid-area {
 		margin-block-start: 1rem;
 		overflow-y: hidden;
@@ -181,3 +183,8 @@ igx-grid {
 		}
 	}
 }
+
+igx-select {
+    --ig-size: var(--ig-size-small);
+}
+
diff --git a/projects/app-lob/src/app/grid-finjs-dock-manager/grid-finjs-dock-manager.component.ts b/projects/app-lob/src/app/grid-finjs-dock-manager/grid-finjs-dock-manager.component.ts
index dab61bd11a..787e8420c7 100644
--- a/projects/app-lob/src/app/grid-finjs-dock-manager/grid-finjs-dock-manager.component.ts
+++ b/projects/app-lob/src/app/grid-finjs-dock-manager/grid-finjs-dock-manager.component.ts
@@ -300,7 +300,6 @@ export class GridFinJSDockManagerComponent implements OnInit, OnDestroy, AfterVi
         });
         grid.columnSelection = 'multiple';
         grid.cellSelection = 'none';
-        grid.displayDensity = 'compact';
 
         // Use detectChanges because of ExpressionChangedAfterItHasBeenChecked Error when creating a dynamic pane
         this.cdr.detectChanges();
diff --git a/src/app/grid/column-selection-sample/column-selection-sample.component.html b/src/app/grid/column-selection-sample/column-selection-sample.component.html
index e159a2e770..d6638b78eb 100644
--- a/src/app/grid/column-selection-sample/column-selection-sample.component.html
+++ b/src/app/grid/column-selection-sample/column-selection-sample.component.html
@@ -2,7 +2,7 @@
     <igx-grid #grid [columnSelection]="columnSelectionType" [data]="data" height="530px" width="100%">
         <igx-grid-toolbar>
 
-                <igx-select [(ngModel)]="columnSelectionType" [displayDensity]="'compact'">
+                <igx-select [(ngModel)]="columnSelectionType">
                     <label igxLabel>Column Selection</label>
                     <igx-select-item value="none">None</igx-select-item>
                     <igx-select-item value="single">Single</igx-select-item>
diff --git a/src/app/grid/column-selection-sample/column-selection-sample.component.scss b/src/app/grid/column-selection-sample/column-selection-sample.component.scss
index 98592bc91b..f5a78829cb 100644
--- a/src/app/grid/column-selection-sample/column-selection-sample.component.scss
+++ b/src/app/grid/column-selection-sample/column-selection-sample.component.scss
@@ -1,3 +1,7 @@
 .grid-wrapper {
     padding: 16px;
-}
\ No newline at end of file
+}
+
+igx-select {
+    --ig-size: var(--ig-size-small);
+}
diff --git a/src/app/grid/grid-batchEditing-remotePaging/batch-editing-remote-paging.component.html b/src/app/grid/grid-batchEditing-remotePaging/batch-editing-remote-paging.component.html
index f62620aff3..98487aca7e 100644
--- a/src/app/grid/grid-batchEditing-remotePaging/batch-editing-remote-paging.component.html
+++ b/src/app/grid/grid-batchEditing-remotePaging/batch-editing-remote-paging.component.html
@@ -4,7 +4,7 @@
         <igx-paginator [perPage]="perPage">
             <igx-paginator-content>
                 <igx-paginator #paginator [totalRecords]="totalCount" [page]="page" [(perPage)]="perPage"
-                    [selectOptions]="selectOptions" [displayDensity]="grid1.displayDensity"
+                    [selectOptions]="selectOptions"
                     (pageChange)="paginate($event)">
                 </igx-paginator>
             </igx-paginator-content>
diff --git a/src/app/grid/grid-cascading-combos/grid-cascading-combos.component.html b/src/app/grid/grid-cascading-combos/grid-cascading-combos.component.html
index 37d541746e..233090a061 100644
--- a/src/app/grid/grid-cascading-combos/grid-cascading-combos.component.html
+++ b/src/app/grid/grid-cascading-combos/grid-cascading-combos.component.html
@@ -8,7 +8,7 @@
                 <ng-template igxCell let-cell="cell">
                     <igx-simple-combo [id]="'country-' + cell.row.data.ID" [data]="countriesData"
                         (selectionChanging)="countryChanging($event, cell)" placeholder="Choose Country..."
-                        [displayKey]="'name'" [displayDensity]="'compact'" width="100%">
+                        [displayKey]="'name'" width="100%">
                     </igx-simple-combo>
                 </ng-template>
             </igx-column>
@@ -17,7 +17,7 @@
                     <div>
                         <igx-simple-combo [id]="'region-' + cell.row.data.ID"
                             (selectionChanging)="regionChanging($event, cell)" placeholder="Choose Region..."
-                            [displayKey]="'name'" [displayDensity]="'compact'" [(ngModel)]="cell.value"
+                            [displayKey]="'name'" [(ngModel)]="cell.value"
                             [disabled]="cell.row.cells[1].value === ''">
                         </igx-simple-combo>
                         <igx-linear-bar [id]="'region-progress-' + cell.row.data.ID" [style.visibility]="'hidden'"
@@ -30,8 +30,7 @@
                 <ng-template igxCell let-cell="cell">
                     <div>
                         <igx-simple-combo [id]="'city-' + cell.row.data.ID" placeholder="Choose City..."
-                            [(ngModel)]="cell.value" [displayKey]="'name'" [displayDensity]="'compact'"
-                            [disabled]="cell.row.cells[2].value === ''">
+                            [(ngModel)]="cell.value" [displayKey]="'name'" [disabled]="cell.row.cells[2].value === ''">
                         </igx-simple-combo>
                         <igx-linear-bar [id]="'city-progress-' + cell.row.data.ID" [style.visibility]="'hidden'"
                             type="info" [indeterminate]="true">
diff --git a/src/app/grid/grid-cascading-combos/grid-cascading-combos.component.scss b/src/app/grid/grid-cascading-combos/grid-cascading-combos.component.scss
index 4c53688301..b25245dba0 100644
--- a/src/app/grid/grid-cascading-combos/grid-cascading-combos.component.scss
+++ b/src/app/grid/grid-cascading-combos/grid-cascading-combos.component.scss
@@ -1,6 +1,10 @@
 .grid__wrapper {
     --ig-size: var(--ig-size-medium);
     padding: 16px;
+
+    igx-simple-combo {
+        --ig-size: var(--ig-size-small);
+    }
 }
 
 .dialogNewRecord {
diff --git a/src/app/grid/grid-collapsible-columnGroups/grid-collapsible-column-groups.component.html b/src/app/grid/grid-collapsible-columnGroups/grid-collapsible-column-groups.component.html
index 21b5b6015a..6288fc7ad8 100644
--- a/src/app/grid/grid-collapsible-columnGroups/grid-collapsible-column-groups.component.html
+++ b/src/app/grid/grid-collapsible-columnGroups/grid-collapsible-column-groups.component.html
@@ -1,7 +1,7 @@
 <div class="wrapper theme">
     <div class="sample-content">
         <div class="sample-column">
-            <igx-grid [igxPreventDocumentScroll]="true" #grid [data]="data" [displayDensity]="'cosy'" height="550px">
+            <igx-grid [igxPreventDocumentScroll]="true" #grid [data]="data" height="550px">
                 <igx-column-group header="Customer Information" [collapsible]="true">
                     <ng-template igxCollapsibleIndicator let-column="column">
                         <igx-icon [attr.draggable]="false" #target="tooltipTarget" [igxTooltipTarget]="tooltipRef"[showDelay]="0" [hideDelay]="0">{{column.expanded ? 'expand_more' : 'chevron_right'}} </igx-icon>
diff --git a/src/app/grid/grid-collapsible-columnGroups/grid-collapsible-column-groups.component.scss b/src/app/grid/grid-collapsible-columnGroups/grid-collapsible-column-groups.component.scss
index e69de29bb2..7a2f4eca34 100644
--- a/src/app/grid/grid-collapsible-columnGroups/grid-collapsible-column-groups.component.scss
+++ b/src/app/grid/grid-collapsible-columnGroups/grid-collapsible-column-groups.component.scss
@@ -0,0 +1,3 @@
+igx-grid {
+    --ig-size: var(--ig-size-medium);
+}
diff --git a/src/app/grid/grid-column-data-types-sample/grid-column-data-types-sample.component.html b/src/app/grid/grid-column-data-types-sample/grid-column-data-types-sample.component.html
index 60cb307f0b..7d53f6c9ed 100644
--- a/src/app/grid/grid-column-data-types-sample/grid-column-data-types-sample.component.html
+++ b/src/app/grid/grid-column-data-types-sample/grid-column-data-types-sample.component.html
@@ -1,6 +1,6 @@
 <div class="wrapper">
     <span class="location-wrapper">
-        <igx-select #select [(ngModel)]="locale" [displayDensity]="'compact'">
+        <igx-select #select [(ngModel)]="locale">
             <igx-prefix class="ellipsis">Locale: </igx-prefix>
             <igx-select-item *ngFor="let locale of locales" [value]="locale">
                 {{ locale }}
@@ -8,7 +8,7 @@
             <igx-hint>Applicable to date, number, currency and percent type columns</igx-hint>
         </igx-select>
 
-        <igx-select #select [(ngModel)]="dateTimeOptions.format" [displayDensity]="'compact'" (selectionChanging)="selectionChanging($event)">
+        <igx-select #select [(ngModel)]="dateTimeOptions.format" (selectionChanging)="selectionChanging($event)">
             <igx-prefix class="ellipsis">DateTime format: </igx-prefix>
             <igx-select-item *ngFor="let dateFormat of dateTimeFormats" [value]="dateFormat.format"
                 [text]="dateFormat.format + ' ---> ' + dateFormat.eq">
@@ -17,7 +17,7 @@
             <igx-hint>Applied to 'dateTime' type column only</igx-hint>
         </igx-select>
 
-        <igx-select #select [(ngModel)]="dateOptions.format" [displayDensity]="'compact'" (selectionChanging)="selectionDateChanging($event)">
+        <igx-select #select [(ngModel)]="dateOptions.format" (selectionChanging)="selectionDateChanging($event)">
             <igx-prefix class="ellipsis">Date format: </igx-prefix>
             <igx-select-item *ngFor="let dateFormat of dateFormats" [value]="dateFormat.format"
                 [text]="dateFormat.format + ' ---> ' + dateFormat.eq">
@@ -26,7 +26,7 @@
             <igx-hint>Applied to 'date' type column only</igx-hint>
         </igx-select>
 
-        <igx-select #select [(ngModel)]="timeOptions.format" [displayDensity]="'compact'" (selectionChanging)="selectionTimeChanging($event)">
+        <igx-select #select [(ngModel)]="timeOptions.format" (selectionChanging)="selectionTimeChanging($event)">
             <igx-prefix class="ellipsis">Time format: </igx-prefix>
             <igx-select-item *ngFor="let timeFormat of timeFormats" [value]="timeFormat.format"
                 [text]="timeFormat.format + ' ---> ' + timeFormat.eq">
@@ -35,7 +35,7 @@
             <igx-hint>Applied to 'time' type column only</igx-hint>
         </igx-select>
 
-        <igx-select #select [(ngModel)]="dateTimeOptions.timezone" [displayDensity]="'compact'" (selectionChanging)="timezoneSelectionChanging($event)">
+        <igx-select #select [(ngModel)]="dateTimeOptions.timezone" (selectionChanging)="timezoneSelectionChanging($event)">
             <igx-prefix class="ellipsis">Timezone: </igx-prefix>
             <igx-select-item *ngFor="let timezone of timezoneFormats" [value]="timezone" [text]="timezone">
                 {{ timezone }}
@@ -43,7 +43,7 @@
             <igx-hint>Applicable to dateTime type columns only</igx-hint>
         </igx-select>
 
-        <igx-select #select [(ngModel)]="options.currencyCode" [displayDensity]="'compact'" (selectionChanging)="currencySelectionChanging($event)">
+        <igx-select #select [(ngModel)]="options.currencyCode" (selectionChanging)="currencySelectionChanging($event)">
             <igx-prefix class="ellipsis">Currency Code: </igx-prefix>
             <igx-select-item *ngFor="let currencyCode of currencyCodes" [value]="currencyCode">
                 {{ currencyCode }}
@@ -55,7 +55,7 @@
             </igx-suffix>
         </igx-select>
         <br />
-        <igx-input-group type="search" class="searchInputGroup" [displayDensity]="'compact'">
+        <igx-input-group type="search" class="searchInputGroup">
             <igx-prefix class="ellipsis">
                 <div #target="tooltipTarget" [igxTooltipTarget]="tooltipRef" [showDelay]="0" [hideDelay]="0">Set digits
                     info
@@ -72,7 +72,6 @@
                 </igx-icon>
             </igx-suffix>
             <igx-hint [ngClass]="warningClass()" position="start">{{ digitsInfoMessage }}</igx-hint>
-
         </igx-input-group>
     </span>
 
diff --git a/src/app/grid/grid-column-data-types-sample/grid-column-data-types-sample.component.scss b/src/app/grid/grid-column-data-types-sample/grid-column-data-types-sample.component.scss
index d58355e454..d211df30c1 100644
--- a/src/app/grid/grid-column-data-types-sample/grid-column-data-types-sample.component.scss
+++ b/src/app/grid/grid-column-data-types-sample/grid-column-data-types-sample.component.scss
@@ -1,5 +1,10 @@
 @use '../../../variables' as *;
 
+igx-select,
+igx-input-group {
+    --ig-size: var(--ig-size-small);
+}
+
 .grid-wrapper {
     --ig-size: var(--ig-size-small);
     margin: 15px;
diff --git a/src/app/grid/grid-crud-sample/crud-sample.component.html b/src/app/grid/grid-crud-sample/crud-sample.component.html
index 5482961e2f..0200c21bc8 100644
--- a/src/app/grid/grid-crud-sample/crud-sample.component.html
+++ b/src/app/grid/grid-crud-sample/crud-sample.component.html
@@ -17,7 +17,6 @@
             [totalRecords]="totalCount"
             [(page)]="page" [(perPage)]="perPage"
             [selectOptions]="selectOptions"
-            [displayDensity]="grid.displayDensity"
             (pageChange)="paginate($event)"
             (perPageChange)="perPageChange($event)">
         </igx-paginator>
diff --git a/src/app/grid/grid-custom-kb-navigation/grid-custom-kb-navigation-sample.component.html b/src/app/grid/grid-custom-kb-navigation/grid-custom-kb-navigation-sample.component.html
index 2881abaabc..5ca4d7e5a1 100644
--- a/src/app/grid/grid-custom-kb-navigation/grid-custom-kb-navigation-sample.component.html
+++ b/src/app/grid/grid-custom-kb-navigation/grid-custom-kb-navigation-sample.component.html
@@ -1,5 +1,5 @@
 <div class="grid__wrapper">
-    <igx-grid [igxPreventDocumentScroll]="true" #grid1 [data]="data" [moving]="true" [primaryKey]="'ProductID'" [autoGenerate]="false" [displayDensity]="'cosy'"
+    <igx-grid [igxPreventDocumentScroll]="true" #grid1 [data]="data" [moving]="true" [primaryKey]="'ProductID'" [autoGenerate]="false"
         width="100%" height="350px" [rowSelection]="selectionMode" (gridKeydown)="customKeydown($event)">
         <igx-paginator></igx-paginator>
         <igx-column field="ProductID" header="Product ID" width="16%" [headerClasses]="'prodId'"
diff --git a/src/app/grid/grid-custom-kb-navigation/grid-custom-kb-navigation-sample.component.scss b/src/app/grid/grid-custom-kb-navigation/grid-custom-kb-navigation-sample.component.scss
index cc0dccfe6f..ced9e22e7b 100644
--- a/src/app/grid/grid-custom-kb-navigation/grid-custom-kb-navigation-sample.component.scss
+++ b/src/app/grid/grid-custom-kb-navigation/grid-custom-kb-navigation-sample.component.scss
@@ -1,3 +1,4 @@
 .grid__wrapper {
+    --ig-size: var(--ig-size-medium);
     margin: 5px 16px;
 }
diff --git a/src/app/grid/grid-excel-style-filtering-load-on-demand/grid-excel-style-filtering-load-on-demand.component.html b/src/app/grid/grid-excel-style-filtering-load-on-demand/grid-excel-style-filtering-load-on-demand.component.html
index a9b93f41aa..c78bc13928 100644
--- a/src/app/grid/grid-excel-style-filtering-load-on-demand/grid-excel-style-filtering-load-on-demand.component.html
+++ b/src/app/grid/grid-excel-style-filtering-load-on-demand/grid-excel-style-filtering-load-on-demand.component.html
@@ -1,5 +1,5 @@
 <div class="grid__wrapper">
-    <igx-grid [igxPreventDocumentScroll]="true" #grid1 [data]="data" [moving]="true" [height]="'750px'" [displayDensity]="'cosy'"
+    <igx-grid [igxPreventDocumentScroll]="true" #grid1 [data]="data" [moving]="true" [height]="'750px'"
                 [allowFiltering]="true" [filterMode]="'excelStyleFilter'"
                 [uniqueColumnValuesStrategy]="columnValuesStrategy">
         <igx-grid-toolbar>
diff --git a/src/app/grid/grid-excel-style-filtering-load-on-demand/grid-excel-style-filtering-load-on-demand.component.scss b/src/app/grid/grid-excel-style-filtering-load-on-demand/grid-excel-style-filtering-load-on-demand.component.scss
index 7797492956..fc196fc2dc 100644
--- a/src/app/grid/grid-excel-style-filtering-load-on-demand/grid-excel-style-filtering-load-on-demand.component.scss
+++ b/src/app/grid/grid-excel-style-filtering-load-on-demand/grid-excel-style-filtering-load-on-demand.component.scss
@@ -1,4 +1,6 @@
 .grid__wrapper {
+    --ig-size: var(--ig-size-medium);
+
     margin: 0 auto;
     padding: 16px;
 }
diff --git a/src/app/grid/grid-filtering-template-sample/grid-filtering-template-sample.component.html b/src/app/grid/grid-filtering-template-sample/grid-filtering-template-sample.component.html
index dab60c03e5..3a15b8b1a8 100644
--- a/src/app/grid/grid-filtering-template-sample/grid-filtering-template-sample.component.html
+++ b/src/app/grid/grid-filtering-template-sample/grid-filtering-template-sample.component.html
@@ -20,7 +20,7 @@
     </igx-grid>
     <ng-template #defaultFilterTemplate igxFilterCellTemplate let-column="column">
         <div class="filter-cell">
-            <igx-input-group #inputGr class="filter-input" type="box" [displayDensity]="'compact'">
+            <igx-input-group #inputGr class="filter-input" type="box">
                 <igx-prefix>
                     <igx-icon>search</igx-icon>
                 </igx-prefix>
@@ -43,7 +43,7 @@
     <ng-template #dateFilterTemplate igxFilterCellTemplate let-column="column">
         <div class="filter-cell">
             <igx-date-picker #picker [value]="getFilterValue(column)" (valueChange)="onDateSelected($event, column)" mode="dialog"
-                [displayDensity]="'compact'" placeholder="Filter..." [displayFormat]="displayDateFormat" type="box">
+                placeholder="Filter..." [displayFormat]="displayDateFormat" type="box">
                 <igx-picker-toggle igxPrefix>
                     <igx-icon>search</igx-icon>
                 </igx-picker-toggle>
diff --git a/src/app/grid/grid-filtering-template-sample/grid-filtering-template-sample.component.scss b/src/app/grid/grid-filtering-template-sample/grid-filtering-template-sample.component.scss
index 7aa7cbcb7e..06b4c8fd95 100644
--- a/src/app/grid/grid-filtering-template-sample/grid-filtering-template-sample.component.scss
+++ b/src/app/grid/grid-filtering-template-sample/grid-filtering-template-sample.component.scss
@@ -1,3 +1,8 @@
+igx-input-group,
+igx-date-picker {
+    --ig-size: var(--ig-size-small);
+}
+
 .grid__wrapper {
     padding-top: 16px;
     margin: 0 16px;
diff --git a/src/app/grid/grid-mrl-custom-navigation/grid-mrl-custom-navigation.component.html b/src/app/grid/grid-mrl-custom-navigation/grid-mrl-custom-navigation.component.html
index b97196dfa8..a3d3b11b61 100644
--- a/src/app/grid/grid-mrl-custom-navigation/grid-mrl-custom-navigation.component.html
+++ b/src/app/grid/grid-mrl-custom-navigation/grid-mrl-custom-navigation.component.html
@@ -4,7 +4,7 @@
         height="570px"
         [data]="sourceData"
         [autoGenerate]="false"
-        [displayDensity]="'cosy'" (gridKeydown)="customNavigation($event)" >
+        (gridKeydown)="customNavigation($event)">
         <igx-column-layout [header]="'Company'">
             <igx-column [rowStart]="1" [colStart]="1" [colEnd]="3" field="company" header='Company'></igx-column>
             <igx-column [rowStart]="2" [colStart]="1"field="country" header='Country'></igx-column>
diff --git a/src/app/grid/grid-mrl-custom-navigation/grid-mrl-custom-navigation.component.scss b/src/app/grid/grid-mrl-custom-navigation/grid-mrl-custom-navigation.component.scss
index a9820d407d..50da1cdef3 100644
--- a/src/app/grid/grid-mrl-custom-navigation/grid-mrl-custom-navigation.component.scss
+++ b/src/app/grid/grid-mrl-custom-navigation/grid-mrl-custom-navigation.component.scss
@@ -1,3 +1,4 @@
 .wrapper {
+    --ig-size: var(--ig-size-medium);
     padding: 16px;
-}
\ No newline at end of file
+}
diff --git a/src/app/grid/grid-multi-row-layout-styling/grid-multi-row-layout-styling.component.html b/src/app/grid/grid-multi-row-layout-styling/grid-multi-row-layout-styling.component.html
index c911f5129c..32ee570550 100644
--- a/src/app/grid/grid-multi-row-layout-styling/grid-multi-row-layout-styling.component.html
+++ b/src/app/grid/grid-multi-row-layout-styling/grid-multi-row-layout-styling.component.html
@@ -4,8 +4,7 @@
         height="720px"
         [data]="sourceData"
         [autoGenerate]="false"
-        [sortingExpressions]="sort"
-        [displayDensity]="'cosy'">
+        [sortingExpressions]="sort">
         <igx-column-layout [header]="'ID'">
             <igx-column [rowStart]="1" [colStart]="1" [rowEnd]="3" field="ID" [filterable]="false"></igx-column>
         </igx-column-layout>
diff --git a/src/app/grid/grid-multi-row-layout-styling/grid-multi-row-layout-styling.component.scss b/src/app/grid/grid-multi-row-layout-styling/grid-multi-row-layout-styling.component.scss
index c83ff630b0..1c0204ab9f 100644
--- a/src/app/grid/grid-multi-row-layout-styling/grid-multi-row-layout-styling.component.scss
+++ b/src/app/grid/grid-multi-row-layout-styling/grid-multi-row-layout-styling.component.scss
@@ -1,6 +1,7 @@
 @use '../../../variables' as *;
 
 .wrapper {
+    --ig-size: var(--ig-size-medium);
     padding: 16px;
 }
 
diff --git a/src/app/grid/grid-multi-row-layout/grid-multi-row-layout.component.html b/src/app/grid/grid-multi-row-layout/grid-multi-row-layout.component.html
index f06fa5d985..725db49b29 100644
--- a/src/app/grid/grid-multi-row-layout/grid-multi-row-layout.component.html
+++ b/src/app/grid/grid-multi-row-layout/grid-multi-row-layout.component.html
@@ -6,8 +6,7 @@
         [autoGenerate]="false"
         [groupingExpressions]="group"
         [sortingExpressions]="sort"
-        [allowFiltering]="true"
-        [displayDensity]="'cosy'">
+        [allowFiltering]="true">
         <igx-grid-toolbar>
             <igx-grid-toolbar-actions>
                 <igx-grid-toolbar-hiding></igx-grid-toolbar-hiding>
diff --git a/src/app/grid/grid-multi-row-layout/grid-multi-row-layout.component.scss b/src/app/grid/grid-multi-row-layout/grid-multi-row-layout.component.scss
index a9820d407d..50da1cdef3 100644
--- a/src/app/grid/grid-multi-row-layout/grid-multi-row-layout.component.scss
+++ b/src/app/grid/grid-multi-row-layout/grid-multi-row-layout.component.scss
@@ -1,3 +1,4 @@
 .wrapper {
+    --ig-size: var(--ig-size-medium);
     padding: 16px;
-}
\ No newline at end of file
+}
diff --git a/src/app/grid/grid-pager-sample/grid-pager-sample.component.html b/src/app/grid/grid-pager-sample/grid-pager-sample.component.html
index 0df3e4ca53..cb3c0ee479 100644
--- a/src/app/grid/grid-pager-sample/grid-pager-sample.component.html
+++ b/src/app/grid/grid-pager-sample/grid-pager-sample.component.html
@@ -2,7 +2,7 @@
     <igx-grid [igxPreventDocumentScroll]="true" #grid [data]="data" height="500px"
         width="100%">
         <igx-paginator #paginator [(page)]="grid.page" [totalRecords]="grid.totalRecords" [(perPage)]="grid.perPage"
-            [selectOptions]="selectOptions" [displayDensity]="grid.displayDensity">
+            [selectOptions]="selectOptions">
             <igx-paginator-content>
                 <igx-page-size *ngIf="!isDropdownHidden"></igx-page-size>
                 <igx-page-nav *ngIf="!isPagerHidden"></igx-page-nav>
@@ -29,14 +29,6 @@
 
 
     <div class="options-container">
-        <label>Display density:</label>
-        <div class="select-input">
-            <igx-select [(ngModel)]="grid.displayDensity" [displayDensity]="'compact'">
-                <igx-select-item *ngFor="let density of densityOptions" [value]="density">
-                    {{ density }}
-                </igx-select-item>
-            </igx-select>
-        </div>
         <igx-switch [(ngModel)]="isDropdownHidden">Hide Dropdown</igx-switch>
         <igx-switch [(ngModel)]="isPagerHidden">Hide Pager</igx-switch>
     </div>
diff --git a/src/app/grid/grid-pager-sample/grid-pager-sample.component.ts b/src/app/grid/grid-pager-sample/grid-pager-sample.component.ts
index ce41c429ae..8853688a53 100644
--- a/src/app/grid/grid-pager-sample/grid-pager-sample.component.ts
+++ b/src/app/grid/grid-pager-sample/grid-pager-sample.component.ts
@@ -12,7 +12,6 @@ export class GridPagerSampleComponent implements OnInit, AfterViewInit {
     paginator: IgxPaginatorComponent;
 
     public data: any[];
-    public densityOptions: string[];
     public isDropdownHidden = false;
     public isPagerHidden = false;
     public selectOptions = [5, 15, 20, 50];
@@ -26,7 +25,6 @@ export class GridPagerSampleComponent implements OnInit, AfterViewInit {
 
     public ngOnInit(): void {
         this.data = athletesData;
-        this.densityOptions = ['compact', 'cosy', 'comfortable'];
     }
 
     public ngAfterViewInit(): void {
diff --git a/src/app/grid/grid-remote-paging-sample/remote-paging-sample.component.html b/src/app/grid/grid-remote-paging-sample/remote-paging-sample.component.html
index f3b354b57d..701f729d96 100644
--- a/src/app/grid/grid-remote-paging-sample/remote-paging-sample.component.html
+++ b/src/app/grid/grid-remote-paging-sample/remote-paging-sample.component.html
@@ -11,7 +11,6 @@
             [(page)]="page"
             [(perPage)]="perPage"
             [selectOptions]="selectOptions"
-            [displayDensity]="grid1.displayDensity"
             (pageChange)="paginate($event)"
             (perPageChange)="perPageChange($event)">
             <igx-paginator-content>
diff --git a/src/app/grid/grid-save-state/grid-state.component.html b/src/app/grid/grid-save-state/grid-state.component.html
index fcd5cf6e37..694b5bc5ca 100644
--- a/src/app/grid/grid-save-state/grid-state.component.html
+++ b/src/app/grid/grid-save-state/grid-state.component.html
@@ -52,9 +52,9 @@
         [data]="localData"
         [primaryKey]="'EmployeeID'"
         [rowEditable]="false"
-        [allowFiltering]="true" [filterMode]="'excelStyleFilter'"
+        [allowFiltering]="true" 
+        [filterMode]="'excelStyleFilter'"
         [allowAdvancedFiltering]="true"
-        [displayDensity]="'cosy'"
         [cellSelection]="'multiple'"
         [rowSelection]="'none'">
         <igx-paginator></igx-paginator>
diff --git a/src/app/grid/grid-save-state/grid-state.component.scss b/src/app/grid/grid-save-state/grid-state.component.scss
index c13e245dd4..57a0304b82 100644
--- a/src/app/grid/grid-save-state/grid-state.component.scss
+++ b/src/app/grid/grid-save-state/grid-state.component.scss
@@ -34,4 +34,8 @@
     margin: 0 16px;
     padding-top: 16px;
     width: 100%;
+
+    igx-grid {
+        --ig-size: var(--ig-size-medium);
+    }
 }
diff --git a/src/app/grid/grid-sorting-sample/grid-sorting-sample.component.html b/src/app/grid/grid-sorting-sample/grid-sorting-sample.component.html
index d1985a612f..d3ce8a2797 100644
--- a/src/app/grid/grid-sorting-sample/grid-sorting-sample.component.html
+++ b/src/app/grid/grid-sorting-sample/grid-sorting-sample.component.html
@@ -12,7 +12,6 @@
                 <igx-simple-combo #comboItem
                     [data]="sortingTypes"
                     [displayKey]="'mode'"
-                    [displayDensity]="'compact'"
                     [(ngModel)]="sortingOptions"
                     (keydown)="handleSearchResults($event)">
                     <ng-template igxComboClearIcon></ng-template>
diff --git a/src/app/grid/grid-sorting-sample/grid-sorting-sample.component.scss b/src/app/grid/grid-sorting-sample/grid-sorting-sample.component.scss
index 6f05adbc6a..5c55bd400f 100644
--- a/src/app/grid/grid-sorting-sample/grid-sorting-sample.component.scss
+++ b/src/app/grid/grid-sorting-sample/grid-sorting-sample.component.scss
@@ -1,3 +1,7 @@
+igx-simple-combo {
+    --ig-size: var(--ig-size-small);
+}
+
 .grid__wrapper {
     margin: 0 auto;
     padding: 16px;
diff --git a/src/app/grid/grid-sorting-styling/grid-sorting-styling.component.html b/src/app/grid/grid-sorting-styling/grid-sorting-styling.component.html
index 005e30c0bd..18fb50da4b 100644
--- a/src/app/grid/grid-sorting-styling/grid-sorting-styling.component.html
+++ b/src/app/grid/grid-sorting-styling/grid-sorting-styling.component.html
@@ -3,7 +3,7 @@
         (sortingDone)="removeSorting($event)">
         <igx-grid-toolbar>
 
-            <igx-select [(ngModel)]="currentSortingType" [displayDensity]="'compact'" (selectionChanging)="sortTypeSelection($event)">
+            <igx-select [(ngModel)]="currentSortingType" (selectionChanging)="sortTypeSelection($event)">
                 <label igxLabel>Select Sorting Type</label>
                 <igx-select-item *ngFor="let type of sortingTypes" [value]="type.value">
                     {{type.name}}
diff --git a/src/app/grid/grid-sorting-styling/grid-sorting-styling.component.scss b/src/app/grid/grid-sorting-styling/grid-sorting-styling.component.scss
index 78618f85ee..aae891bbed 100644
--- a/src/app/grid/grid-sorting-styling/grid-sorting-styling.component.scss
+++ b/src/app/grid/grid-sorting-styling/grid-sorting-styling.component.scss
@@ -12,4 +12,8 @@ $custom-theme: grid-theme(
 .grid__wrapper {
     margin: 0 auto;
     padding: 16px;
+
+    igx-select {
+        --ig-size: var(--ig-size-small);
+    }
 }
diff --git a/src/app/grid/grid-summary-template/grid-summary-template.component.html b/src/app/grid/grid-summary-template/grid-summary-template.component.html
index ee96fe00d8..8388b4c1be 100644
--- a/src/app/grid/grid-summary-template/grid-summary-template.component.html
+++ b/src/app/grid/grid-summary-template/grid-summary-template.component.html
@@ -5,10 +5,10 @@
             <input igxInput name="height" type="number" [(ngModel)]="summaryHeight">
         </igx-input-group>
         <igx-switch [(ngModel)]="hasSummary">Toggle Summaries</igx-switch>
-        <igx-buttongroup [values]="displayDensities" (selected)="selectDensity($event)" [displayDensity]="displayDensity">
+        <igx-buttongroup [values]="sizes" (selected)="selectSize($event)">
         </igx-buttongroup>
     </div>
-    <igx-grid [igxPreventDocumentScroll]="true" #grid1 [data]="data" [displayDensity]="displayDensity"
+    <igx-grid [igxPreventDocumentScroll]="true" #grid1 [data]="data"
         [summaryRowHeight]="summaryHeight" [autoGenerate]="false" height="550px" width="100%">
         <igx-column field="ProductID" header="Product ID" width="10%" [headerClasses]="'prodId'" [groupable]="true">
         </igx-column>
diff --git a/src/app/grid/grid-summary-template/grid-summary-template.component.ts b/src/app/grid/grid-summary-template/grid-summary-template.component.ts
index 454f0a8963..9c74ef9eb0 100644
--- a/src/app/grid/grid-summary-template/grid-summary-template.component.ts
+++ b/src/app/grid/grid-summary-template/grid-summary-template.component.ts
@@ -1,5 +1,5 @@
-import { Component, OnInit } from '@angular/core';
-import { DisplayDensity, IgxNumberSummaryOperand, IgxSummaryResult } from 'igniteui-angular';
+import { Component, HostBinding, OnInit } from '@angular/core';
+import { IgxNumberSummaryOperand, IgxSummaryResult } from 'igniteui-angular';
 import { DATA } from '../../data/nwindData';
 
 class DiscontinuedSummary {
@@ -37,8 +37,8 @@ export class GridSummaryTemplateComponent implements OnInit {
     public discontinuedSummary = DiscontinuedSummary;
     public data;
     public summaryHeight = 135;
-    public displayDensity: DisplayDensity = 'cosy';
-    public displayDensities;
+    public size = 'medium';
+    public sizes;
     public hasSummary = true;
 
     constructor() {
@@ -46,14 +46,19 @@ export class GridSummaryTemplateComponent implements OnInit {
     }
 
     public ngOnInit(): void {
-        this.displayDensities = [
-            { label: 'compact', selected: this.displayDensity === 'compact', togglable: true },
-            { label: 'cosy', selected: this.displayDensity === 'cosy', togglable: true },
-            { label: 'comfortable', selected: this.displayDensity === 'comfortable', togglable: true }
+        this.sizes = [
+            { label: 'small', selected: this.size === 'small', togglable: true },
+            { label: 'medium', selected: this.size === 'medium', togglable: true },
+            { label: 'large', selected: this.size === 'large', togglable: true }
         ];
     }
 
-    public selectDensity(event): void {
-        this.displayDensity = this.displayDensities[event.index].label;
+    public selectSize(event): void {
+        this.size = this.sizes[event.index].label;
+    }
+
+    @HostBinding('style.--ig-size')
+    protected get sizeStyle() {
+        return `var(--ig-size-${this.size})`;
     }
 }
diff --git a/src/app/hierarchical-grid/column-selection/hierarchical-grid-column-selection.component.html b/src/app/hierarchical-grid/column-selection/hierarchical-grid-column-selection.component.html
index ff5242158c..0201340974 100644
--- a/src/app/hierarchical-grid/column-selection/hierarchical-grid-column-selection.component.html
+++ b/src/app/hierarchical-grid/column-selection/hierarchical-grid-column-selection.component.html
@@ -3,7 +3,7 @@
         [columnSelection]="currentColumnSelection">
         <igx-grid-toolbar>
 
-            <igx-select [(ngModel)]="currentColumnSelection" [displayDensity]="'compact'">
+            <igx-select [(ngModel)]="currentColumnSelection">
                 <label igxLabel>Column Selection</label>
                 <igx-select-item value="none">None</igx-select-item>
                 <igx-select-item value="single">Single</igx-select-item>
diff --git a/src/app/hierarchical-grid/column-selection/hierarchical-grid-column-selection.component.scss b/src/app/hierarchical-grid/column-selection/hierarchical-grid-column-selection.component.scss
index c40111f6b3..65e97f912e 100644
--- a/src/app/hierarchical-grid/column-selection/hierarchical-grid-column-selection.component.scss
+++ b/src/app/hierarchical-grid/column-selection/hierarchical-grid-column-selection.component.scss
@@ -7,4 +7,8 @@
 }
 .grid__wrapper {
     padding: 16px;
-}
\ No newline at end of file
+
+    igx-select {
+        --ig-size: var(--ig-size-small);
+    }
+}
diff --git a/src/app/hierarchical-grid/hgrid-summary-template/hgrid-summary-template.component.html b/src/app/hierarchical-grid/hgrid-summary-template/hgrid-summary-template.component.html
index b90108a7e1..9a23d90453 100644
--- a/src/app/hierarchical-grid/hgrid-summary-template/hgrid-summary-template.component.html
+++ b/src/app/hierarchical-grid/hgrid-summary-template/hgrid-summary-template.component.html
@@ -5,11 +5,11 @@
             <input igxInput name="height" type="number" [(ngModel)]="summaryHeight">
         </igx-input-group>
         <igx-switch [(ngModel)]="hasSummary">Toggle Summaries</igx-switch>
-        <igx-buttongroup [values]="displayDensities" (selected)="selectDensity($event)" [displayDensity]="displayDensity">
+        <igx-buttongroup [values]="sizes" (selected)="selectSize($event)">
         </igx-buttongroup>
     </div>
 
-    <igx-hierarchical-grid [igxPreventDocumentScroll]="true" [data]="localdata" [displayDensity]="displayDensity"
+    <igx-hierarchical-grid [igxPreventDocumentScroll]="true" [data]="localdata"
         [summaryRowHeight]="summaryHeight" [height]="'550px'" [width]="'100%'" [rowHeight]="'65px'" #hierarchicalGrid>
         <igx-column field="Artist" [hasSummary]='hasSummary'></igx-column>
         <igx-column field="Photo" [hasSummary]='hasSummary' [summaries]="grammySummary">
diff --git a/src/app/hierarchical-grid/hgrid-summary-template/hgrid-summary-template.component.ts b/src/app/hierarchical-grid/hgrid-summary-template/hgrid-summary-template.component.ts
index 9a4e2b0218..12088e28d1 100644
--- a/src/app/hierarchical-grid/hgrid-summary-template/hgrid-summary-template.component.ts
+++ b/src/app/hierarchical-grid/hgrid-summary-template/hgrid-summary-template.component.ts
@@ -1,6 +1,5 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, HostBinding, OnInit } from '@angular/core';
 import {
-    DisplayDensity,
     IgxNumberSummaryOperand,
     IgxSummaryResult
 } from 'igniteui-angular';
@@ -55,22 +54,27 @@ export class HGridSummaryTemplateComponent implements OnInit {
     public grammySummary = GrammySummary;
     public numberSummary = CustomNumberSummary;
     public summaryHeight = 120;
-    public displayDensity: DisplayDensity = 'cosy';
-    public displayDensities;
+    public size = 'medium';
+    public sizes;
     public hasSummary = true;
 
     constructor() { }
 
     public ngOnInit(): void {
         this.localdata = SINGERS;
-        this.displayDensities = [
-            { label: 'compact', selected: this.displayDensity === 'compact', togglable: true },
-            { label: 'cosy', selected: this.displayDensity === 'cosy', togglable: true },
-            { label: 'comfortable', selected: this.displayDensity === 'comfortable', togglable: true }
+        this.sizes = [
+            { label: 'small', selected: this.size === 'small', togglable: true },
+            { label: 'medium', selected: this.size === 'medium', togglable: true },
+            { label: 'large', selected: this.size === 'large', togglable: true }
         ];
     }
 
-    public selectDensity(event): void {
-        this.displayDensity = this.displayDensities[event.index].label;
+    @HostBinding('style.--ig-size')
+    protected get sizeStyle() {
+        return `var(--ig-size-${this.size})`;
+    }
+
+    public selectSize(event): void {
+        this.size = this.sizes[event.index].label;
     }
 }
diff --git a/src/app/hierarchical-grid/hierarchical-grid-excel-style-filtering-load-on-demand/hierarchical-grid-excel-style-filtering-load-on-demand.component.html b/src/app/hierarchical-grid/hierarchical-grid-excel-style-filtering-load-on-demand/hierarchical-grid-excel-style-filtering-load-on-demand.component.html
index acabe02b56..8da95638ea 100644
--- a/src/app/hierarchical-grid/hierarchical-grid-excel-style-filtering-load-on-demand/hierarchical-grid-excel-style-filtering-load-on-demand.component.html
+++ b/src/app/hierarchical-grid/hierarchical-grid-excel-style-filtering-load-on-demand/hierarchical-grid-excel-style-filtering-load-on-demand.component.html
@@ -1,5 +1,5 @@
 <div class="wrapper">
-    <igx-hierarchical-grid [igxPreventDocumentScroll]="true"  #hierarchicalGrid [primaryKey]="'Artist'" [moving]="true" [data]="localdata" height="750px" [displayDensity]="'cosy'" [autoGenerate]="false"
+    <igx-hierarchical-grid [igxPreventDocumentScroll]="true"  #hierarchicalGrid [primaryKey]="'Artist'" [moving]="true" [data]="localdata" height="750px" [autoGenerate]="false"
                            [allowFiltering]="true" [filterMode]="'excelStyleFilter'"
                            [uniqueColumnValuesStrategy]="singersColumnValuesStrategy">
         <igx-grid-toolbar>
diff --git a/src/app/hierarchical-grid/hierarchical-grid-excel-style-filtering-load-on-demand/hierarchical-grid-excel-style-filtering-load-on-demand.component.scss b/src/app/hierarchical-grid/hierarchical-grid-excel-style-filtering-load-on-demand/hierarchical-grid-excel-style-filtering-load-on-demand.component.scss
index a91a2aea90..d860adfd59 100644
--- a/src/app/hierarchical-grid/hierarchical-grid-excel-style-filtering-load-on-demand/hierarchical-grid-excel-style-filtering-load-on-demand.component.scss
+++ b/src/app/hierarchical-grid/hierarchical-grid-excel-style-filtering-load-on-demand/hierarchical-grid-excel-style-filtering-load-on-demand.component.scss
@@ -1,4 +1,5 @@
 .wrapper {
+    --ig-size: var(--ig-size-medium);
     margin: 16px;
 }
 
diff --git a/src/app/hierarchical-grid/hierarchical-grid-filtering-template/hierarchical-grid-filtering-template.component.html b/src/app/hierarchical-grid/hierarchical-grid-filtering-template/hierarchical-grid-filtering-template.component.html
index 3d6aae8dfb..d7e5d2d55b 100644
--- a/src/app/hierarchical-grid/hierarchical-grid-filtering-template/hierarchical-grid-filtering-template.component.html
+++ b/src/app/hierarchical-grid/hierarchical-grid-filtering-template/hierarchical-grid-filtering-template.component.html
@@ -35,7 +35,7 @@
 </igx-hierarchical-grid>
 <ng-template #defaultFilterTemplate igxFilterCellTemplate let-column="column">
     <div class="filter-cell">
-        <igx-input-group #inputGr type="box" [displayDensity]="'compact'">
+        <igx-input-group #inputGr type="box">
             <igx-prefix>
                 <igx-icon>search</igx-icon>
             </igx-prefix>
@@ -58,7 +58,7 @@
 <ng-template #dateFilterTemplate igxFilterCellTemplate let-column="column">
     <div class="filter-cell">
         <igx-date-picker #picker [value]="getFilterValue(column)" (valueChange)="onDateSelected($event, column)" mode="dialog"
-            [displayDensity]="'compact'" placeholder="Filter..." [displayFormat]="displayDateFormat" type="box">
+            placeholder="Filter..." [displayFormat]="displayDateFormat" type="box">
             <igx-picker-toggle igxPrefix>
                 <igx-icon>search</igx-icon>
             </igx-picker-toggle>
diff --git a/src/app/hierarchical-grid/hierarchical-grid-filtering-template/hierarchical-grid-filtering-template.component.scss b/src/app/hierarchical-grid/hierarchical-grid-filtering-template/hierarchical-grid-filtering-template.component.scss
index 11c1ffb8db..ed03094bd8 100644
--- a/src/app/hierarchical-grid/hierarchical-grid-filtering-template/hierarchical-grid-filtering-template.component.scss
+++ b/src/app/hierarchical-grid/hierarchical-grid-filtering-template/hierarchical-grid-filtering-template.component.scss
@@ -13,4 +13,9 @@
 .grid__wrapper {
     margin: 0 auto;
     padding: 16px;
-}
\ No newline at end of file
+}
+
+igx-input-group,
+igx-date-picker {
+    --ig-size: var(--ig-size-small);
+}
diff --git a/src/app/hierarchical-grid/hierarchical-grid-pager-sample/hierarchical-grid-pager-sample.component.html b/src/app/hierarchical-grid/hierarchical-grid-pager-sample/hierarchical-grid-pager-sample.component.html
index 6e103b187e..ef54ef097d 100644
--- a/src/app/hierarchical-grid/hierarchical-grid-pager-sample/hierarchical-grid-pager-sample.component.html
+++ b/src/app/hierarchical-grid/hierarchical-grid-pager-sample/hierarchical-grid-pager-sample.component.html
@@ -1,6 +1,6 @@
 <div class="grid__wrapper">
     <igx-hierarchical-grid [igxPreventDocumentScroll]="true" #hGrid [data]="data" height="500px" width="100%" primaryKey="ID">
-        <igx-paginator #paginator [(page)]="hGrid.page" [totalRecords]="hGrid.totalRecords" [perPage]="10" [selectOptions]="selectOptions" [displayDensity]="hGrid.displayDensity">
+        <igx-paginator #paginator [(page)]="hGrid.page" [totalRecords]="hGrid.totalRecords" [perPage]="10" [selectOptions]="selectOptions">
             <igx-paginator-content>
                 <igx-page-size *ngIf="!isDropdownHidden"></igx-page-size>
                 <igx-page-nav *ngIf="!isPagerHidden"></igx-page-nav>
@@ -46,14 +46,6 @@
     </igx-hierarchical-grid>
 
     <div class="options-container">
-        <label>Display density:</label>
-        <div class="select-input">
-            <igx-select [(ngModel)]="hGrid.displayDensity" [displayDensity]="'compact'">
-                <igx-select-item *ngFor="let density of densityOptions" [value]="density">
-                    {{ density }}
-                </igx-select-item>
-            </igx-select>
-        </div>
         <igx-switch [(ngModel)]="isDropdownHidden">Hide Dropdown</igx-switch>
         <igx-switch [(ngModel)]="isPagerHidden">Hide Pager</igx-switch>
     </div>
diff --git a/src/app/menus/action-strip/action-strip-paragraph-menu/action-strip-paragraph-menu.component.html b/src/app/menus/action-strip/action-strip-paragraph-menu/action-strip-paragraph-menu.component.html
index ea7276b13d..22655ae1a7 100644
--- a/src/app/menus/action-strip/action-strip-paragraph-menu/action-strip-paragraph-menu.component.html
+++ b/src/app/menus/action-strip/action-strip-paragraph-menu/action-strip-paragraph-menu.component.html
@@ -10,7 +10,7 @@
         mollis luctus. Morbi lacinia orci augue, sed blandit est ornare placerat. Cras a ante nec mauris euismod aliquam
         vel pulvinar urna. Morbi tincidunt fringilla tortor, at ultricies neque rhoncus ac.
     </p>
-    <igx-action-strip [displayDensity]="displayDensity" class="my-action-strip" #actionStrip [hidden]="true">
+    <igx-action-strip class="my-action-strip" #actionStrip [hidden]="true">
         <div *igxActionStripMenuItem class="menu-button" (click)="alignTextLeft()" igxRipple>
             <igx-icon>format_align_left</igx-icon>
             <span>Left</span>
diff --git a/src/app/menus/action-strip/action-strip-paragraph-menu/action-strip-paragraph-menu.component.ts b/src/app/menus/action-strip/action-strip-paragraph-menu/action-strip-paragraph-menu.component.ts
index 110ddc6228..46521b69a3 100644
--- a/src/app/menus/action-strip/action-strip-paragraph-menu/action-strip-paragraph-menu.component.ts
+++ b/src/app/menus/action-strip/action-strip-paragraph-menu/action-strip-paragraph-menu.component.ts
@@ -1,5 +1,5 @@
 import { Component, ViewChild } from '@angular/core';
-import { DisplayDensity, IgxActionStripComponent } from 'igniteui-angular';
+import { IgxActionStripComponent } from 'igniteui-angular';
 
 @Component({
   selector: 'app-action-strip-paragraph-menu',
@@ -14,7 +14,6 @@ export class ActionStripParagraphMenuComponent {
     public textLeft = false;
     public textCenter = false;
     public textRight = false;
-    public displayDensity = DisplayDensity.comfortable;
 
     public onMouseLeave(event?) {
         if (!event) {
diff --git a/src/app/menus/action-strip/action-strip-paragraph/action-strip-paragraph.component.html b/src/app/menus/action-strip/action-strip-paragraph/action-strip-paragraph.component.html
index eaa191aacd..d7ed194e9b 100644
--- a/src/app/menus/action-strip/action-strip-paragraph/action-strip-paragraph.component.html
+++ b/src/app/menus/action-strip/action-strip-paragraph/action-strip-paragraph.component.html
@@ -10,7 +10,7 @@
         mollis luctus. Morbi lacinia orci augue, sed blandit est ornare placerat. Cras a ante nec mauris euismod aliquam
         vel pulvinar urna. Morbi tincidunt fringilla tortor, at ultricies neque rhoncus ac.
     </p>
-    <igx-action-strip #actionStrip [displayDensity]="displayDensity" class="my-action-strip" [hidden]="true">
+    <igx-action-strip #actionStrip class="my-action-strip" [hidden]="true">
         <igx-buttongroup [multiSelection]="true" class="buttons">
             <button igxButton (click)="makeTextBold()">
                 <igx-icon>format_bold</igx-icon>
diff --git a/src/app/menus/action-strip/action-strip-paragraph/action-strip-paragraph.component.ts b/src/app/menus/action-strip/action-strip-paragraph/action-strip-paragraph.component.ts
index 5fca024aa4..8b5c04e762 100644
--- a/src/app/menus/action-strip/action-strip-paragraph/action-strip-paragraph.component.ts
+++ b/src/app/menus/action-strip/action-strip-paragraph/action-strip-paragraph.component.ts
@@ -1,5 +1,4 @@
 import { Component, ViewChild } from '@angular/core';
-import { DisplayDensity } from 'igniteui-angular';
 
 @Component({
   selector: 'app-action-strip-paragraph',
@@ -13,7 +12,6 @@ export class ActionStripParagraphComponent {
     public isBold = false;
     public isItalic = false;
     public isUnderlined = false;
-    public displayDensity = DisplayDensity.comfortable;
 
     public makeTextBold() {
         if (!this.isBold) {
diff --git a/src/app/services/localization-samples/localization-all-resources/localization-all-resources.component.html b/src/app/services/localization-samples/localization-all-resources/localization-all-resources.component.html
index 0eccee5a41..7acb349459 100644
--- a/src/app/services/localization-samples/localization-all-resources/localization-all-resources.component.html
+++ b/src/app/services/localization-samples/localization-all-resources/localization-all-resources.component.html
@@ -13,7 +13,7 @@
         <igx-column field="Discontinued" header="Discontinued" [dataType]="'boolean'" [groupable]="true">
         </igx-column>
     </igx-grid>
-    <igx-select [(ngModel)]="locale" (ngModelChange)="updateLocale()" [displayDensity]="'compact'">
+    <igx-select [(ngModel)]="locale" (ngModelChange)="updateLocale()">
         <igx-select-item *ngFor="let locale of selectLocales" [value]="locale">
             {{ locale }}
         </igx-select-item>
diff --git a/src/app/services/localization-samples/localization-all-resources/localization-all-resources.component.scss b/src/app/services/localization-samples/localization-all-resources/localization-all-resources.component.scss
index 056423a412..d265cbbbad 100644
--- a/src/app/services/localization-samples/localization-all-resources/localization-all-resources.component.scss
+++ b/src/app/services/localization-samples/localization-all-resources/localization-all-resources.component.scss
@@ -1,4 +1,5 @@
 igx-select {
+    --ig-size: var(--ig-size-small);
     margin-top: 10px;
     width: 192px;
 }
diff --git a/src/app/tree-grid/column-selection/tree-grid-column-selection.component.html b/src/app/tree-grid/column-selection/tree-grid-column-selection.component.html
index 43ad12db9c..189fc1a0e7 100644
--- a/src/app/tree-grid/column-selection/tree-grid-column-selection.component.html
+++ b/src/app/tree-grid/column-selection/tree-grid-column-selection.component.html
@@ -8,7 +8,7 @@
                     [columnSelection]="currentColumnSelection">
         <igx-grid-toolbar>
 
-            <igx-select [(ngModel)]="currentColumnSelection" [displayDensity]="'compact'">
+            <igx-select [(ngModel)]="currentColumnSelection">
                 <label igxLabel>Column Selection</label>
                 <igx-select-item value="none">None</igx-select-item>
                 <igx-select-item value="single">Single</igx-select-item>
diff --git a/src/app/tree-grid/column-selection/tree-grid-column-selection.component.scss b/src/app/tree-grid/column-selection/tree-grid-column-selection.component.scss
index 573acf46c0..3588935e87 100644
--- a/src/app/tree-grid/column-selection/tree-grid-column-selection.component.scss
+++ b/src/app/tree-grid/column-selection/tree-grid-column-selection.component.scss
@@ -1,3 +1,7 @@
 .grid-wrapper{
     padding: 16px;
-}
\ No newline at end of file
+
+    igx-select {
+        --ig-size: var(--ig-size-small);
+    }
+}
diff --git a/src/app/tree-grid/tree-grid-excel-style-filtering-load-on-demand/tree-grid-excel-style-filtering-load-on-demand.component.html b/src/app/tree-grid/tree-grid-excel-style-filtering-load-on-demand/tree-grid-excel-style-filtering-load-on-demand.component.html
index d6445b5b48..6ee4105ae6 100644
--- a/src/app/tree-grid/tree-grid-excel-style-filtering-load-on-demand/tree-grid-excel-style-filtering-load-on-demand.component.html
+++ b/src/app/tree-grid/tree-grid-excel-style-filtering-load-on-demand/tree-grid-excel-style-filtering-load-on-demand.component.html
@@ -1,5 +1,5 @@
 <div class="grid__wrapper">
-    <igx-tree-grid [igxPreventDocumentScroll]="true"  #treegrid1 [data]="data" height="750px" primaryKey="ID" foreignKey="ParentID" [displayDensity]="'cosy'" [autoGenerate]="false"
+    <igx-tree-grid [igxPreventDocumentScroll]="true"  #treegrid1 [data]="data" height="750px" primaryKey="ID" foreignKey="ParentID" [autoGenerate]="false"
                    [allowFiltering]="true" [filterMode]="'excelStyleFilter'"
                    [uniqueColumnValuesStrategy]="columnValuesStrategy" [moving]="true">
         <igx-grid-toolbar>
diff --git a/src/app/tree-grid/tree-grid-excel-style-filtering-load-on-demand/tree-grid-excel-style-filtering-load-on-demand.component.scss b/src/app/tree-grid/tree-grid-excel-style-filtering-load-on-demand/tree-grid-excel-style-filtering-load-on-demand.component.scss
index b6f79f464f..a65f404d69 100644
--- a/src/app/tree-grid/tree-grid-excel-style-filtering-load-on-demand/tree-grid-excel-style-filtering-load-on-demand.component.scss
+++ b/src/app/tree-grid/tree-grid-excel-style-filtering-load-on-demand/tree-grid-excel-style-filtering-load-on-demand.component.scss
@@ -1,3 +1,4 @@
 .grid__wrapper {
+    --ig-size: var(--ig-size-medium);
     margin: 16px;
 }
diff --git a/src/app/tree-grid/tree-grid-filtering-template-sample/tree-grid-filtering-template-sample.component.html b/src/app/tree-grid/tree-grid-filtering-template-sample/tree-grid-filtering-template-sample.component.html
index 576cbff608..2b0c9cfe85 100644
--- a/src/app/tree-grid/tree-grid-filtering-template-sample/tree-grid-filtering-template-sample.component.html
+++ b/src/app/tree-grid/tree-grid-filtering-template-sample/tree-grid-filtering-template-sample.component.html
@@ -30,7 +30,7 @@
         </igx-tree-grid>
         <ng-template #defaultFilterTemplate igxFilterCellTemplate let-column="column">
             <div class="filter-cell">
-                <igx-input-group #inputGr class="filter-input" type="box" [displayDensity]="'compact'">
+                <igx-input-group #inputGr class="filter-input" type="box">
                     <igx-prefix>
                         <igx-icon>search</igx-icon>
                     </igx-prefix>
@@ -53,7 +53,7 @@
         <ng-template #dateFilterTemplate igxFilterCellTemplate let-column="column">
             <div class="filter-cell">
                 <igx-date-picker #picker [value]="getFilterValue(column)" (valueChange)="onDateSelected($event, column)" mode="dialog"
-                    [displayDensity]="'compact'" placeholder="Filter..." [displayFormat]="displayDateFormat" type="box">
+                    placeholder="Filter..." [displayFormat]="displayDateFormat" type="box">
                     <igx-picker-toggle igxPrefix>
                         <igx-icon>search</igx-icon>
                     </igx-picker-toggle>
diff --git a/src/app/tree-grid/tree-grid-filtering-template-sample/tree-grid-filtering-template-sample.component.scss b/src/app/tree-grid/tree-grid-filtering-template-sample/tree-grid-filtering-template-sample.component.scss
index a507cea976..e865f250a1 100644
--- a/src/app/tree-grid/tree-grid-filtering-template-sample/tree-grid-filtering-template-sample.component.scss
+++ b/src/app/tree-grid/tree-grid-filtering-template-sample/tree-grid-filtering-template-sample.component.scss
@@ -1,6 +1,11 @@
 .grid__wrapper {
     margin: 0 16px;
     padding-top: 16px;
+
+    igx-input-group,
+    igx-date-picker {
+        --ig-size: var(--ig-size-small);
+    }
 }
 
 .gridSample__filter {
diff --git a/src/app/tree-grid/tree-grid-group-by-load-on-demand-sample/tree-grid-group-by-load-on-demand-sample.component.html b/src/app/tree-grid/tree-grid-group-by-load-on-demand-sample/tree-grid-group-by-load-on-demand-sample.component.html
index 9337eae965..d44b6c7bf4 100644
--- a/src/app/tree-grid/tree-grid-group-by-load-on-demand-sample/tree-grid-group-by-load-on-demand-sample.component.html
+++ b/src/app/tree-grid/tree-grid-group-by-load-on-demand-sample/tree-grid-group-by-load-on-demand-sample.component.html
@@ -7,8 +7,7 @@
         [hasChildrenKey]="hasChildrenKey"
         width="100%"
         height="800px"
-        [autoGenerate]='false'
-        displayDensity='compact'
+        [autoGenerate]="false"
         hiddenColumnsText="Hidden">
 
         <igx-tree-grid-group-by-area
diff --git a/src/app/tree-grid/tree-grid-pager-sample/tree-grid-pager-sample.component.html b/src/app/tree-grid/tree-grid-pager-sample/tree-grid-pager-sample.component.html
index fc63c11cad..81bf26d5d9 100644
--- a/src/app/tree-grid/tree-grid-pager-sample/tree-grid-pager-sample.component.html
+++ b/src/app/tree-grid/tree-grid-pager-sample/tree-grid-pager-sample.component.html
@@ -1,7 +1,7 @@
 <div class="grid__wrapper">
     <igx-tree-grid [igxPreventDocumentScroll]="true" #treegrid1 [data]="data" height="500px" width="100%" primaryKey="ID" foreignKey="ParentID">
         <igx-paginator #paginator [(page)]="treegrid1.page" [totalRecords]="treegrid1.totalRecords"
-            [perPage]="10" [selectOptions]="selectOptions" [displayDensity]="treegrid1.displayDensity">
+            [perPage]="10" [selectOptions]="selectOptions">
             <igx-paginator-content>
                 <igx-page-size *ngIf="!isDropdownHidden"></igx-page-size>
                 <igx-page-nav *ngIf="!isPagerHidden"></igx-page-nav>
@@ -32,14 +32,6 @@
 
 
     <div class="options-container">
-        <label>Display density:</label>
-        <div class="select-input">
-            <igx-select [(ngModel)]="treegrid1.displayDensity" [displayDensity]="'compact'">
-                <igx-select-item *ngFor="let density of densityOptions" [value]="density">
-                    {{ density }}
-                </igx-select-item>
-            </igx-select>
-        </div>
         <igx-switch [(ngModel)]="isDropdownHidden">Hide Dropdown</igx-switch>
         <igx-switch [(ngModel)]="isPagerHidden">Hide Pager</igx-switch>
     </div>
diff --git a/src/app/tree-grid/tree-grid-remote-paging-sample/tree-grid-remote-paging-sample.component.html b/src/app/tree-grid/tree-grid-remote-paging-sample/tree-grid-remote-paging-sample.component.html
index e90cf30181..a62a8ca921 100644
--- a/src/app/tree-grid/tree-grid-remote-paging-sample/tree-grid-remote-paging-sample.component.html
+++ b/src/app/tree-grid/tree-grid-remote-paging-sample/tree-grid-remote-paging-sample.component.html
@@ -15,7 +15,6 @@
             [totalRecords]="totalCount"
             [(perPage)]="perPage"
             [selectOptions]="selectOptions"
-            [displayDensity]="treeGrid.displayDensity"
             (pageChange)="paginate($event)">
             <igx-paginator-content>
                 <igx-page-size></igx-page-size>
diff --git a/src/app/tree-grid/tree-grid-sorting-sample/tree-grid-sorting-sample.component.html b/src/app/tree-grid/tree-grid-sorting-sample/tree-grid-sorting-sample.component.html
index dd0ed619af..d64ac4c571 100644
--- a/src/app/tree-grid/tree-grid-sorting-sample/tree-grid-sorting-sample.component.html
+++ b/src/app/tree-grid/tree-grid-sorting-sample/tree-grid-sorting-sample.component.html
@@ -13,7 +13,6 @@
                 <igx-simple-combo #comboItem
                     [data]="sortingTypes"
                     [displayKey]="'mode'"
-                    [displayDensity]="'compact'"
                     [(ngModel)]="sortingOptions"
                     (keydown)="handleSearchResults($event)">
                     <ng-template igxComboClearIcon></ng-template>
diff --git a/src/app/tree-grid/tree-grid-sorting-sample/tree-grid-sorting-sample.component.scss b/src/app/tree-grid/tree-grid-sorting-sample/tree-grid-sorting-sample.component.scss
index a3d6bb21dc..95986476b0 100644
--- a/src/app/tree-grid/tree-grid-sorting-sample/tree-grid-sorting-sample.component.scss
+++ b/src/app/tree-grid/tree-grid-sorting-sample/tree-grid-sorting-sample.component.scss
@@ -1,4 +1,5 @@
 .grid__wrapper {
+    --ig-size: var(--ig-size-small);
     margin: 0 16px;
     padding-top: 16px;
 }
diff --git a/src/app/tree-grid/tree-grid-validator-service-cross-field/tree-grid-validator-service-cross-field.component.scss b/src/app/tree-grid/tree-grid-validator-service-cross-field/tree-grid-validator-service-cross-field.component.scss
index 8880ad7026..1fc5dc4e1c 100644
--- a/src/app/tree-grid/tree-grid-validator-service-cross-field/tree-grid-validator-service-cross-field.component.scss
+++ b/src/app/tree-grid/tree-grid-validator-service-cross-field/tree-grid-validator-service-cross-field.component.scss
@@ -6,6 +6,6 @@
 .buttons-wrapper {
     display: flex;
     flex-direction: row;
-    justify-content: start;
+    justify-content: flex-start;
     padding: 10px 0;
 }
diff --git a/src/app/tree-grid/treegrid-allData-summary/treegrid-allData-summary.component.html b/src/app/tree-grid/treegrid-allData-summary/treegrid-allData-summary.component.html
index 5173dafd2b..0395822d79 100644
--- a/src/app/tree-grid/treegrid-allData-summary/treegrid-allData-summary.component.html
+++ b/src/app/tree-grid/treegrid-allData-summary/treegrid-allData-summary.component.html
@@ -1,7 +1,7 @@
 <div class="grid__wrapper">
     <div class="sample-wrapper">
         <igx-tree-grid [igxPreventDocumentScroll]="true" #treeGrid [data]="data" cellSelection="single" primaryKey="ID"
-            foreignKey="ParentID" height="620px" width="100%" [displayDensity]="'compact'">
+            foreignKey="ParentID" height="620px" width="100%">
             <igx-column field="Name"></igx-column>
             <igx-column field="Age" width="15%" ></igx-column>
             <igx-column field="Title" [hasSummary]="true" [summaries]="ptoSummary"></igx-column>
diff --git a/src/app/tree-grid/treegrid-allData-summary/treegrid-allData-summary.component.scss b/src/app/tree-grid/treegrid-allData-summary/treegrid-allData-summary.component.scss
index 87f7ee10d3..77f596d45b 100644
--- a/src/app/tree-grid/treegrid-allData-summary/treegrid-allData-summary.component.scss
+++ b/src/app/tree-grid/treegrid-allData-summary/treegrid-allData-summary.component.scss
@@ -1,3 +1,4 @@
 .grid__wrapper{
+    --ig-size: var(--ig-size-small);
     padding: 16px;
-}
\ No newline at end of file
+}
diff --git a/src/app/tree-grid/treegrid-summary-template/treegrid-summary-template.component.html b/src/app/tree-grid/treegrid-summary-template/treegrid-summary-template.component.html
index 7971df85bd..1fe77cd3b2 100644
--- a/src/app/tree-grid/treegrid-summary-template/treegrid-summary-template.component.html
+++ b/src/app/tree-grid/treegrid-summary-template/treegrid-summary-template.component.html
@@ -5,13 +5,11 @@
             <input igxInput id="height" name="height" type="number" [(ngModel)]="summaryHeight">
         </igx-input-group>
         <igx-switch [(ngModel)]="hasSummary">Toggle Summaries</igx-switch>
-        <igx-buttongroup [values]="displayDensities" (selected)="selectDensity($event)" [displayDensity]="displayDensity">
-        </igx-buttongroup>
+        <igx-buttongroup [values]="sizes" (selected)="selectSize($event)"></igx-buttongroup>
     </div>
 
     <igx-tree-grid [igxPreventDocumentScroll]="true" #treeGrid [data]="data" cellSelection="single" primaryKey="ID"
-        foreignKey="ParentID" height="520px" width="100%" [summaryRowHeight]="summaryHeight"
-        [displayDensity]="displayDensity">
+        foreignKey="ParentID" height="520px" width="100%" [summaryRowHeight]="summaryHeight">
         <igx-column field="Name"></igx-column>
         <igx-column field="Age" dataType="number" width="15%" [hasSummary]="hasSummary">
             <ng-template igxSummary let-summaryResults>
diff --git a/src/app/tree-grid/treegrid-summary-template/treegrid-summary-template.component.ts b/src/app/tree-grid/treegrid-summary-template/treegrid-summary-template.component.ts
index 67de9d9793..17aa9497d8 100644
--- a/src/app/tree-grid/treegrid-summary-template/treegrid-summary-template.component.ts
+++ b/src/app/tree-grid/treegrid-summary-template/treegrid-summary-template.component.ts
@@ -1,5 +1,5 @@
-import { Component, OnInit } from '@angular/core';
-import { DisplayDensity, IgxSummaryOperand, IgxSummaryResult } from 'igniteui-angular';
+import { Component, HostBinding, OnInit } from '@angular/core';
+import { IgxSummaryOperand, IgxSummaryResult } from 'igniteui-angular';
 import { generateEmployeeFlatData } from '../data/employees-flat';
 
 class PTOSummary {
@@ -48,8 +48,8 @@ export class TreeGridSummaryTemplateComponent implements OnInit {
     public d;
     public ptoSummary = PTOSummary;
     public summaryHeight = 150;
-    public displayDensity: DisplayDensity = 'cosy';
-    public displayDensities;
+    public size = 'medium';
+    public sizes;
     public hasSummary = true;
 
     constructor() { }
@@ -57,14 +57,19 @@ export class TreeGridSummaryTemplateComponent implements OnInit {
     public ngOnInit(): void {
         this.data = generateEmployeeFlatData();
         this.data.forEach(rec => rec.Title = rec.Title.includes('Localiza') ? 'Software Developer' : rec.Title);
-        this.displayDensities = [
-            { label: 'compact', selected: this.displayDensity === 'compact', togglable: true },
-            { label: 'cosy', selected: this.displayDensity === 'cosy', togglable: true },
-            { label: 'comfortable', selected: this.displayDensity === 'comfortable', togglable: true }
+        this.sizes = [
+            { label: 'small', selected: this.size === 'small', togglable: true },
+            { label: 'medium', selected: this.size === 'medium', togglable: true },
+            { label: 'large', selected: this.size === 'large', togglable: true }
         ];
     }
 
-    public selectDensity(event): void {
-        this.displayDensity = this.displayDensities[event.index].label;
+    @HostBinding('style.--ig-size')
+    protected get sizeStyle() {
+        return `var(--ig-size-${this.size})`;
+    }
+
+    public selectSize(event): void {
+        this.size = this.sizes[event.index].label;
     }
 }

From 4714098806f4908adf7a45e16cf417510e280af1 Mon Sep 17 00:00:00 2001
From: Simeon Simeonoff <sim.simeonoff@gmail.com>
Date: Tue, 12 Sep 2023 17:00:15 +0300
Subject: [PATCH 3/9] refactor(*): uncomment previously commented lines

---
 .../grid-search-sample.component.html              | 14 +++++++-------
 .../tree-grid-search-sample.component.html         | 14 +++++++-------
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/app/grid/grid-search-sample/grid-search-sample.component.html b/src/app/grid/grid-search-sample/grid-search-sample.component.html
index c5b561bbe8..11637f1aea 100644
--- a/src/app/grid/grid-search-sample/grid-search-sample.component.html
+++ b/src/app/grid/grid-search-sample/grid-search-sample.component.html
@@ -10,13 +10,13 @@
 
         <igx-suffix *ngIf="searchText.length > 0">
             <div class="resultsText" *ngIf="grid.lastSearchInfo">
-                <!-- <span *ngIf="grid.lastSearchInfo.matchInfoCache.length > 0"> -->
-                <!--     {{ grid.lastSearchInfo.activeMatchIndex + 1 }} of {{ grid.lastSearchInfo.matchInfoCache.length }} -->
-                <!--     results -->
-                <!-- </span> -->
-                <!-- <span *ngIf="grid.lastSearchInfo.matchInfoCache.length === 0"> -->
-                <!--     No results -->
-                <!-- </span> -->
+                <span *ngIf="grid.lastSearchInfo.matchInfoCache.length > 0">
+                    {{ grid.lastSearchInfo.activeMatchIndex + 1 }} of {{ grid.lastSearchInfo.matchInfoCache.length }}
+                    results
+                </span>
+                <span *ngIf="grid.lastSearchInfo.matchInfoCache.length === 0">
+                    No results
+                </span>
             </div>
             <div class="chips">
                 <igx-chips-area>
diff --git a/src/app/tree-grid/tree-grid-search-sample/tree-grid-search-sample.component.html b/src/app/tree-grid/tree-grid-search-sample/tree-grid-search-sample.component.html
index c35577a8c6..abe4f59b6b 100644
--- a/src/app/tree-grid/tree-grid-search-sample/tree-grid-search-sample.component.html
+++ b/src/app/tree-grid/tree-grid-search-sample/tree-grid-search-sample.component.html
@@ -10,13 +10,13 @@
 
         <igx-suffix *ngIf="searchText.length > 0">
             <div class="resultsText" *ngIf="treeGrid.lastSearchInfo">
-                <!-- <span *ngIf="treeGrid.lastSearchInfo.matchInfoCache.length > 0"> -->
-                <!--     {{ treeGrid.lastSearchInfo.activeMatchIndex + 1 }} of {{ treeGrid.lastSearchInfo.matchInfoCache.length }} -->
-                <!--     results -->
-                <!-- </span> -->
-                <!-- <span *ngIf="treeGrid.lastSearchInfo.matchInfoCache.length === 0"> -->
-                <!--     No results -->
-                <!-- </span> -->
+                <span *ngIf="treeGrid.lastSearchInfo.matchInfoCache.length > 0">
+                    {{ treeGrid.lastSearchInfo.activeMatchIndex + 1 }} of {{ treeGrid.lastSearchInfo.matchInfoCache.length }}
+                    results
+                </span>
+                <span *ngIf="treeGrid.lastSearchInfo.matchInfoCache.length === 0">
+                    No results
+                </span>
             </div>
             <div class="chips">
                 <igx-chips-area>

From 779bed3263053a4541730ee50ee1ccf1ebd35a6d Mon Sep 17 00:00:00 2001
From: Simeon Simeonoff <sim.simeonoff@gmail.com>
Date: Wed, 13 Sep 2023 11:51:37 +0300
Subject: [PATCH 4/9] fix(crm): update avatar and input size

---
 projects/app-crm/src/app/grid-crm/grid-crm.component.scss | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/projects/app-crm/src/app/grid-crm/grid-crm.component.scss b/projects/app-crm/src/app/grid-crm/grid-crm.component.scss
index 77ac0e95f9..421a6bb545 100644
--- a/projects/app-crm/src/app/grid-crm/grid-crm.component.scss
+++ b/projects/app-crm/src/app/grid-crm/grid-crm.component.scss
@@ -47,7 +47,8 @@
 
 	$crm-input-drop-down: input-group-theme(
         $placeholder-color: color($light-palette, 'gray', 500),
-        $idle-text-color: color($light-palette, 'gray', 900)
+        $idle-text-color: color($light-palette, 'gray', 900),
+        $size: sizable(rem(24px), rem(32px), rem(40px))
     );
 
     input-group[type="search"] {
@@ -64,6 +65,8 @@
 	}
 
 	.avatar-cell {
+        --ig-size: var(--ig-size-small);
+
 		width: 100%;
 		display: flex;
 		justify-content: center;
@@ -202,10 +205,8 @@
 		box-shadow: none;
 	}
 
-
     @include css-vars($crm-input-drop-down);
 
-
 	.sample-flex-container {
 		.igx-input-group,
 		.igx-input-group--focused {

From be5aa9b847fa648d13a58b9650d5443a9500cead Mon Sep 17 00:00:00 2001
From: Simeon Simeonoff <sim.simeonoff@gmail.com>
Date: Thu, 14 Sep 2023 14:33:58 +0300
Subject: [PATCH 5/9] deps(theming): bump to latest version

---
 package-lock.json | 30 +++++++++++++++++++++++-------
 package.json      |  4 ++--
 2 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 0a596f6420..0ecb4ecfd8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -38,7 +38,6 @@
         "igniteui-angular-i18n": "^16.0.16",
         "igniteui-dockmanager": "^1.13.0",
         "igniteui-live-editing": "^2.0.9",
-        "igniteui-theming": "^2.1.1",
         "igniteui-webcomponents": "^4.3.1",
         "minireset.css": "0.0.6",
         "rxjs": "^6.6.7",
@@ -69,6 +68,7 @@
         "event-stream": "^4.0.1",
         "fs-extra": "^8.1.0",
         "gulp": "^4.0.2",
+        "igniteui-theming": "^3.0.3",
         "jasmine-core": "~4.2.0",
         "karma": "^6.4.2",
         "karma-chrome-launcher": "~3.2.0",
@@ -11979,6 +11979,14 @@
       "resolved": "https://registry.npmjs.org/@igniteui/material-icons-extended/-/material-icons-extended-2.11.0.tgz",
       "integrity": "sha512-lhNBCsFqYWowhrfuhqFx/gfX8G6hGOLNSaDZju7OaDuGyIc9Nsu8/qmZrkoVe1IVKet3Hr09k92Vq4zo3iSxHA=="
     },
+    "node_modules/igniteui-angular/node_modules/igniteui-theming": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-2.1.1.tgz",
+      "integrity": "sha512-rIkq4PkeYoiXmEmz2A4XdRqGAgjF+kTjrQfc6/RcUWwnxvss+m9/hTynEmtpf3b3OLSQHpUDyDh2JJTsdHQoJg==",
+      "peerDependencies": {
+        "sass": "^1.58.1"
+      }
+    },
     "node_modules/igniteui-angular/node_modules/igniteui-trial-watermark": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/igniteui-trial-watermark/-/igniteui-trial-watermark-1.0.3.tgz",
@@ -12003,9 +12011,10 @@
       "integrity": "sha512-sALkIwmLLcafKB1X1ymWRRykXUC7W8ec+7YJe4lnSNzBr7eMFX3uOXFRka/XBriad7DCkJGX98VIQNwTNUbkrQ=="
     },
     "node_modules/igniteui-theming": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-2.1.1.tgz",
-      "integrity": "sha512-rIkq4PkeYoiXmEmz2A4XdRqGAgjF+kTjrQfc6/RcUWwnxvss+m9/hTynEmtpf3b3OLSQHpUDyDh2JJTsdHQoJg==",
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-3.0.3.tgz",
+      "integrity": "sha512-ZYRn5kFq18nD7ZUX8yjasSmgBS7I7QrBGz5p9XWh6LtPoh0p8AVcO74cY8Et0O7h+LbOfzs2tOLWbGfMkNFYoQ==",
+      "dev": true,
       "peerDependencies": {
         "sass": "^1.58.1"
       }
@@ -29281,6 +29290,12 @@
           "resolved": "https://registry.npmjs.org/@igniteui/material-icons-extended/-/material-icons-extended-2.11.0.tgz",
           "integrity": "sha512-lhNBCsFqYWowhrfuhqFx/gfX8G6hGOLNSaDZju7OaDuGyIc9Nsu8/qmZrkoVe1IVKet3Hr09k92Vq4zo3iSxHA=="
         },
+        "igniteui-theming": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-2.1.1.tgz",
+          "integrity": "sha512-rIkq4PkeYoiXmEmz2A4XdRqGAgjF+kTjrQfc6/RcUWwnxvss+m9/hTynEmtpf3b3OLSQHpUDyDh2JJTsdHQoJg==",
+          "requires": {}
+        },
         "igniteui-trial-watermark": {
           "version": "1.0.3",
           "resolved": "https://registry.npmjs.org/igniteui-trial-watermark/-/igniteui-trial-watermark-1.0.3.tgz",
@@ -29338,9 +29353,10 @@
       "integrity": "sha512-sALkIwmLLcafKB1X1ymWRRykXUC7W8ec+7YJe4lnSNzBr7eMFX3uOXFRka/XBriad7DCkJGX98VIQNwTNUbkrQ=="
     },
     "igniteui-theming": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-2.1.1.tgz",
-      "integrity": "sha512-rIkq4PkeYoiXmEmz2A4XdRqGAgjF+kTjrQfc6/RcUWwnxvss+m9/hTynEmtpf3b3OLSQHpUDyDh2JJTsdHQoJg==",
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-3.0.3.tgz",
+      "integrity": "sha512-ZYRn5kFq18nD7ZUX8yjasSmgBS7I7QrBGz5p9XWh6LtPoh0p8AVcO74cY8Et0O7h+LbOfzs2tOLWbGfMkNFYoQ==",
+      "dev": true,
       "requires": {}
     },
     "igniteui-trial-watermark": {
diff --git a/package.json b/package.json
index f8eb4f5afe..c61f26fd7c 100644
--- a/package.json
+++ b/package.json
@@ -72,7 +72,6 @@
     "igniteui-angular-i18n": "^16.0.16",
     "igniteui-dockmanager": "^1.13.0",
     "igniteui-live-editing": "^2.0.9",
-    "igniteui-theming": "^2.1.1",
     "igniteui-webcomponents": "^4.3.1",
     "minireset.css": "0.0.6",
     "rxjs": "^6.6.7",
@@ -103,6 +102,7 @@
     "event-stream": "^4.0.1",
     "fs-extra": "^8.1.0",
     "gulp": "^4.0.2",
+    "igniteui-theming": "^3.0.3",
     "jasmine-core": "~4.2.0",
     "karma": "^6.4.2",
     "karma-chrome-launcher": "~3.2.0",
@@ -112,4 +112,4 @@
     "typescript": "4.9.5",
     "webpack-bundle-analyzer": "^4.5.0"
   }
-}
\ No newline at end of file
+}

From aa604daa9f63d139253d8c38a90fd99ef5f10aeb Mon Sep 17 00:00:00 2001
From: lipata <nikolay.alipiev@gmail.com>
Date: Thu, 14 Sep 2023 14:59:16 +0300
Subject: [PATCH 6/9] chore(*): ng update igniteui-angular@16.1.0-beta.5

---
 package-lock.json                             | 48 +++++--------------
 package.json                                  |  4 +-
 .../stepper-linear-sample.component.html      |  2 +-
 .../stepper-styling-sample.component.html     |  6 +--
 4 files changed, 17 insertions(+), 43 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 0ecb4ecfd8..36b692a2b0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -31,7 +31,7 @@
         "bootstrap": "5.3.1",
         "file-saver": "^2.0.2",
         "hammerjs": "^2.0.8",
-        "igniteui-angular": "^16.0.17",
+        "igniteui-angular": "^16.1.0-beta.5",
         "igniteui-angular-charts": "^16.1.1",
         "igniteui-angular-core": "^16.1.1",
         "igniteui-angular-extras": "^16.0.3",
@@ -11905,15 +11905,15 @@
       ]
     },
     "node_modules/igniteui-angular": {
-      "version": "16.0.17",
-      "resolved": "https://registry.npmjs.org/igniteui-angular/-/igniteui-angular-16.0.17.tgz",
-      "integrity": "sha512-q1kg5z0aqg7uVObesbHTxea9ofsc5BVdCiC7GjlhMMYrYVKY5cCAM4pfkcXX5Xh80wUXYR6qUtpodYx4dM2pqA==",
+      "version": "16.1.0-beta.5",
+      "resolved": "https://registry.npmjs.org/igniteui-angular/-/igniteui-angular-16.1.0-beta.5.tgz",
+      "integrity": "sha512-7kGwmrjmpJWfuAIEEXr6EhmvyfwktP/QE5qz6nLEGqF+53Y5WTxh2nRvdXV0b6Za84rL0sjo37MroZRlKmr4aQ==",
       "dependencies": {
-        "@igniteui/material-icons-extended": "^2.10.0",
+        "@igniteui/material-icons-extended": "^3.0.0",
         "@types/hammerjs": "^2.0.40",
         "fflate": "^0.7.3",
         "hammerjs": "^2.0.8",
-        "igniteui-theming": "^2.0.0",
+        "igniteui-theming": "^3.0.3",
         "igniteui-trial-watermark": "^1.0.3",
         "lodash-es": "^4.17.21",
         "tslib": "^2.3.0",
@@ -11974,19 +11974,6 @@
       "resolved": "https://registry.npmjs.org/igniteui-angular-i18n/-/igniteui-angular-i18n-16.0.16.tgz",
       "integrity": "sha512-OOENfkT+3Fll+HMl5/UXFYhJX17/vIlXtjFnUo5LZa04ZgeHNbU/urB4hL45ErkOOYvlclEJuceaNfwg1Yws2A=="
     },
-    "node_modules/igniteui-angular/node_modules/@igniteui/material-icons-extended": {
-      "version": "2.11.0",
-      "resolved": "https://registry.npmjs.org/@igniteui/material-icons-extended/-/material-icons-extended-2.11.0.tgz",
-      "integrity": "sha512-lhNBCsFqYWowhrfuhqFx/gfX8G6hGOLNSaDZju7OaDuGyIc9Nsu8/qmZrkoVe1IVKet3Hr09k92Vq4zo3iSxHA=="
-    },
-    "node_modules/igniteui-angular/node_modules/igniteui-theming": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-2.1.1.tgz",
-      "integrity": "sha512-rIkq4PkeYoiXmEmz2A4XdRqGAgjF+kTjrQfc6/RcUWwnxvss+m9/hTynEmtpf3b3OLSQHpUDyDh2JJTsdHQoJg==",
-      "peerDependencies": {
-        "sass": "^1.58.1"
-      }
-    },
     "node_modules/igniteui-angular/node_modules/igniteui-trial-watermark": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/igniteui-trial-watermark/-/igniteui-trial-watermark-1.0.3.tgz",
@@ -12014,7 +12001,6 @@
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-3.0.3.tgz",
       "integrity": "sha512-ZYRn5kFq18nD7ZUX8yjasSmgBS7I7QrBGz5p9XWh6LtPoh0p8AVcO74cY8Et0O7h+LbOfzs2tOLWbGfMkNFYoQ==",
-      "dev": true,
       "peerDependencies": {
         "sass": "^1.58.1"
       }
@@ -29270,32 +29256,21 @@
       "dev": true
     },
     "igniteui-angular": {
-      "version": "16.0.17",
-      "resolved": "https://registry.npmjs.org/igniteui-angular/-/igniteui-angular-16.0.17.tgz",
-      "integrity": "sha512-q1kg5z0aqg7uVObesbHTxea9ofsc5BVdCiC7GjlhMMYrYVKY5cCAM4pfkcXX5Xh80wUXYR6qUtpodYx4dM2pqA==",
+      "version": "16.1.0-beta.5",
+      "resolved": "https://registry.npmjs.org/igniteui-angular/-/igniteui-angular-16.1.0-beta.5.tgz",
+      "integrity": "sha512-7kGwmrjmpJWfuAIEEXr6EhmvyfwktP/QE5qz6nLEGqF+53Y5WTxh2nRvdXV0b6Za84rL0sjo37MroZRlKmr4aQ==",
       "requires": {
-        "@igniteui/material-icons-extended": "^2.10.0",
+        "@igniteui/material-icons-extended": "^3.0.0",
         "@types/hammerjs": "^2.0.40",
         "fflate": "^0.7.3",
         "hammerjs": "^2.0.8",
-        "igniteui-theming": "^2.0.0",
+        "igniteui-theming": "^3.0.3",
         "igniteui-trial-watermark": "^1.0.3",
         "lodash-es": "^4.17.21",
         "tslib": "^2.3.0",
         "uuid": "^9.0.0"
       },
       "dependencies": {
-        "@igniteui/material-icons-extended": {
-          "version": "2.11.0",
-          "resolved": "https://registry.npmjs.org/@igniteui/material-icons-extended/-/material-icons-extended-2.11.0.tgz",
-          "integrity": "sha512-lhNBCsFqYWowhrfuhqFx/gfX8G6hGOLNSaDZju7OaDuGyIc9Nsu8/qmZrkoVe1IVKet3Hr09k92Vq4zo3iSxHA=="
-        },
-        "igniteui-theming": {
-          "version": "2.1.1",
-          "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-2.1.1.tgz",
-          "integrity": "sha512-rIkq4PkeYoiXmEmz2A4XdRqGAgjF+kTjrQfc6/RcUWwnxvss+m9/hTynEmtpf3b3OLSQHpUDyDh2JJTsdHQoJg==",
-          "requires": {}
-        },
         "igniteui-trial-watermark": {
           "version": "1.0.3",
           "resolved": "https://registry.npmjs.org/igniteui-trial-watermark/-/igniteui-trial-watermark-1.0.3.tgz",
@@ -29356,7 +29331,6 @@
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-3.0.3.tgz",
       "integrity": "sha512-ZYRn5kFq18nD7ZUX8yjasSmgBS7I7QrBGz5p9XWh6LtPoh0p8AVcO74cY8Et0O7h+LbOfzs2tOLWbGfMkNFYoQ==",
-      "dev": true,
       "requires": {}
     },
     "igniteui-trial-watermark": {
diff --git a/package.json b/package.json
index c61f26fd7c..0727e341e3 100644
--- a/package.json
+++ b/package.json
@@ -65,7 +65,7 @@
     "bootstrap": "5.3.1",
     "file-saver": "^2.0.2",
     "hammerjs": "^2.0.8",
-    "igniteui-angular": "^16.0.17",
+    "igniteui-angular": "^16.1.0-beta.5",
     "igniteui-angular-charts": "^16.1.1",
     "igniteui-angular-core": "^16.1.1",
     "igniteui-angular-extras": "^16.0.3",
@@ -112,4 +112,4 @@
     "typescript": "4.9.5",
     "webpack-bundle-analyzer": "^4.5.0"
   }
-}
+}
\ No newline at end of file
diff --git a/src/app/layouts/stepper/stepper-linear-sample/stepper-linear-sample.component.html b/src/app/layouts/stepper/stepper-linear-sample/stepper-linear-sample.component.html
index 1487d6dbcd..4a9ade4515 100644
--- a/src/app/layouts/stepper/stepper-linear-sample/stepper-linear-sample.component.html
+++ b/src/app/layouts/stepper/stepper-linear-sample/stepper-linear-sample.component.html
@@ -52,7 +52,7 @@
 
     <igx-step #step3 [optional]="true">
         <span igxStepTitle>Billing address</span>
-        <span igxStepSubTitle>(optional)</span>
+        <span igxStepSubtitle>(optional)</span>
         <div igxStepContent>
             <form #form3="ngForm">
                 <igx-input-group>
diff --git a/src/app/layouts/stepper/stepper-styling-sample/stepper-styling-sample.component.html b/src/app/layouts/stepper/stepper-styling-sample/stepper-styling-sample.component.html
index c314f617c4..bfc7c9e159 100644
--- a/src/app/layouts/stepper/stepper-styling-sample/stepper-styling-sample.component.html
+++ b/src/app/layouts/stepper/stepper-styling-sample/stepper-styling-sample.component.html
@@ -7,7 +7,7 @@
     </ng-template>
     <igx-step>
         <span igxStepTitle>Order</span>
-        <span igxStepSubTitle>required</span>
+        <span igxStepSubtitle>required</span>
         <div igxStepContent>
             <div class="sample-step-actions">
                 <button igxButton="raised" (click)="stepper.next()">NEXT</button>
@@ -16,7 +16,7 @@
     </igx-step>
     <igx-step>
         <span igxStepTitle>Payment</span>
-        <span igxStepSubTitle>Optional</span>
+        <span igxStepSubtitle>Optional</span>
         <div igxStepContent>
             <div class="sample-step-actions">
                 <button igxButton="raised" (click)="stepper.prev()">PREVIOUS</button>
@@ -26,7 +26,7 @@
     </igx-step>
     <igx-step>
         <span igxStepTitle>Confirmation</span>
-        <span igxStepSubTitle>required</span>
+        <span igxStepSubtitle>required</span>
         <div igxStepContent>
             <div class="sample-step-actions">
                 <button igxButton="raised" (click)="stepper.prev()">PREVIOUS</button>

From 6d02263954bd923348283c4be1f8e7e7f93393f3 Mon Sep 17 00:00:00 2001
From: Simeon Simeonoff <sim.simeonoff@gmail.com>
Date: Thu, 14 Sep 2023 15:26:43 +0300
Subject: [PATCH 7/9] refactor(lob): update boston maraton sample

---
 .../src/app/grid/grid-boston-marathon/grid.component.scss     | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/projects/app-lob/src/app/grid/grid-boston-marathon/grid.component.scss b/projects/app-lob/src/app/grid/grid-boston-marathon/grid.component.scss
index 26c8e34f08..9ab2910e53 100644
--- a/projects/app-lob/src/app/grid/grid-boston-marathon/grid.component.scss
+++ b/projects/app-lob/src/app/grid/grid-boston-marathon/grid.component.scss
@@ -31,6 +31,10 @@ igx-grid {
     --ig-size: var(--ig-size-medium);
 }
 
+igx-avatar {
+    --ig-size: var(--ig-size-small);
+}
+
 :host {
     ::ng-deep {
         .igx-paginator > * {

From 7a3b4631c18bc5c1cffa6e91aec29ba4dea87c3a Mon Sep 17 00:00:00 2001
From: lipata <nikolay.alipiev@gmail.com>
Date: Fri, 15 Sep 2023 15:06:13 +0300
Subject: [PATCH 8/9] chore(*): force install of igniteui-angular-extras

---
 .github/workflows/build-app-crm.yml | 2 +-
 .github/workflows/build-app-lob.yml | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/build-app-crm.yml b/.github/workflows/build-app-crm.yml
index 9f4c64fd31..16b98a7737 100644
--- a/.github/workflows/build-app-crm.yml
+++ b/.github/workflows/build-app-crm.yml
@@ -49,7 +49,7 @@ jobs:
         run: npm config set ${{secrets.IG_SCOPE}}:_auth=${{secrets.IG_TOKEN}}
 
       - name: Install dependencies
-        run: npm ci
+        run: npm ci --force
 
       - name: Run lint
         run: npm run lint
diff --git a/.github/workflows/build-app-lob.yml b/.github/workflows/build-app-lob.yml
index 332b1072d1..f3e2744ba6 100644
--- a/.github/workflows/build-app-lob.yml
+++ b/.github/workflows/build-app-lob.yml
@@ -54,7 +54,7 @@ jobs:
         run: npm config set ${{secrets.IG_SCOPE}}:_auth=${{secrets.IG_TOKEN}}
 
       - name: Install dependencies
-        run: npm ci
+        run: npm ci --force
 
       - name: Run lint
         run: npm run lint

From 2d056ecc7adc15bded8d6736728559c28311f6c5 Mon Sep 17 00:00:00 2001
From: lipata <nikolay.alipiev@gmail.com>
Date: Fri, 15 Sep 2023 16:16:34 +0300
Subject: [PATCH 9/9] chore(*): use fixed extras pkg & remove --force

---
 .github/workflows/build-app-crm.yml |  2 +-
 .github/workflows/build-app-lob.yml |  2 +-
 package-lock.json                   | 16 ++++++++--------
 package.json                        |  4 ++--
 4 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/.github/workflows/build-app-crm.yml b/.github/workflows/build-app-crm.yml
index 16b98a7737..9f4c64fd31 100644
--- a/.github/workflows/build-app-crm.yml
+++ b/.github/workflows/build-app-crm.yml
@@ -49,7 +49,7 @@ jobs:
         run: npm config set ${{secrets.IG_SCOPE}}:_auth=${{secrets.IG_TOKEN}}
 
       - name: Install dependencies
-        run: npm ci --force
+        run: npm ci
 
       - name: Run lint
         run: npm run lint
diff --git a/.github/workflows/build-app-lob.yml b/.github/workflows/build-app-lob.yml
index f3e2744ba6..332b1072d1 100644
--- a/.github/workflows/build-app-lob.yml
+++ b/.github/workflows/build-app-lob.yml
@@ -54,7 +54,7 @@ jobs:
         run: npm config set ${{secrets.IG_SCOPE}}:_auth=${{secrets.IG_TOKEN}}
 
       - name: Install dependencies
-        run: npm ci --force
+        run: npm ci
 
       - name: Run lint
         run: npm run lint
diff --git a/package-lock.json b/package-lock.json
index 36b692a2b0..4114812516 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -34,7 +34,7 @@
         "igniteui-angular": "^16.1.0-beta.5",
         "igniteui-angular-charts": "^16.1.1",
         "igniteui-angular-core": "^16.1.1",
-        "igniteui-angular-extras": "^16.0.3",
+        "igniteui-angular-extras": "^16.1.0",
         "igniteui-angular-i18n": "^16.0.16",
         "igniteui-dockmanager": "^1.13.0",
         "igniteui-live-editing": "^2.0.9",
@@ -11954,16 +11954,16 @@
       }
     },
     "node_modules/igniteui-angular-extras": {
-      "version": "16.0.3",
-      "resolved": "https://registry.npmjs.org/igniteui-angular-extras/-/igniteui-angular-extras-16.0.3.tgz",
-      "integrity": "sha512-i8dCrrj9X2TpR8d8waFUe1YTSFqjQ45buFTR2MNnecsXJ688IZsgF8QCuxuuNPO1gNrc4nlHoG2D8iHVfPxDHw==",
+      "version": "16.1.0",
+      "resolved": "https://registry.npmjs.org/igniteui-angular-extras/-/igniteui-angular-extras-16.1.0.tgz",
+      "integrity": "sha512-+/LlYD6VhWgULtlTpKg7lfkLriduNS8CWYCTkphX/ET22k1mN/lSZXn5dsyRlDznu+QFteFhvv3hnkjMXNJrgg==",
       "dependencies": {
         "tslib": "^2.0.0"
       },
       "peerDependencies": {
         "@angular/common": "^16.0.0",
         "@angular/core": "^16.0.0",
-        "igniteui-angular": "^16.0.3",
+        "igniteui-angular": "^16.1.0-beta.5",
         "igniteui-angular-charts": "^16.0.0",
         "igniteui-angular-core": "^16.0.0",
         "igniteui-trial-watermark": "^2.0.0"
@@ -29295,9 +29295,9 @@
       }
     },
     "igniteui-angular-extras": {
-      "version": "16.0.3",
-      "resolved": "https://registry.npmjs.org/igniteui-angular-extras/-/igniteui-angular-extras-16.0.3.tgz",
-      "integrity": "sha512-i8dCrrj9X2TpR8d8waFUe1YTSFqjQ45buFTR2MNnecsXJ688IZsgF8QCuxuuNPO1gNrc4nlHoG2D8iHVfPxDHw==",
+      "version": "16.1.0",
+      "resolved": "https://registry.npmjs.org/igniteui-angular-extras/-/igniteui-angular-extras-16.1.0.tgz",
+      "integrity": "sha512-+/LlYD6VhWgULtlTpKg7lfkLriduNS8CWYCTkphX/ET22k1mN/lSZXn5dsyRlDznu+QFteFhvv3hnkjMXNJrgg==",
       "requires": {
         "tslib": "^2.0.0"
       }
diff --git a/package.json b/package.json
index 0727e341e3..33132359ce 100644
--- a/package.json
+++ b/package.json
@@ -68,7 +68,7 @@
     "igniteui-angular": "^16.1.0-beta.5",
     "igniteui-angular-charts": "^16.1.1",
     "igniteui-angular-core": "^16.1.1",
-    "igniteui-angular-extras": "^16.0.3",
+    "igniteui-angular-extras": "^16.1.0",
     "igniteui-angular-i18n": "^16.0.16",
     "igniteui-dockmanager": "^1.13.0",
     "igniteui-live-editing": "^2.0.9",
@@ -112,4 +112,4 @@
     "typescript": "4.9.5",
     "webpack-bundle-analyzer": "^4.5.0"
   }
-}
\ No newline at end of file
+}