diff --git a/projects/igniteui-angular/src/lib/combo/combo.component.html b/projects/igniteui-angular/src/lib/combo/combo.component.html
index a64a4fbaf04..e2fc4d7a9fb 100644
--- a/projects/igniteui-angular/src/lib/combo/combo.component.html
+++ b/projects/igniteui-angular/src/lib/combo/combo.component.html
@@ -14,58 +14,58 @@
     {{ item[key] }}
 </ng-template>
 
-<div class="igx-combo" [style.width]="width" role="combobox" [attr.aria-expanded]="!dropdown.collapsed" aria-haspopup="listbox" [attr.aria-owns]="dropdown.id">
-    <igx-input-group [type]="type" (click)="onInputClick($event)">
-        <input igxInput #comboInput name="comboInput" type="text" [(ngModel)]="value" readonly [placeholder]="placeholder" [disabled]="disabled" (blur)="onBlur($event)"/>
-        <igx-suffix *ngIf="value.length" class="clearButton" aria-label="Clear Selection" igxRipple (click)="handleClearItems($event)">
-            <igx-icon fontSet="material">clear</igx-icon>
-        </igx-suffix>
-        <igx-suffix igxButton="icon" class="dropdownToggleButton" igxRipple>
-            <igx-icon *ngIf="dropdown.collapsed; else toggleUp" fontSet="material">arrow_drop_down</igx-icon>
-            <ng-template #toggleUp>
-                <igx-icon fontSet="material">arrow_drop_up</igx-icon>
-            </ng-template>
-        </igx-suffix>
+<igx-input-group [displayDensity]="displayDensity" [type]="type" (click)="onInputClick($event)">
+    <input igxInput #comboInput name="comboInput" type="text" [(ngModel)]="value" readonly [placeholder]="placeholder"
+        [disabled]="disabled" (blur)="onBlur($event)" />
+    <igx-suffix *ngIf="value.length" class="clearButton" aria-label="Clear Selection" igxRipple (click)="handleClearItems($event)">
+        <igx-icon fontSet="material">clear</igx-icon>
+    </igx-suffix>
+    <igx-suffix igxButton="icon" class="dropdownToggleButton" igxRipple>
+        <igx-icon *ngIf="dropdown.collapsed; else toggleUp" fontSet="material">arrow_drop_down</igx-icon>
+        <ng-template #toggleUp>
+            <igx-icon fontSet="material">arrow_drop_up</igx-icon>
+        </ng-template>
+    </igx-suffix>
+</igx-input-group>
+<igx-combo-drop-down #igxComboDropDown class="igx-combo__drop-down" [width]="itemsWidth || '100%'">
+    <igx-input-group [displayDensity]="displayDensity" class="igx-combo__search">
+        <input class="igx-combo-input" igxInput #searchInput name="searchInput" type="text" [(ngModel)]="searchValue"
+            (ngModelChange)="handleInputChange($event)" (keyup)="handleKeyUp($event)" (keydown)="handleKeyDown($event)"
+            (focus)="dropdown.onBlur($event)" [placeholder]="searchPlaceholder" aria-autocomplete="both"
+            [attr.aria-owns]="dropdown.id" [attr.aria-labelledby]="ariaLabelledBy" />
     </igx-input-group>
-    <igx-combo-drop-down #igxComboDropDown class="igx-combo__drop-down" [width]="itemsWidth || '100%'">
-        <igx-input-group class="igx-combo__search">
-            <input class="igx-combo-input" igxInput #searchInput name="searchInput" type="text" [(ngModel)]="searchValue" (ngModelChange)="handleInputChange($event)"
-                (keyup)="handleKeyUp($event)" (keydown)="handleKeyDown($event)" (focus)="dropdown.onBlur($event)" [placeholder]="searchPlaceholder" aria-autocomplete="both"
-                [attr.aria-owns]="dropdown.id" [attr.aria-labelledby]="ariaLabelledBy" />
-        </igx-input-group>
-        <ng-container *ngTemplateOutlet="headerTemplate; context: {$implicit: this}">
-        </ng-container>
-        <div #dropdownItemContainer class="igx-combo__content" [style.overflow]="'hidden'" [style.maxHeight.px]="itemsMaxHeight"
-            [igxDropDownItemNavigation]="dropdown" [tabindex]="dropdown.collapsed ? -1 : 0" role="listbox" [attr.id]="dropdown.id">
-            <ng-template igxFor let-item [igxForOf]="data | comboFiltering:filteringExpressions:filteringLogic | comboSorting:sortingExpressions | comboGrouping:groupKey"
-                [igxForScrollOrientation]="'vertical'" [igxForContainerSize]="itemsMaxHeight"
-                [igxForItemSize]="itemHeight" (onChunkPreload)="dataLoading($event)" #virtualScrollContainer>
-                <igx-combo-item [value]="item" isHeader={{item.isHeader}} role="option">
-                    <ng-container *ngIf="!item.isHeader">
-                        <igx-checkbox [checked]="isItemSelected(item)" disableRipple="true" disabled="true" class="igx-combo__checkbox"></igx-checkbox>
-                    </ng-container>
-                    <ng-container *ngIf="item.isHeader">
-                        <ng-container *ngTemplateOutlet="headerItemTemplate ? headerItemTemplate : headerItemBase; context: {$implicit: item, data: data, valueKey: valueKey, groupKey: groupKey, displayKey: displayKey}"></ng-container>
-                    </ng-container>
-                    <ng-container *ngIf="!item.isHeader">
-                        <ng-container #listItem *ngTemplateOutlet="template; context: {$implicit: item, data: data, valueKey: valueKey, displayKey: displayKey};"></ng-container>
-                    </ng-container>
-                </igx-combo-item>
-            </ng-template>
-        </div>
-        <div class="igx-combo__add" *ngIf="filteredData.length === 0 || isAddButtonVisible()">
-            <div class="igx-combo__empty" *ngIf="filteredData.length === 0">
-                <ng-container *ngTemplateOutlet="emptyTemplate ? emptyTemplate : empty; context: {$implicit: this}">
+    <ng-container *ngTemplateOutlet="headerTemplate; context: {$implicit: this}">
+    </ng-container>
+    <div #dropdownItemContainer class="igx-combo__content" [style.overflow]="'hidden'" [style.maxHeight.px]="itemsMaxHeight"
+        [igxDropDownItemNavigation]="dropdown" [tabindex]="dropdown.collapsed ? -1 : 0" role="listbox" [attr.id]="dropdown.id">
+        <ng-template igxFor let-item [igxForOf]="data | comboFiltering:filteringExpressions:filteringLogic | comboSorting:sortingExpressions | comboGrouping:groupKey"
+            [igxForScrollOrientation]="'vertical'" [igxForContainerSize]="itemsMaxHeight" [igxForItemSize]="itemHeight"
+            (onChunkPreload)="dataLoading($event)" #virtualScrollContainer>
+            <igx-combo-item [value]="item" isHeader={{item.isHeader}} role="option">
+                <ng-container *ngIf="!item.isHeader">
+                    <igx-checkbox [checked]="isItemSelected(item)" disableRipple="true" disabled="true" class="igx-combo__checkbox"></igx-checkbox>
+                </ng-container>
+                <ng-container *ngIf="item.isHeader">
+                    <ng-container *ngTemplateOutlet="headerItemTemplate ? headerItemTemplate : headerItemBase; context: {$implicit: item, data: data, valueKey: valueKey, groupKey: groupKey, displayKey: displayKey}"></ng-container>
                 </ng-container>
-            </div>
-            <igx-combo-item *ngIf="isAddButtonVisible()" [tabindex]="dropdown.collapsed ? -1 : customValueFlag ? 1 : -1" class="igx-combo__add-item"
-                    igxRipple (keypress)="addItemToCollection()" [isHeader]="false" [disabled]="false" [value]="'ADD ITEM'" role="button"
-                    aria-label="Add Item">
-                <ng-container *ngTemplateOutlet="addItemTemplate ? addItemTemplate : addItemDefault; context: {$implicit: this}">
+                <ng-container *ngIf="!item.isHeader">
+                    <ng-container #listItem *ngTemplateOutlet="template; context: {$implicit: item, data: data, valueKey: valueKey, displayKey: displayKey};"></ng-container>
                 </ng-container>
             </igx-combo-item>
+        </ng-template>
+    </div>
+    <div class="igx-combo__add" *ngIf="filteredData.length === 0 || isAddButtonVisible()">
+        <div class="igx-combo__empty" *ngIf="filteredData.length === 0">
+            <ng-container *ngTemplateOutlet="emptyTemplate ? emptyTemplate : empty; context: {$implicit: this}">
+            </ng-container>
         </div>
-        <ng-container *ngTemplateOutlet="footerTemplate; context: {$implicit: this}">
-        </ng-container>
-    </igx-combo-drop-down>
-</div>
+        <igx-combo-item *ngIf="isAddButtonVisible()" [tabindex]="dropdown.collapsed ? -1 : customValueFlag ? 1 : -1"
+            class="igx-combo__add-item" igxRipple (keypress)="addItemToCollection()" [isHeader]="false" [disabled]="false"
+            [value]="'ADD ITEM'" role="button" aria-label="Add Item">
+            <ng-container *ngTemplateOutlet="addItemTemplate ? addItemTemplate : addItemDefault; context: {$implicit: this}">
+            </ng-container>
+        </igx-combo-item>
+    </div>
+    <ng-container *ngTemplateOutlet="footerTemplate; context: {$implicit: this}">
+    </ng-container>
+</igx-combo-drop-down>
\ No newline at end of file
diff --git a/projects/igniteui-angular/src/lib/combo/combo.component.ts b/projects/igniteui-angular/src/lib/combo/combo.component.ts
index 9c371553801..b5bd231f1cc 100644
--- a/projects/igniteui-angular/src/lib/combo/combo.component.ts
+++ b/projects/igniteui-angular/src/lib/combo/combo.component.ts
@@ -35,6 +35,7 @@ import { IgxComboFilterConditionPipe, IgxComboFilteringPipe, IgxComboGroupingPip
 import { OverlaySettings, AbsoluteScrollStrategy } from '../services';
 import { Subscription } from 'rxjs';
 import { DeprecateProperty } from '../core/deprecateDecorators';
+import { DisplayDensityBase, DisplayDensityToken, IDisplayDensityOptions } from '../core/density';
 
 /** Custom strategy to provide the combo with callback on initial positioning */
 class ComboConnectedPositionStrategy extends ConnectedPositioningStrategy {
@@ -96,7 +97,7 @@ const noop = () => { };
     selector: 'igx-combo',
     templateUrl: 'combo.component.html'
 })
-export class IgxComboComponent implements AfterViewInit, ControlValueAccessor, OnInit, OnDestroy {
+export class IgxComboComponent extends DisplayDensityBase implements AfterViewInit, ControlValueAccessor, OnInit, OnDestroy {
     /**
      * @hidden
      */
@@ -168,7 +169,9 @@ export class IgxComboComponent implements AfterViewInit, ControlValueAccessor, O
         protected elementRef: ElementRef,
         protected cdr: ChangeDetectorRef,
         protected selection: IgxSelectionAPIService,
-        @Self() @Optional() public ngControl: NgControl) {
+        @Self() @Optional() public ngControl: NgControl,
+        @Optional() @Inject(DisplayDensityToken) protected _displayDensityOptions: IDisplayDensityOptions) {
+            super(_displayDensityOptions);
         if (this.ngControl) {
             // Note: we provide the value accessor through here, instead of
             // the `providers` to avoid running into a circular import.
@@ -522,6 +525,26 @@ export class IgxComboComponent implements AfterViewInit, ControlValueAccessor, O
         return this._valid === IgxComboState.INVALID;
     }
 
+    @HostBinding('class.igx-combo')
+    public cssClass = 'igx-combo'; // Independant of display density, at the time being
+
+    @HostBinding(`attr.role`)
+    public role = 'combobox';
+
+    @HostBinding('attr.aria-expanded')
+    public get ariaExpanded() {
+        return !this.dropdown.collapsed;
+    }
+
+    @HostBinding('attr.aria-haspopup')
+    public get hasPopUp() {
+        return 'listbox';
+    }
+
+    @HostBinding('attr.aria-owns')
+    public get ariaOwns() {
+        return this.dropdown.id;
+    }
     /**
      * Controls whether custom values can be added to the collection
      *
diff --git a/src/app/combo/combo.sample.html b/src/app/combo/combo.sample.html
index 3d57ce7a7ef..7a461c8b720 100644
--- a/src/app/combo/combo.sample.html
+++ b/src/app/combo/combo.sample.html
@@ -20,6 +20,7 @@
                             (onAddition)="handleAddition($event)"
                             [data]="items"
                             [allowCustomValues]="true"
+                            [displayDensity]="'comfortable'"
                             [filterable]="true" [displayKey]="valueKeyVar" [valueKey]="valueKeyVar"
                                 [groupKey]="valueKeyVar ? 'region' : ''" [width]="'100%'">
                     <ng-template *ngIf="currentDataType !== 'primitive'" #itemTemplate let-display let-key="valueKey">
@@ -61,6 +62,12 @@
                 </div>
             </ng-template>
         </div>
+        <div>
+            <h4>Display Density</h4>
+            <button igxButton="raised" [disabled]="igxCombo.isCompact()" (click)="setDensity('compact')">Compact</button>
+            <button igxButton="raised" [disabled]="igxCombo.isCosy()" (click)="setDensity('cosy')">Cosy</button>
+            <button igxButton="raised" [disabled]="!igxCombo.isCosy() && !igxCombo.isCompact()" (click)="setDensity('comfortable')">Comfortable</button>
+        </div>
     </section>
     </div>
 </div>
diff --git a/src/app/combo/combo.sample.ts b/src/app/combo/combo.sample.ts
index 4fdc699e818..ffe254313b8 100644
--- a/src/app/combo/combo.sample.ts
+++ b/src/app/combo/combo.sample.ts
@@ -121,4 +121,8 @@ export class ComboSampleComponent implements OnInit {
         this.igxCombo.itemTemplate = this.initialItemTemplate ? this.initialItemTemplate : this.customItemTemplate ;
         this.initialItemTemplate = comboTemplate;
     }
+
+    setDensity(density: string) {
+        this.igxCombo.displayDensity = density;
+    }
 }