From fe7e52a211419b20d0e591bb6f7e0b3b2cc97d63 Mon Sep 17 00:00:00 2001
From: Silvia Ivanova <59446295+SisIvanova@users.noreply.github.com>
Date: Thu, 15 Feb 2024 14:36:34 +0200
Subject: [PATCH] feat(icon-button): create component samples (#3412)

---
 .../configs/IconButtonConfigGenerator.ts      | 101 ++++++++++++++++++
 live-editing/generators/ConfigGenerators.ts   |   2 +
 projects/app-crm/src/app/app.module.ts        |   5 +-
 projects/app-lob/src/app/app.module.ts        |   5 +-
 .../app/grid-finjs/grid-finjs.component.html  |   2 +-
 src/app/data-display/data-display.module.ts   |   6 +-
 .../text-highlight-sample-1.component.html    |   2 +-
 .../text-highlight-sample-2.component.html    |   2 +-
 .../text-highlight-style.component.html       |   2 +-
 .../buttons-disabled-sample.html              |   2 +-
 .../buttons-display-density.component.html    |   2 +-
 .../buttons-roundness-sample.html             |   6 +-
 .../buttons-roundness-sample.scss             |  10 +-
 .../buttons-sample-1.component.html           |   2 +-
 .../buttons-sample-5.component.html           |   2 +-
 .../data-entries/data-entries-routes-data.ts  |  10 +-
 .../data-entries-routing.module.ts            |  48 +++++++++
 src/app/data-entries/data-entries.module.ts   |  19 +++-
 ...grid-hierarchical-selection.component.html |   1 -
 .../contained-icon-button.component.html      |   5 +
 .../contained-icon-button.component.scss      |   5 +
 .../contained-icon-button.component.ts        |  10 ++
 .../disabled-icon-button.component.html       |   5 +
 .../disabled-icon-button.component.scss       |   9 ++
 .../disabled-icon-button.component.ts         |  10 ++
 .../flat-icon-button.component.html           |   5 +
 .../flat-icon-button.component.scss           |   5 +
 .../flat-icon-button.component.ts             |  10 ++
 .../icon-button-overview.component.html       |  17 +++
 .../icon-button-overview.component.scss       |  13 +++
 .../icon-button-overview.component.ts         |  10 ++
 .../icon-button-size.component.html           |  17 +++
 .../icon-button-size.component.scss           |  25 +++++
 .../icon-button-size.component.ts             |  10 ++
 .../icon-button-styling.component.html        |  17 +++
 .../icon-button-styling.component.scss        |  48 +++++++++
 .../icon-button-styling.component.ts          |  10 ++
 .../outlined-icon-button.component.html       |   5 +
 .../outlined-icon-button.component.scss       |   5 +
 .../outlined-icon-button.component.ts         |   9 ++
 .../svg-icon-button.component.html            |   5 +
 .../svg-icon-button.component.scss            |   5 +
 .../svg-icon-button.component.ts              |  17 +++
 .../radio-group-sample.component.scss         |   2 +-
 .../grid-action-strip-sample.html             |  10 +-
 .../grid-cascading-combos.component.scss      |   2 +-
 .../crud-sample.component.html                |   2 +-
 .../grid-editing-sample.component.scss        |   2 +-
 ...excel-style-filtering-style.component.scss |   4 +-
 src/app/grid/grids.module.ts                  |   5 +-
 .../multi-column-headers.html                 |   4 +-
 .../multi-column-headers.scss                 |   2 +-
 .../hgrid-rowClasses.component.scss           |   2 +-
 .../hgrid-rowStyles.component.scss            |   2 +-
 ...hierarchical-grid-action-strip-sample.html |  10 +-
 .../hierarchical-grid-add-row.component.scss  |   2 +-
 ...id-advanced-filtering-style.component.scss |   4 +-
 ...archical-grid-batch-editing.component.scss |   2 +-
 .../hierarchical-grid-editing.component.scss  |   2 +-
 ...excel-style-filtering-style.component.scss |   4 +-
 ...rarchical-grid-multi-column.component.scss |   2 +-
 .../hierarchical-grid.module.ts               |   5 +-
 src/app/index/index.component.scss            |   2 +-
 src/app/interactions/interactions.module.ts   |   6 +-
 ...rlay-preset-settings-sample.component.scss |   2 +-
 .../query-builder-style.component.scss        |   6 +-
 src/app/layouts/layouts.module.ts             |   4 +-
 .../tabs-header-prefix-suffix.html            |   2 +-
 src/app/lists/lists.module.ts                 |   6 +-
 src/app/menus/menus.module.ts                 |   4 +-
 src/app/notifications/notifications.module.ts |   5 +-
 src/app/pagination/pagination.module.ts       |   5 +-
 .../calendar-sample-7.component.scss          |   2 +-
 .../multiview/multiview.component.scss        |   2 +-
 .../default-theme-sample.component.scss       |   2 +-
 .../card-sample-shadow.html                   |   4 +-
 src/app/theming/theming.module.ts             |   3 +-
 .../tree-grid-action-strip-sample.html        |  10 +-
 ...id-advanced-filtering-style.component.scss |   4 +-
 ...excel-style-filtering-style.component.scss |   4 +-
 ...multi-column-headers-sample.component.scss |   2 +-
 src/app/tree-grid/tree-grid.module.ts         |   4 +-
 82 files changed, 562 insertions(+), 91 deletions(-)
 create mode 100644 live-editing/configs/IconButtonConfigGenerator.ts
 create mode 100644 src/app/data-entries/icon-button/contained-icon-button/contained-icon-button.component.html
 create mode 100644 src/app/data-entries/icon-button/contained-icon-button/contained-icon-button.component.scss
 create mode 100644 src/app/data-entries/icon-button/contained-icon-button/contained-icon-button.component.ts
 create mode 100644 src/app/data-entries/icon-button/disabled-icon-button/disabled-icon-button.component.html
 create mode 100644 src/app/data-entries/icon-button/disabled-icon-button/disabled-icon-button.component.scss
 create mode 100644 src/app/data-entries/icon-button/disabled-icon-button/disabled-icon-button.component.ts
 create mode 100644 src/app/data-entries/icon-button/flat-icon-button/flat-icon-button.component.html
 create mode 100644 src/app/data-entries/icon-button/flat-icon-button/flat-icon-button.component.scss
 create mode 100644 src/app/data-entries/icon-button/flat-icon-button/flat-icon-button.component.ts
 create mode 100644 src/app/data-entries/icon-button/icon-button-overview/icon-button-overview.component.html
 create mode 100644 src/app/data-entries/icon-button/icon-button-overview/icon-button-overview.component.scss
 create mode 100644 src/app/data-entries/icon-button/icon-button-overview/icon-button-overview.component.ts
 create mode 100644 src/app/data-entries/icon-button/icon-button-size/icon-button-size.component.html
 create mode 100644 src/app/data-entries/icon-button/icon-button-size/icon-button-size.component.scss
 create mode 100644 src/app/data-entries/icon-button/icon-button-size/icon-button-size.component.ts
 create mode 100644 src/app/data-entries/icon-button/icon-button-styling/icon-button-styling.component.html
 create mode 100644 src/app/data-entries/icon-button/icon-button-styling/icon-button-styling.component.scss
 create mode 100644 src/app/data-entries/icon-button/icon-button-styling/icon-button-styling.component.ts
 create mode 100644 src/app/data-entries/icon-button/outlined-icon-button/outlined-icon-button.component.html
 create mode 100644 src/app/data-entries/icon-button/outlined-icon-button/outlined-icon-button.component.scss
 create mode 100644 src/app/data-entries/icon-button/outlined-icon-button/outlined-icon-button.component.ts
 create mode 100644 src/app/data-entries/icon-button/svg-icon-button/svg-icon-button.component.html
 create mode 100644 src/app/data-entries/icon-button/svg-icon-button/svg-icon-button.component.scss
 create mode 100644 src/app/data-entries/icon-button/svg-icon-button/svg-icon-button.component.ts

diff --git a/live-editing/configs/IconButtonConfigGenerator.ts b/live-editing/configs/IconButtonConfigGenerator.ts
new file mode 100644
index 0000000000..3b6fcbe843
--- /dev/null
+++ b/live-editing/configs/IconButtonConfigGenerator.ts
@@ -0,0 +1,101 @@
+import {IgxButtonGroupModule,
+    IgxButtonModule,
+    IgxIconButtonDirective,
+    IgxIconModule,
+    IgxRippleModule} from 'igniteui-angular';
+import {AppModuleConfig, Config, IConfigGenerator} from 'igniteui-live-editing'
+export class IconButtonConfigGenerator implements IConfigGenerator {
+    public generateConfigs(): Config[] {
+        const configs = new Array<Config>();
+
+        // icon button overview
+        configs.push(new Config({
+            component: 'IconButtonOverviewComponent',
+            appModuleConfig: new AppModuleConfig({
+                imports: ['IgxButtonModule', 'IgxIconModule', 'IgxRippleModule', 'IgxIconButtonDirective', 'IconButtonOverviewComponent'],
+                ngDeclarations: ['IconButtonOverviewComponent'],
+                ngImports: ['IgxButtonModule', 'IgxIconModule', 'IgxRippleModule', 'IgxIconButtonDirective']
+            }),
+            shortenComponentPathBy: "/data-entries/icon-button/"
+        }));
+
+        // flat icon button
+        configs.push(new Config({
+            component: 'FlatIconButtonComponent',
+            appModuleConfig: new AppModuleConfig({
+                imports: ['IgxButtonModule', 'IgxIconModule', 'IgxRippleModule', 'IgxIconButtonDirective', 'FlatIconButtonComponent'],
+                ngDeclarations: ['FlatIconButtonComponent'],
+                ngImports: ['IgxButtonModule', 'IgxIconModule', 'IgxRippleModule', 'IgxIconButtonDirective']
+            }),
+            shortenComponentPathBy: "/data-entries/icon-button/"
+        }));
+
+        // contained icon button
+        configs.push(new Config({
+            component: 'ContainedIconButtonComponent',
+            appModuleConfig: new AppModuleConfig({
+                imports: ['IgxButtonModule', 'IgxIconModule', 'IgxRippleModule', 'IgxIconButtonDirective', 'ContainedIconButtonComponent'],
+                ngDeclarations: ['ContainedIconButtonComponent'],
+                ngImports: ['IgxButtonModule', 'IgxIconModule', 'IgxRippleModule', 'IgxIconButtonDirective']
+            }),
+            shortenComponentPathBy: "/data-entries/icon-button/"
+        }));
+
+        // outlined icon button
+        configs.push(new Config({
+            component: 'OutlinedIconButtonComponent',
+            appModuleConfig: new AppModuleConfig({
+                imports: ['IgxButtonModule', 'IgxIconModule', 'IgxRippleModule', 'IgxIconButtonDirective', 'OutlinedIconButtonComponent'],
+                ngDeclarations: ['OutlinedIconButtonComponent'],
+                ngImports: ['IgxButtonModule', 'IgxIconModule', 'IgxRippleModule', 'IgxIconButtonDirective']
+            }),
+            shortenComponentPathBy: "/data-entries/icon-button/"
+        }));
+
+        // disabled icon button
+        configs.push(new Config({
+            component: 'DisabledIconButtonComponent',
+            appModuleConfig: new AppModuleConfig({
+                imports: ['IgxButtonModule', 'IgxIconModule', 'IgxRippleModule', 'IgxIconButtonDirective', 'DisabledIconButtonComponent'],
+                ngDeclarations: ['DisabledIconButtonComponent'],
+                ngImports: ['IgxButtonModule', 'IgxIconModule', 'IgxRippleModule', 'IgxIconButtonDirective']
+            }),
+            shortenComponentPathBy: "/data-entries/icon-button/"
+        }));
+
+        // SVG icon button
+        configs.push(new Config({
+            component: 'SVGIconButtonComponent',
+            appModuleConfig: new AppModuleConfig({
+                imports: ['IgxButtonModule', 'IgxIconModule', 'IgxRippleModule', 'IgxIconButtonDirective', 'SVGIconButtonComponent'],
+                ngDeclarations: ['SVGIconButtonComponent'],
+                ngImports: ['IgxButtonModule', 'IgxIconModule', 'IgxRippleModule', 'IgxIconButtonDirective']
+            }),
+            shortenComponentPathBy: "/data-entries/icon-button/"
+        }));
+
+        // icon button styling
+        configs.push(new Config({
+            component: 'IconButtonStylingComponent',
+            appModuleConfig: new AppModuleConfig({
+                imports: ['IgxButtonModule', 'IgxIconModule', 'IgxRippleModule', 'IgxIconButtonDirective', 'IconButtonStylingComponent'],
+                ngDeclarations: ['IconButtonStylingComponent'],
+                ngImports: ['IgxButtonModule', 'IgxIconModule', 'IgxRippleModule', 'IgxIconButtonDirective']
+            }),
+            shortenComponentPathBy: "/data-entries/icon-button/"
+        }));
+
+        // icon button size
+        configs.push(new Config({
+            component: 'IconButtonSizeComponent',
+            appModuleConfig: new AppModuleConfig({
+                imports: ['IgxButtonModule', 'IgxIconModule', 'IgxRippleModule', 'IgxIconButtonDirective', 'IconButtonSizeComponent'],
+                ngDeclarations: ['IconButtonSizeComponent'],
+                ngImports: ['IgxButtonModule', 'IgxIconModule', 'IgxRippleModule', 'IgxIconButtonDirective']
+            }),
+            shortenComponentPathBy: "/data-entries/icon-button/"
+        }));
+
+        return configs;
+    }
+}
diff --git a/live-editing/generators/ConfigGenerators.ts b/live-editing/generators/ConfigGenerators.ts
index 15dc53e453..1c8e2d4ed9 100644
--- a/live-editing/generators/ConfigGenerators.ts
+++ b/live-editing/generators/ConfigGenerators.ts
@@ -28,6 +28,7 @@ import { ForConfigGenerator } from '../configs/ForConfigGenerator';
 import { GridConfigGenerator } from '../configs/GridConfigGenerator';
 import { HierarchicalGridConfigGenerator } from '../configs/HierarchicalGridConfigGenerator';
 import { IconConfigGenerator } from '../configs/IconConfigGenerator';
+import { IconButtonConfigGenerator } from '../configs/IconButtonConfigGenerator';
 import { InputGroupConfigGenerator } from '../configs/InputGroupConfigGenerator';
 import { LayoutConfigGenerator } from '../configs/LayoutConfigGenerator';
 import { LinearProgressbarConfigGenerator } from '../configs/LinearProgressbarConfigGenerator';
@@ -99,6 +100,7 @@ export const CONFIG_GENERATORS =
         DateRangePickerConfigGenerator,
         DateTimeEditorConfigGenerator,
         DropDownConfigGenerator,
+        IconButtonConfigGenerator,
         InputGroupConfigGenerator,
         MaskConfigGenerator,
         MonthPickerConfigGenerator,
diff --git a/projects/app-crm/src/app/app.module.ts b/projects/app-crm/src/app/app.module.ts
index 8cdfc77ddd..20a199aa65 100644
--- a/projects/app-crm/src/app/app.module.ts
+++ b/projects/app-crm/src/app/app.module.ts
@@ -4,7 +4,7 @@ import { BrowserModule, HammerModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import {
     IgxAutocompleteModule, IgxButtonModule, IgxIconModule, IgxInputGroupModule, IgxLayoutModule,
-    IgxRippleModule, IgxGridModule, IgxAvatarModule, IgxProgressBarModule
+    IgxRippleModule, IgxGridModule, IgxAvatarModule, IgxProgressBarModule, IgxIconButtonDirective
 } from 'igniteui-angular';
 import { IgxPreventDocumentScrollModule } from '../../../../src/app/directives/prevent-scroll.directive';
 import { AppComponent } from './app.component';
@@ -33,7 +33,8 @@ import { SEOService } from '../../../app-lob/src/app/seo.service';
         IgxProgressBarModule,
         FormsModule,
         IgxPreventDocumentScrollModule,
-        HammerModule
+        HammerModule,
+        IgxIconButtonDirective
     ],
     providers: [SEOService]
 })
diff --git a/projects/app-lob/src/app/app.module.ts b/projects/app-lob/src/app/app.module.ts
index 40261e4148..624be0f764 100644
--- a/projects/app-lob/src/app/app.module.ts
+++ b/projects/app-lob/src/app/app.module.ts
@@ -4,7 +4,7 @@ import { FormsModule } from '@angular/forms';
 import { BrowserModule, HammerModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import {
-    IgxButtonModule, IgxFocusModule, IgxIconModule, IgxInputGroupModule,
+    IgxButtonModule, IgxFocusModule, IgxIconButtonDirective, IgxIconModule, IgxInputGroupModule,
     IgxLayoutModule, IgxNavbarModule, IgxNavigationDrawerModule, IgxRippleModule, IgxToggleModule
 } from 'igniteui-angular';
 import { IgxExtrasModule } from 'igniteui-angular-extras';
@@ -38,7 +38,8 @@ import { SEOService } from './seo.service';
         HammerModule,
         IgxExtrasModule,
         IgxFocusModule,
-        IgxToggleModule
+        IgxToggleModule,
+        IgxIconButtonDirective
     ],
     providers: [
         SEOService
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 1818dd2978..189321d008 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
@@ -95,7 +95,7 @@
         <igx-column [field]="'startY'" [width]="'110px'" dataType="currency" [pipeArgs]="columnFormat"  [sortable]="true"></igx-column>
         <!-- <igx-column [field]="'Grid'" [width]="'80px'" [hidden]="false" [filterable]="false">
             <ng-template igxCell let-cell="cell" class="center-text">
-                <button class="button-icon" igxButton="icon" [igxRippleCentered]="true">
+                <button class="button-icon" igxIconButton="flat" [igxRippleCentered]="true">
                     <igx-icon (click)="chartClick(cell)" family="material">table_charttable_chart</igx-icon>
                 </button>
             </ng-template>
diff --git a/src/app/data-display/data-display.module.ts b/src/app/data-display/data-display.module.ts
index 6ef14e1c23..b2adf57049 100644
--- a/src/app/data-display/data-display.module.ts
+++ b/src/app/data-display/data-display.module.ts
@@ -21,7 +21,8 @@ import {
     IgxSwitchModule,
     IgxTextHighlightModule,
     IgxTextSelectionModule,
-    IgxToastModule
+    IgxToastModule,
+    IgxIconButtonDirective
 } from 'igniteui-angular';
 import { BadgeIconComponent } from './badge/badge-icon/badge-icon.component';
 import { BadgeSample2Component } from './badge/badge-sample-2/badge-sample-2.component';
@@ -136,7 +137,8 @@ import { MaterialSymbolsComponent } from './icon/material-symbols/material-symbo
         IgxSnackbarModule,
         IgxSwitchModule,
         IgxButtonModule,
-        IgxTextHighlightModule
+        IgxTextHighlightModule,
+        IgxIconButtonDirective
     ]
 })
 export class DataDisplayModule {}
diff --git a/src/app/data-display/text-highlight/text-highlight-sample-1/text-highlight-sample-1.component.html b/src/app/data-display/text-highlight/text-highlight-sample-1/text-highlight-sample-1.component.html
index 99cad1aad2..cced60b6b3 100644
--- a/src/app/data-display/text-highlight/text-highlight-sample-1/text-highlight-sample-1.component.html
+++ b/src/app/data-display/text-highlight/text-highlight-sample-1/text-highlight-sample-1.component.html
@@ -10,7 +10,7 @@
     <igx-suffix>
         <div class="caseSensitiveButton">
             <button igxIconButton="flat" igxRipple [igxRippleCentered]="true" (click)="updateSearch()"
-                    [igxButtonBackground]="caseSensitive? 'rgb(73, 180, 254)' : 'transparent'">
+                [style.background]="caseSensitive ? 'rgb(73, 180, 254)' : 'transparent'">
                 <igx-icon class="caseSensitiveIcon" family="material">text_fields</igx-icon>
             </button>
         </div>
diff --git a/src/app/data-display/text-highlight/text-highlight-sample-2/text-highlight-sample-2.component.html b/src/app/data-display/text-highlight/text-highlight-sample-2/text-highlight-sample-2.component.html
index 95eb2a3e39..7f2f6892e1 100644
--- a/src/app/data-display/text-highlight/text-highlight-sample-2/text-highlight-sample-2.component.html
+++ b/src/app/data-display/text-highlight/text-highlight-sample-2/text-highlight-sample-2.component.html
@@ -12,7 +12,7 @@
         <igx-suffix>
             <div class="caseSensitiveButton">
                 <button igxIconButton="flat" igxRipple [igxRippleCentered]="true" (click)="updateSearch()"
-                        [igxButtonBackground]="caseSensitive? 'rgb(73, 180, 254)' : 'transparent'">
+                        [style.background]="caseSensitive ? 'rgb(73, 180, 254)' : 'transparent'">
                     <igx-icon class="caseSensitiveIcon" family="material">text_fields</igx-icon>
                 </button>
             </div>
diff --git a/src/app/data-display/text-highlight/text-highlight-style/text-highlight-style.component.html b/src/app/data-display/text-highlight/text-highlight-style/text-highlight-style.component.html
index a090add235..84b0c9fd1a 100644
--- a/src/app/data-display/text-highlight/text-highlight-style/text-highlight-style.component.html
+++ b/src/app/data-display/text-highlight/text-highlight-style/text-highlight-style.component.html
@@ -11,7 +11,7 @@
         <igx-suffix>
             <div class="caseSensitiveButton">
                 <button igxIconButton="flat" igxRipple [igxRippleCentered]="true" (click)="updateSearch()"
-                        [igxButtonBackground]="caseSensitive? 'rgb(73, 180, 254)' : 'transparent'">
+                        [style.background]="caseSensitive ? 'rgb(73, 180, 254)' : 'transparent'">
                     <igx-icon class="caseSensitiveIcon" family="material">text_fields</igx-icon>
                 </button>
             </div>
diff --git a/src/app/data-entries/buttons/buttons-disabled-sample/buttons-disabled-sample.html b/src/app/data-entries/buttons/buttons-disabled-sample/buttons-disabled-sample.html
index 0a4ac159d4..34d38c8158 100644
--- a/src/app/data-entries/buttons/buttons-disabled-sample/buttons-disabled-sample.html
+++ b/src/app/data-entries/buttons/buttons-disabled-sample/buttons-disabled-sample.html
@@ -1 +1 @@
-<button class="btn" igxButton="raised" [disabled]="'true'">Disabled</button>
+<button class="btn" igxButton="contained" [disabled]="'true'">Disabled</button>
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 dfe7643841..853533d488 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
@@ -7,7 +7,7 @@
             <button igxButton="flat" igxRipple>Flat</button>
         </div>
         <div class="button-sample">
-            <button igxButton="contained" igxRipple>Raised</button>
+            <button igxButton="contained" igxRipple>Contained</button>
         </div>
         <div class="button-sample">
             <button igxButton="outlined" igxRipple>Outlined</button>
diff --git a/src/app/data-entries/buttons/buttons-roundness-sample/buttons-roundness-sample.html b/src/app/data-entries/buttons/buttons-roundness-sample/buttons-roundness-sample.html
index 41d05a9007..0c93305128 100644
--- a/src/app/data-entries/buttons/buttons-roundness-sample/buttons-roundness-sample.html
+++ b/src/app/data-entries/buttons/buttons-roundness-sample/buttons-roundness-sample.html
@@ -4,8 +4,8 @@
             <div class="buttons-sample_item flat">
                 <button igxButton="flat" igxRipple>Button</button>
             </div>
-            <div class="buttons-sample_item raised">
-                <button igxButton="raised" igxRipple="white">Button</button>
+            <div class="buttons-sample_item contained">
+                <button igxButton="contained" igxRipple="white">Button</button>
             </div>
             <div class="buttons-sample_item fab">
                 <button igxButton="fab" igxRipple="white">
@@ -13,7 +13,7 @@
                 </button>
             </div>
             <div class="buttons-sample_item icon">
-                <button igxButton="icon" igxRipple [igxRippleCentered]="true">
+                <button igxIconButton="flat" igxRipple [igxRippleCentered]="true">
                     <igx-icon fontSet="material">search</igx-icon>
                 </button>
             </div>
diff --git a/src/app/data-entries/buttons/buttons-roundness-sample/buttons-roundness-sample.scss b/src/app/data-entries/buttons/buttons-roundness-sample/buttons-roundness-sample.scss
index 2c0e181c1e..b377b92761 100644
--- a/src/app/data-entries/buttons/buttons-roundness-sample/buttons-roundness-sample.scss
+++ b/src/app/data-entries/buttons/buttons-roundness-sample/buttons-roundness-sample.scss
@@ -4,7 +4,7 @@ $flatBtn: button-theme(
     $border-radius: .5
 );
 
-$raisedBtn: button-theme(
+$containedBtn: button-theme(
     $border-radius: 30px
 );
 
@@ -12,16 +12,16 @@ $fabBtn: button-theme(
     $border-radius: 10%
 );
 
-$iconBtn: button-theme(
-    $border-radius: .5 .2 .5 .2
+$iconBtn: icon-button-theme(
+    $border-radius: 12px
 );
 
 .flat {
     @include css-vars($flatBtn);
 }
 
-.raised {
-    @include css-vars($raisedBtn);
+.contained {
+    @include css-vars($containedBtn);
 }
 
 .fab {
diff --git a/src/app/data-entries/buttons/buttons-sample-1/buttons-sample-1.component.html b/src/app/data-entries/buttons/buttons-sample-1/buttons-sample-1.component.html
index 19551d81d1..2a08fc960d 100644
--- a/src/app/data-entries/buttons/buttons-sample-1/buttons-sample-1.component.html
+++ b/src/app/data-entries/buttons/buttons-sample-1/buttons-sample-1.component.html
@@ -3,7 +3,7 @@
         <button igxButton="flat" igxRipple>Flat</button>
     </div>
     <div class="button-sample">
-        <button igxButton="contained" igxRipple>Raised</button>
+        <button igxButton="contained" igxRipple>Contained</button>
     </div>
     <div class="button-sample">
         <button igxButton="outlined" igxRipple>Outlined</button>
diff --git a/src/app/data-entries/buttons/buttons-sample-5/buttons-sample-5.component.html b/src/app/data-entries/buttons/buttons-sample-5/buttons-sample-5.component.html
index cfe17e4c0c..a05ed23958 100644
--- a/src/app/data-entries/buttons/buttons-sample-5/buttons-sample-5.component.html
+++ b/src/app/data-entries/buttons/buttons-sample-5/buttons-sample-5.component.html
@@ -1 +1 @@
-<button igxButton="contained" class="btn">Raised</button>
+<button igxButton="contained" class="btn">Contained</button>
diff --git a/src/app/data-entries/data-entries-routes-data.ts b/src/app/data-entries/data-entries-routes-data.ts
index 77eb99b250..74b6f40343 100644
--- a/src/app/data-entries/data-entries-routes-data.ts
+++ b/src/app/data-entries/data-entries-routes-data.ts
@@ -13,7 +13,7 @@ export const dataEntriesRoutesData = {
     "buttons-sample-2": { displayName: "Flat Button", parentName: "Buttons" },
     "buttons-sample-3": { displayName: "Button Ripple", parentName: "Buttons" },
     "buttons-sample-4": { displayName: "Span Button", parentName: "Buttons" },
-    "buttons-sample-5": { displayName: "Raised Button", parentName: "Buttons" },
+    "buttons-sample-5": { displayName: "Contained Button", parentName: "Buttons" },
     "buttons-sample-6": { displayName: "Floating Action Button", parentName: "Buttons" },
     "buttons-sample-7": { displayName: "Icon Button", parentName: "Buttons" },
     "buttons-sample-8": { displayName: "Outlined Button", parentName: "Buttons" },
@@ -37,6 +37,14 @@ export const dataEntriesRoutesData = {
     "dropdown-tree-hierarchical-selection": { displayName: "Dropdown Tree Hierarchical Selection", parentName: "Dropdown" },
     "dropdown-tree-grid-hierarchical-selection": { displayName: "Dropdown Tree Grid Hierarchical Selection", parentName: "Dropdown" },
     "dropdown-sample-4": { displayName: "Input Dropdown Selection", parentName: "Dropdown" },
+    "icon-button-overview": { displayName: "Overview", parentName: "Icon Buttons" },
+    "flat-icon-button": { displayName: "Flat Icon Button", parentName: "Icon Buttons" },
+    "contained-icon-button": { displayName: "Contained Icon Button", parentName: "Icon Buttons" },
+    "outlined-icon-button": { displayName: "Outlined Icon Button", parentName: "Icon Buttons" },
+    "disabled-icon-button": { displayName: "Disabled Icon Button", parentName: "Icon Buttons" },
+    "svg-icon-button": { displayName: "SVG Icon Button", parentName: "Icon Buttons" },
+    "icon-button-size": { displayName: "Icon Button Size", parentName: "Icon Buttons" },
+    "icon-button-styling": { displayName: "Icon Button Styling", parentName: "Icon Buttons" },
     "input-group-sample-1": { displayName: "Simple Input Group", parentName: "Input Group" },
     "input-group-sample-2": { displayName: "Input Required", parentName: "Input Group" },
     "input-group-sample-3": { displayName: "Input Group Prefix and Sufix", parentName: "Input Group" },
diff --git a/src/app/data-entries/data-entries-routing.module.ts b/src/app/data-entries/data-entries-routing.module.ts
index 4e990fae0d..36789a4d20 100644
--- a/src/app/data-entries/data-entries-routing.module.ts
+++ b/src/app/data-entries/data-entries-routing.module.ts
@@ -65,6 +65,14 @@ import { RatingInFormComponent } from './rating/rating-form/rating-form.componen
 import { TemplateDrivenFormValidationComponent } from './input-group/template-driven-form-validation/template-driven-form-validation.component';
 import { ReactiveFormValidationComponent } from './input-group/reactive-form-validation/reactive-form-validation.component';
 import { ReactiveFormCustomValidationComponent } from './input-group/reactive-form-custom-validation/reactive-form-custom-validation.component';
+import { IconButtonOverviewComponent } from './icon-button/icon-button-overview/icon-button-overview.component';
+import { FlatIconButtonComponent } from './icon-button/flat-icon-button/flat-icon-button.component';
+import { ContainedIconButtonComponent } from './icon-button/contained-icon-button/contained-icon-button.component';
+import { OutlinedIconButtonComponent } from './icon-button/outlined-icon-button/outlined-icon-button.component';
+import { DisabledIconButtonComponent } from './icon-button/disabled-icon-button/disabled-icon-button.component';
+import { SVGIconButtonComponent } from './icon-button/svg-icon-button/svg-icon-button.component';
+import { IconButtonSizeComponent } from './icon-button/icon-button-size/icon-button-size.component';
+import { IconButtonStylingComponent } from './icon-button/icon-button-styling/icon-button-styling.component';
 
 export const dataEntriesRoutes: Routes = [
     {
@@ -247,6 +255,46 @@ export const dataEntriesRoutes: Routes = [
         data: dataEntriesRoutesData['dropdown-remote'],
         path: 'dropdown-remote'
     },
+    {
+        component: IconButtonOverviewComponent,
+        data: dataEntriesRoutesData['icon-button-overview'],
+        path: 'icon-button-overview'
+    },
+    {
+        component: FlatIconButtonComponent,
+        data: dataEntriesRoutesData['flat-icon-button'],
+        path: 'flat-icon-button'
+    },
+    {
+        component: ContainedIconButtonComponent,
+        data: dataEntriesRoutesData['contained-icon-button'],
+        path: 'contained-icon-button'
+    },
+    {
+        component: OutlinedIconButtonComponent,
+        data: dataEntriesRoutesData['outlined-icon-button'],
+        path: 'outlined-icon-button'
+    },
+    {
+        component: DisabledIconButtonComponent,
+        data: dataEntriesRoutesData['disabled-icon-button'],
+        path: 'disabled-icon-button'
+    },
+    {
+        component: SVGIconButtonComponent,
+        data: dataEntriesRoutesData['svg-icon-button'],
+        path: 'svg-icon-button'
+    },
+    {
+        component: IconButtonSizeComponent,
+        data: dataEntriesRoutesData['icon-button-size'],
+        path: 'icon-button-size'
+    },
+    {
+        component: IconButtonStylingComponent,
+        data: dataEntriesRoutesData['icon-button-styling'],
+        path: 'icon-button-styling'
+    },
     {
         component: InputGroupSample1Component,
         data: dataEntriesRoutesData['input-group-sample-1'],
diff --git a/src/app/data-entries/data-entries.module.ts b/src/app/data-entries/data-entries.module.ts
index 937e96b7bc..bd20ffc36f 100644
--- a/src/app/data-entries/data-entries.module.ts
+++ b/src/app/data-entries/data-entries.module.ts
@@ -4,7 +4,7 @@ import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import {
     IgcFormsModule,
-    IgxAutocompleteModule, IgxButtonGroupModule, IgxButtonModule, IgxCardModule, IgxCheckboxModule, IgxChipsAreaComponent, IgxChipsModule, IgxComboModule,
+    IgxAutocompleteModule, IgxButtonGroupModule, IgxButtonModule, IgxIconButtonDirective, IgxCardModule, IgxCheckboxModule, IgxChipsAreaComponent, IgxChipsModule, IgxComboModule,
     IgxDatePickerModule, IgxDialogModule, IgxDividerModule, IgxDropDownModule, IgxFocusModule, IgxForOfModule,
     IgxIconModule, IgxInputGroupModule, IgxNavbarModule, IgxProgressBarModule, IgxRadioModule, IgxRippleModule,
     IgxSelectModule, IgxSwitchModule, IgxTextSelectionModule, IgxTimePickerModule, IgxToastModule, IgxToggleModule, IgxTreeGridModule, IgxTreeModule
@@ -75,6 +75,14 @@ import { RatingInFormComponent } from './rating/rating-form/rating-form.componen
 import { TemplateDrivenFormValidationComponent } from './input-group/template-driven-form-validation/template-driven-form-validation.component';
 import { ReactiveFormValidationComponent } from './input-group/reactive-form-validation/reactive-form-validation.component';
 import { ReactiveFormCustomValidationComponent } from './input-group/reactive-form-custom-validation/reactive-form-custom-validation.component';
+import { IconButtonOverviewComponent } from './icon-button/icon-button-overview/icon-button-overview.component';
+import { FlatIconButtonComponent } from './icon-button/flat-icon-button/flat-icon-button.component';
+import { ContainedIconButtonComponent } from './icon-button/contained-icon-button/contained-icon-button.component';
+import { OutlinedIconButtonComponent } from './icon-button/outlined-icon-button/outlined-icon-button.component';
+import { DisabledIconButtonComponent } from './icon-button/disabled-icon-button/disabled-icon-button.component';
+import { SVGIconButtonComponent } from './icon-button/svg-icon-button/svg-icon-button.component';
+import { IconButtonSizeComponent } from './icon-button/icon-button-size/icon-button-size.component';
+import { IconButtonStylingComponent } from './icon-button/icon-button-styling/icon-button-styling.component';
 
 @NgModule({
     declarations: [
@@ -111,6 +119,14 @@ import { ReactiveFormCustomValidationComponent } from './input-group/reactive-fo
         DropDownStylingComponent,
         DropdownTreeHierarchicalSelectionComponent,
         DropdownTreeGridHierarchicalSelectionComponent,
+        IconButtonOverviewComponent,
+        FlatIconButtonComponent,
+        ContainedIconButtonComponent,
+        OutlinedIconButtonComponent,
+        DisabledIconButtonComponent,
+        SVGIconButtonComponent,
+        IconButtonSizeComponent,
+        IconButtonStylingComponent,
         InputGroupSample1Component,
         InputGroupSample2Component,
         InputGroupSample3Component,
@@ -154,6 +170,7 @@ import { ReactiveFormCustomValidationComponent } from './input-group/reactive-fo
         IgxAutocompleteModule,
         IgxButtonGroupModule,
         IgxButtonModule,
+        IgxIconButtonDirective,
         IgxDialogModule,
         IgxIconModule,
         IgxRippleModule,
diff --git a/src/app/data-entries/dropdown/dropdown-tree-grid-hierarchical-selection/dropdown-tree-grid-hierarchical-selection.component.html b/src/app/data-entries/dropdown/dropdown-tree-grid-hierarchical-selection/dropdown-tree-grid-hierarchical-selection.component.html
index 3ace82004f..5bbaf0906d 100644
--- a/src/app/data-entries/dropdown/dropdown-tree-grid-hierarchical-selection/dropdown-tree-grid-hierarchical-selection.component.html
+++ b/src/app/data-entries/dropdown/dropdown-tree-grid-hierarchical-selection/dropdown-tree-grid-hierarchical-selection.component.html
@@ -14,4 +14,3 @@
       <igx-column field="Name" dataType="string"></igx-column>
     </igx-tree-grid>
 </igx-drop-down>
-  
diff --git a/src/app/data-entries/icon-button/contained-icon-button/contained-icon-button.component.html b/src/app/data-entries/icon-button/contained-icon-button/contained-icon-button.component.html
new file mode 100644
index 0000000000..5e89ba83b7
--- /dev/null
+++ b/src/app/data-entries/icon-button/contained-icon-button/contained-icon-button.component.html
@@ -0,0 +1,5 @@
+<div class="wrapper">
+    <button igxIconButton>
+        <igx-icon>favorite</igx-icon>
+    </button>
+</div>
diff --git a/src/app/data-entries/icon-button/contained-icon-button/contained-icon-button.component.scss b/src/app/data-entries/icon-button/contained-icon-button/contained-icon-button.component.scss
new file mode 100644
index 0000000000..b22d5149b2
--- /dev/null
+++ b/src/app/data-entries/icon-button/contained-icon-button/contained-icon-button.component.scss
@@ -0,0 +1,5 @@
+.wrapper {
+    display: flex;
+    flex-flow: row wrap;
+    margin: 16px;
+}
\ No newline at end of file
diff --git a/src/app/data-entries/icon-button/contained-icon-button/contained-icon-button.component.ts b/src/app/data-entries/icon-button/contained-icon-button/contained-icon-button.component.ts
new file mode 100644
index 0000000000..1516f49c47
--- /dev/null
+++ b/src/app/data-entries/icon-button/contained-icon-button/contained-icon-button.component.ts
@@ -0,0 +1,10 @@
+
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-contained-icon-button',
+  styleUrls: ['./contained-icon-button.component.scss'],
+  templateUrl: './contained-icon-button.component.html'
+
+})
+export class ContainedIconButtonComponent { }
diff --git a/src/app/data-entries/icon-button/disabled-icon-button/disabled-icon-button.component.html b/src/app/data-entries/icon-button/disabled-icon-button/disabled-icon-button.component.html
new file mode 100644
index 0000000000..e31b5a90e9
--- /dev/null
+++ b/src/app/data-entries/icon-button/disabled-icon-button/disabled-icon-button.component.html
@@ -0,0 +1,5 @@
+<div class="wrapper">
+    <button igxIconButton="flat" disabled>
+        <igx-icon family="fa" name="fa-home"></igx-icon>
+    </button>
+</div>
diff --git a/src/app/data-entries/icon-button/disabled-icon-button/disabled-icon-button.component.scss b/src/app/data-entries/icon-button/disabled-icon-button/disabled-icon-button.component.scss
new file mode 100644
index 0000000000..bfd0135324
--- /dev/null
+++ b/src/app/data-entries/icon-button/disabled-icon-button/disabled-icon-button.component.scss
@@ -0,0 +1,9 @@
+@import url("https://unpkg.com/@fortawesome/fontawesome-free-webfonts@^1.0.9/css/fontawesome.css");
+@import url("https://unpkg.com/@fortawesome/fontawesome-free-webfonts@^1.0.9/css/fa-regular.css");
+@import url("https://unpkg.com/@fortawesome/fontawesome-free-webfonts@^1.0.9/css/fa-solid.css");
+
+.wrapper {
+    display: flex;
+    flex-flow: row wrap;
+    margin: 16px;
+}
\ No newline at end of file
diff --git a/src/app/data-entries/icon-button/disabled-icon-button/disabled-icon-button.component.ts b/src/app/data-entries/icon-button/disabled-icon-button/disabled-icon-button.component.ts
new file mode 100644
index 0000000000..5ee3f3da98
--- /dev/null
+++ b/src/app/data-entries/icon-button/disabled-icon-button/disabled-icon-button.component.ts
@@ -0,0 +1,10 @@
+
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-disabled-icon-button',
+  styleUrls: ['./disabled-icon-button.component.scss'],
+  templateUrl: './disabled-icon-button.component.html'
+
+})
+export class DisabledIconButtonComponent {}
diff --git a/src/app/data-entries/icon-button/flat-icon-button/flat-icon-button.component.html b/src/app/data-entries/icon-button/flat-icon-button/flat-icon-button.component.html
new file mode 100644
index 0000000000..6188b4a08f
--- /dev/null
+++ b/src/app/data-entries/icon-button/flat-icon-button/flat-icon-button.component.html
@@ -0,0 +1,5 @@
+<div class="wrapper">
+    <button igxIconButton="flat">
+        <igx-icon>edit</igx-icon>
+    </button>
+</div>
diff --git a/src/app/data-entries/icon-button/flat-icon-button/flat-icon-button.component.scss b/src/app/data-entries/icon-button/flat-icon-button/flat-icon-button.component.scss
new file mode 100644
index 0000000000..48a58b85ca
--- /dev/null
+++ b/src/app/data-entries/icon-button/flat-icon-button/flat-icon-button.component.scss
@@ -0,0 +1,5 @@
+.wrapper {
+    display: flex;
+    flex-flow: row wrap;
+    margin: 16px;
+}
diff --git a/src/app/data-entries/icon-button/flat-icon-button/flat-icon-button.component.ts b/src/app/data-entries/icon-button/flat-icon-button/flat-icon-button.component.ts
new file mode 100644
index 0000000000..26d657906f
--- /dev/null
+++ b/src/app/data-entries/icon-button/flat-icon-button/flat-icon-button.component.ts
@@ -0,0 +1,10 @@
+
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-flat-icon-button',
+  styleUrls: ['./flat-icon-button.component.scss'],
+  templateUrl: './flat-icon-button.component.html'
+
+})
+export class FlatIconButtonComponent { }
diff --git a/src/app/data-entries/icon-button/icon-button-overview/icon-button-overview.component.html b/src/app/data-entries/icon-button/icon-button-overview/icon-button-overview.component.html
new file mode 100644
index 0000000000..db69cdea6d
--- /dev/null
+++ b/src/app/data-entries/icon-button/icon-button-overview/icon-button-overview.component.html
@@ -0,0 +1,17 @@
+<div class="wrapper">
+    <div class="button-sample">
+        <button igxIconButton="flat" igxRipple>
+            <igx-icon>home</igx-icon>
+        </button>
+    </div>
+    <div class="button-sample">
+        <button igxIconButton="contained" igxRipple>
+            <igx-icon>home</igx-icon>
+        </button>
+    </div>
+    <div class="button-sample">
+        <button igxIconButton="outlined" igxRipple>
+            <igx-icon>home</igx-icon>
+        </button>
+    </div>
+</div>
diff --git a/src/app/data-entries/icon-button/icon-button-overview/icon-button-overview.component.scss b/src/app/data-entries/icon-button/icon-button-overview/icon-button-overview.component.scss
new file mode 100644
index 0000000000..9d1157d397
--- /dev/null
+++ b/src/app/data-entries/icon-button/icon-button-overview/icon-button-overview.component.scss
@@ -0,0 +1,13 @@
+.wrapper {
+    display: flex;
+    flex-flow: row wrap;
+}
+
+.button-sample {
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: center;
+    align-items: center;
+    flex: 1 0 30%;
+    margin: 16px 0;
+}
diff --git a/src/app/data-entries/icon-button/icon-button-overview/icon-button-overview.component.ts b/src/app/data-entries/icon-button/icon-button-overview/icon-button-overview.component.ts
new file mode 100644
index 0000000000..4fd8a490a0
--- /dev/null
+++ b/src/app/data-entries/icon-button/icon-button-overview/icon-button-overview.component.ts
@@ -0,0 +1,10 @@
+
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-icon-button-overview',
+  styleUrls: ['./icon-button-overview.component.scss'],
+  templateUrl: './icon-button-overview.component.html'
+
+})
+export class IconButtonOverviewComponent { }
diff --git a/src/app/data-entries/icon-button/icon-button-size/icon-button-size.component.html b/src/app/data-entries/icon-button/icon-button-size/icon-button-size.component.html
new file mode 100644
index 0000000000..f1db40495d
--- /dev/null
+++ b/src/app/data-entries/icon-button/icon-button-size/icon-button-size.component.html
@@ -0,0 +1,17 @@
+<div class="wrapper">
+    <div class="button-sample">
+        <span igxIconButton="outlined" igxRipple class="small">
+            <igx-icon>person</igx-icon>
+        </span>
+    </div>
+    <div class="button-sample">
+        <div igxIconButton="outlined" igxRipple class="medium">
+            <igx-icon>place</igx-icon>
+        </div>
+    </div>
+    <div class="button-sample">
+        <button igxIconButton="outlined" igxRipple class="large">
+            <igx-icon>phone</igx-icon>
+        </button>
+    </div>
+</div>
diff --git a/src/app/data-entries/icon-button/icon-button-size/icon-button-size.component.scss b/src/app/data-entries/icon-button/icon-button-size/icon-button-size.component.scss
new file mode 100644
index 0000000000..e57e7c4a0c
--- /dev/null
+++ b/src/app/data-entries/icon-button/icon-button-size/icon-button-size.component.scss
@@ -0,0 +1,25 @@
+.wrapper {
+    display: flex;
+    flex-flow: row wrap;
+}
+
+.button-sample {
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: center;
+    align-items: center;
+    flex: 1 0 30%;
+    margin: 16px 0;
+}
+
+.large {
+    --ig-size: var(--ig-size-large);
+}
+
+.medium {
+    --ig-size: var(--ig-size-medium);
+}
+
+.small {
+    --ig-size: var(--ig-size-small);
+}
diff --git a/src/app/data-entries/icon-button/icon-button-size/icon-button-size.component.ts b/src/app/data-entries/icon-button/icon-button-size/icon-button-size.component.ts
new file mode 100644
index 0000000000..19f79451f4
--- /dev/null
+++ b/src/app/data-entries/icon-button/icon-button-size/icon-button-size.component.ts
@@ -0,0 +1,10 @@
+
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-icon-button-size',
+  styleUrls: ['./icon-button-size.component.scss'],
+  templateUrl: './icon-button-size.component.html'
+
+})
+export class IconButtonSizeComponent { }
diff --git a/src/app/data-entries/icon-button/icon-button-styling/icon-button-styling.component.html b/src/app/data-entries/icon-button/icon-button-styling/icon-button-styling.component.html
new file mode 100644
index 0000000000..db69cdea6d
--- /dev/null
+++ b/src/app/data-entries/icon-button/icon-button-styling/icon-button-styling.component.html
@@ -0,0 +1,17 @@
+<div class="wrapper">
+    <div class="button-sample">
+        <button igxIconButton="flat" igxRipple>
+            <igx-icon>home</igx-icon>
+        </button>
+    </div>
+    <div class="button-sample">
+        <button igxIconButton="contained" igxRipple>
+            <igx-icon>home</igx-icon>
+        </button>
+    </div>
+    <div class="button-sample">
+        <button igxIconButton="outlined" igxRipple>
+            <igx-icon>home</igx-icon>
+        </button>
+    </div>
+</div>
diff --git a/src/app/data-entries/icon-button/icon-button-styling/icon-button-styling.component.scss b/src/app/data-entries/icon-button/icon-button-styling/icon-button-styling.component.scss
new file mode 100644
index 0000000000..76438eb3da
--- /dev/null
+++ b/src/app/data-entries/icon-button/icon-button-styling/icon-button-styling.component.scss
@@ -0,0 +1,48 @@
+.wrapper {
+    display: flex;
+    flex-flow: row wrap;
+}
+
+.button-sample {
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: center;
+    align-items: center;
+    flex: 1 0 30%;
+    margin: 16px 0;
+}
+
+[igxIconButton="flat"] {
+    --foreground: #011627;
+    --background: #FEFEFE;
+    --hover-background: #ECAA53;
+    --focus-foreground: #011627dc;
+    --focus-background: #ECAA53;
+    --active-foreground: #011627dc;
+    --active-background: #ECAA53;
+}
+
+[igxIconButton="contained"] {
+    --background: #011627;
+    --foreground: #FEFEFE;
+    --hover-foreground:  #011627dc;
+    --hover-background: #ECAA53;
+    --focus-foreground: #011627dc;
+    --focus-background: #ECAA53;
+    --focus-border-color:  #0116276c;
+    --active-foreground: #011627dc;
+    --active-background: #ECAA53;
+}
+
+[igxIconButton="outlined"] {
+    --foreground: #011627;
+    --background: #FEFEFE;
+    --border-color: #011627;
+    --hover-foreground:  #011627dc;
+    --hover-background: #ECAA53;
+    --focus-foreground: #011627dc;
+    --focus-background: #ECAA53;
+    --focus-border-color:  #0116276c;
+    --active-foreground: #011627dc;
+    --active-background: #ECAA53;
+}
diff --git a/src/app/data-entries/icon-button/icon-button-styling/icon-button-styling.component.ts b/src/app/data-entries/icon-button/icon-button-styling/icon-button-styling.component.ts
new file mode 100644
index 0000000000..ba1975cfde
--- /dev/null
+++ b/src/app/data-entries/icon-button/icon-button-styling/icon-button-styling.component.ts
@@ -0,0 +1,10 @@
+
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-icon-button-styling',
+  styleUrls: ['./icon-button-styling.component.scss'],
+  templateUrl: './icon-button-styling.component.html'
+
+})
+export class IconButtonStylingComponent { }
diff --git a/src/app/data-entries/icon-button/outlined-icon-button/outlined-icon-button.component.html b/src/app/data-entries/icon-button/outlined-icon-button/outlined-icon-button.component.html
new file mode 100644
index 0000000000..6e086cd0bc
--- /dev/null
+++ b/src/app/data-entries/icon-button/outlined-icon-button/outlined-icon-button.component.html
@@ -0,0 +1,5 @@
+<div class="wrapper">
+    <button igxIconButton="outlined">
+        <igx-icon>more_vert</igx-icon>
+    </button>
+</div>
diff --git a/src/app/data-entries/icon-button/outlined-icon-button/outlined-icon-button.component.scss b/src/app/data-entries/icon-button/outlined-icon-button/outlined-icon-button.component.scss
new file mode 100644
index 0000000000..b22d5149b2
--- /dev/null
+++ b/src/app/data-entries/icon-button/outlined-icon-button/outlined-icon-button.component.scss
@@ -0,0 +1,5 @@
+.wrapper {
+    display: flex;
+    flex-flow: row wrap;
+    margin: 16px;
+}
\ No newline at end of file
diff --git a/src/app/data-entries/icon-button/outlined-icon-button/outlined-icon-button.component.ts b/src/app/data-entries/icon-button/outlined-icon-button/outlined-icon-button.component.ts
new file mode 100644
index 0000000000..b5c9e478b3
--- /dev/null
+++ b/src/app/data-entries/icon-button/outlined-icon-button/outlined-icon-button.component.ts
@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-outlined-icon-button',
+  styleUrls: ['./outlined-icon-button.component.scss'],
+  templateUrl: './outlined-icon-button.component.html'
+
+})
+export class OutlinedIconButtonComponent {}
diff --git a/src/app/data-entries/icon-button/svg-icon-button/svg-icon-button.component.html b/src/app/data-entries/icon-button/svg-icon-button/svg-icon-button.component.html
new file mode 100644
index 0000000000..d8a9262c28
--- /dev/null
+++ b/src/app/data-entries/icon-button/svg-icon-button/svg-icon-button.component.html
@@ -0,0 +1,5 @@
+<div class="wrapper">
+    <button igxIconButton>
+        <igx-icon family="weather-icons" name="rain"></igx-icon>
+    </button>
+</div>
diff --git a/src/app/data-entries/icon-button/svg-icon-button/svg-icon-button.component.scss b/src/app/data-entries/icon-button/svg-icon-button/svg-icon-button.component.scss
new file mode 100644
index 0000000000..b22d5149b2
--- /dev/null
+++ b/src/app/data-entries/icon-button/svg-icon-button/svg-icon-button.component.scss
@@ -0,0 +1,5 @@
+.wrapper {
+    display: flex;
+    flex-flow: row wrap;
+    margin: 16px;
+}
\ No newline at end of file
diff --git a/src/app/data-entries/icon-button/svg-icon-button/svg-icon-button.component.ts b/src/app/data-entries/icon-button/svg-icon-button/svg-icon-button.component.ts
new file mode 100644
index 0000000000..643660b26a
--- /dev/null
+++ b/src/app/data-entries/icon-button/svg-icon-button/svg-icon-button.component.ts
@@ -0,0 +1,17 @@
+import { Component, OnInit } from '@angular/core';
+import { IgxIconService } from 'igniteui-angular';
+
+@Component({
+  selector: 'app-svg-icon-button',
+  styleUrls: ['./svg-icon-button.component.scss'],
+  templateUrl: './svg-icon-button.component.html'
+
+})
+export class SVGIconButtonComponent implements OnInit {
+    constructor(private _iconService: IgxIconService) { }
+
+    public ngOnInit() {
+        // register custom SVG icon
+        this._iconService.addSvgIcon('rain', 'assets/images/card/icons/rain.svg', 'weather-icons');
+    }
+}
diff --git a/src/app/data-entries/radio/radio-group-sample/radio-group-sample.component.scss b/src/app/data-entries/radio/radio-group-sample/radio-group-sample.component.scss
index d96793cf83..ac170b42be 100644
--- a/src/app/data-entries/radio/radio-group-sample/radio-group-sample.component.scss
+++ b/src/app/data-entries/radio/radio-group-sample/radio-group-sample.component.scss
@@ -11,6 +11,6 @@ igx-radio {
     margin: 8px;
 }
 
-.igx-button--raised {
+.igx-button--contained {
     margin-right: 16px;
 }
diff --git a/src/app/grid/grid-action-strip/grid-action-strip-sample.html b/src/app/grid/grid-action-strip/grid-action-strip-sample.html
index 91fb3118af..8804bfe1ef 100644
--- a/src/app/grid/grid-action-strip/grid-action-strip-sample.html
+++ b/src/app/grid/grid-action-strip/grid-action-strip-sample.html
@@ -16,24 +16,24 @@
         <igx-action-strip #actionstrip>
             <igx-grid-pinning-actions></igx-grid-pinning-actions>
             <ng-container *ngIf="!inEditMode(actionstrip.context)">
-                <button title="Edit" igxButton="icon" igxRipple
+                <button title="Edit" igxIconButton="flat" igxRipple
                     (click)='startEdit(actionstrip.context)'>
                     <igx-icon>edit</igx-icon>
                 </button>
-                <button title="Undo All" igxButton="icon" igxRipple *ngIf='isDirty(actionstrip.context)'
+                <button title="Undo All" igxIconButton="flat" igxRipple *ngIf='isDirty(actionstrip.context)'
                     (click)='undo(actionstrip.context)'>
                     <igx-icon>undo</igx-icon>
                 </button>
-                <button title="Redo All" igxButton="icon" igxRipple
+                <button title="Redo All" igxIconButton="flat" igxRipple
                     *ngIf='!isDirty(actionstrip.context) && hasDiscardedTransactions(actionstrip.context)'
                     (click)='redo(actionstrip.context)'>
                     <igx-icon>redo</igx-icon>
                 </button>
-                <button title='Save' igxButton="icon" igxRipple *ngIf='isDirty(actionstrip.context)'
+                <button title='Save' igxIconButton="flat" igxRipple *ngIf='isDirty(actionstrip.context)'
                     (click)='commit(actionstrip.context)'>
                     <igx-icon>save</igx-icon>
                 </button>
-                <button title="Delete" igxButton="icon" igxRipple *ngIf='!isDeleted(actionstrip.context)'
+                <button title="Delete" igxIconButton="flat" igxRipple *ngIf='!isDeleted(actionstrip.context)'
                     (click)='actionstrip.context.delete()'>
                     <igx-icon>delete</igx-icon>
                 </button>
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 b25245dba0..7c98762800 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
@@ -45,7 +45,7 @@
 }
 
 .default-theme {
-    .addProdBtn.igx-button--raised {
+    .addProdBtn.igx-button--contained {
         background-color: lightgrey;
         color: black;
         &:hover {
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 0200c21bc8..c150f2d889 100644
--- a/src/app/grid/grid-crud-sample/crud-sample.component.html
+++ b/src/app/grid/grid-crud-sample/crud-sample.component.html
@@ -63,7 +63,7 @@
 </igx-column>
 <igx-column width="100px" [filterable]="false">
     <ng-template igxCell let-cell="cell">
-        <button igxButton="icon" (click)="removeRow(cell.row)">
+        <button igxIconButton="flat" (click)="removeRow(cell.row)">
             <igx-icon>delete</igx-icon>
         </button>
     </ng-template>
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 4c53688301..365f0fec55 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
@@ -41,7 +41,7 @@
 }
 
 .default-theme {
-    .addProdBtn.igx-button--raised {
+    .addProdBtn.igx-button--contained {
         background-color: lightgrey;
         color: black;
         &:hover {
diff --git a/src/app/grid/grid-excel-style-filtering-style/grid-excel-style-filtering-style.component.scss b/src/app/grid/grid-excel-style-filtering-style/grid-excel-style-filtering-style.component.scss
index 0113725644..795a181a16 100644
--- a/src/app/grid/grid-excel-style-filtering-style/grid-excel-style-filtering-style.component.scss
+++ b/src/app/grid/grid-excel-style-filtering-style/grid-excel-style-filtering-style.component.scss
@@ -14,7 +14,7 @@ $custom-flat-button: button-theme(
     $hover-foreground: $yellow
 );
 
-$custom-raised-button: button-theme(
+$custom-contained-button: button-theme(
     $background: $black,
     $foreground: $yellow,
     $hover-background: $black,
@@ -66,7 +66,7 @@ $custom-drop-down: drop-down-theme(
 		@include css-vars($custom-button-group);
 
 		.igx-excel-filter__apply {
-			@include css-vars($custom-raised-button);
+			@include css-vars($custom-contained-button);
 		}
 	}
 }
diff --git a/src/app/grid/grids.module.ts b/src/app/grid/grids.module.ts
index 658733f8d9..abb04fbbf5 100644
--- a/src/app/grid/grids.module.ts
+++ b/src/app/grid/grids.module.ts
@@ -9,7 +9,7 @@ import {
     IgxCardModule, IgxCheckboxModule, IgxChipsModule, IgxComboModule, IgxDatePickerModule, IgxDialogModule, IgxDividerModule,
     IgxDragDropModule,
     IgxDropDownModule,
-    IgxExpansionPanelModule, IgxFocusModule, IgxGridModule, IgxIconModule, IgxInputGroupModule, IgxListModule, IgxProgressBarModule,
+    IgxExpansionPanelModule, IgxFocusModule, IgxGridModule, IgxIconButtonDirective, IgxIconModule, IgxInputGroupModule, IgxListModule, IgxProgressBarModule,
     IgxRadioModule, IgxRippleModule, IgxSelectModule, IgxSimpleComboModule, IgxSliderModule, IgxSnackbarModule, IgxSwitchModule,
     IgxTabsModule, IgxToastModule, IgxToggleModule, IgxTooltipModule
 } from 'igniteui-angular';
@@ -314,7 +314,8 @@ import { GridCascadingCombosComponent } from './grid-cascading-combos/grid-casca
         IgxListModule,
         IgxSimpleComboModule,
         IgxDragDropModule,
-        IgxDropDownModule
+        IgxDropDownModule,
+        IgxIconButtonDirective
     ]
 })
 export class GridsModule { }
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 c0198f1544..b5559d4dc1 100644
--- a/src/app/grid/multi-column-headers/multi-column-headers.html
+++ b/src/app/grid/multi-column-headers/multi-column-headers.html
@@ -24,6 +24,6 @@
     </igx-grid>
 
     <section class="button-section">
-        <button igxButton="raised" (click)="pinGroup()">Pin first group</button>
-        <button igxButton="raised" (click)="hideGroup()">Hide first group</button>
+        <button igxButton="contained" (click)="pinGroup()">Pin first group</button>
+        <button igxButton="contained" (click)="hideGroup()">Hide first group</button>
     </section>
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 541c6c8003..e080842cbb 100644
--- a/src/app/grid/multi-column-headers/multi-column-headers.scss
+++ b/src/app/grid/multi-column-headers/multi-column-headers.scss
@@ -3,7 +3,7 @@
     margin: 16px;
 }
 
-.igx-button--raised {
+.igx-button--contained {
     margin-top: 5px;
     margin-right: 5px;
 }
diff --git a/src/app/hierarchical-grid/hgrid-rowClasses-sample/hgrid-rowClasses.component.scss b/src/app/hierarchical-grid/hgrid-rowClasses-sample/hgrid-rowClasses.component.scss
index 4bd16b7d2e..cf3c6d9696 100644
--- a/src/app/hierarchical-grid/hgrid-rowClasses-sample/hgrid-rowClasses.component.scss
+++ b/src/app/hierarchical-grid/hgrid-rowClasses-sample/hgrid-rowClasses.component.scss
@@ -1,4 +1,4 @@
-.addSingerBtn.igx-button--raised{
+.addSingerBtn.igx-button--contained{
     margin-bottom: 10px;
     background-color: lightgrey;
     color: black;
diff --git a/src/app/hierarchical-grid/hgrid-rowStyle-sample/hgrid-rowStyles.component.scss b/src/app/hierarchical-grid/hgrid-rowStyle-sample/hgrid-rowStyles.component.scss
index 3e6af0ddee..2df00e4442 100644
--- a/src/app/hierarchical-grid/hgrid-rowStyle-sample/hgrid-rowStyles.component.scss
+++ b/src/app/hierarchical-grid/hgrid-rowStyle-sample/hgrid-rowStyles.component.scss
@@ -1,4 +1,4 @@
-.addSingerBtn.igx-button--raised{
+.addSingerBtn.igx-button--contained{
     margin-bottom: 10px;
     background-color: lightgrey;
     color: black;
diff --git a/src/app/hierarchical-grid/hierarchical-grid-action-strip/hierarchical-grid-action-strip-sample.html b/src/app/hierarchical-grid/hierarchical-grid-action-strip/hierarchical-grid-action-strip-sample.html
index b3fa17636a..fc8998dcc4 100644
--- a/src/app/hierarchical-grid/hierarchical-grid-action-strip/hierarchical-grid-action-strip-sample.html
+++ b/src/app/hierarchical-grid/hierarchical-grid-action-strip/hierarchical-grid-action-strip-sample.html
@@ -35,24 +35,24 @@
         <igx-action-strip #actionstrip>
             <igx-grid-pinning-actions></igx-grid-pinning-actions>
             <ng-container *ngIf="!inEditMode(actionstrip.context)">
-                <button title="Edit" igxButton="icon" igxRipple
+                <button title="Edit" igxIconButton="flat" igxRipple
                     (click)='startEdit(actionstrip.context)'>
                     <igx-icon>edit</igx-icon>
                 </button>
-                <button title="Undo All" igxButton="icon" igxRipple *ngIf='isDirty(actionstrip.context)'
+                <button title="Undo All" igxIconButton="flat" igxRipple *ngIf='isDirty(actionstrip.context)'
                     (click)='undo(actionstrip.context)'>
                     <igx-icon>undo</igx-icon>
                 </button>
-                <button title="Redo All" igxButton="icon" igxRipple
+                <button title="Redo All" igxIconButton="flat" igxRipple
                     *ngIf='!isDirty(actionstrip.context) && hasDiscardedTransactions(actionstrip.context)'
                     (click)='redo(actionstrip.context)'>
                     <igx-icon>redo</igx-icon>
                 </button>
-                <button title='Save' igxButton="icon" igxRipple *ngIf='isDirty(actionstrip.context)'
+                <button title='Save' igxIconButton="flat" igxRipple *ngIf='isDirty(actionstrip.context)'
                     (click)='commit(actionstrip.context)'>
                     <igx-icon>save</igx-icon>
                 </button>
-                <button title="Delete" igxButton="icon" igxRipple *ngIf='!isDeleted(actionstrip.context)'
+                <button title="Delete" igxIconButton="flat" igxRipple *ngIf='!isDeleted(actionstrip.context)'
                     (click)='actionstrip.context.delete()'>
                     <igx-icon>delete</igx-icon>
                 </button>
diff --git a/src/app/hierarchical-grid/hierarchical-grid-add-row/hierarchical-grid-add-row.component.scss b/src/app/hierarchical-grid/hierarchical-grid-add-row/hierarchical-grid-add-row.component.scss
index 97551745ca..b6888c649e 100644
--- a/src/app/hierarchical-grid/hierarchical-grid-add-row/hierarchical-grid-add-row.component.scss
+++ b/src/app/hierarchical-grid/hierarchical-grid-add-row/hierarchical-grid-add-row.component.scss
@@ -1,4 +1,4 @@
-.addSingerBtn.igx-button--raised{
+.addSingerBtn.igx-button--contained{
     margin-bottom: 10px;
     background-color: lightgrey;
     color: black;
diff --git a/src/app/hierarchical-grid/hierarchical-grid-advanced-filtering-style/hierarchical-grid-advanced-filtering-style.component.scss b/src/app/hierarchical-grid/hierarchical-grid-advanced-filtering-style/hierarchical-grid-advanced-filtering-style.component.scss
index a95be61890..92376d7b2e 100644
--- a/src/app/hierarchical-grid/hierarchical-grid-advanced-filtering-style/hierarchical-grid-advanced-filtering-style.component.scss
+++ b/src/app/hierarchical-grid/hierarchical-grid-advanced-filtering-style/hierarchical-grid-advanced-filtering-style.component.scss
@@ -19,7 +19,7 @@ $custom-button: button-theme(
     $border-color: $yellow
 );
 
-$custom-raised-button: button-theme(
+$custom-contained-button: button-theme(
     $schema: $dark-material-schema,
     $background: $yellow,
     $foreground: $black,
@@ -83,7 +83,7 @@ $custom-drop-down: drop-down-theme(
             @include css-vars($custom-drop-down);
 
             .igx-excel-filter__apply {
-                @include css-vars($custom-raised-button);
+                @include css-vars($custom-contained-button);
             }
 
             .igx-filter-empty__title {
diff --git a/src/app/hierarchical-grid/hierarchical-grid-batch-editing/hierarchical-grid-batch-editing.component.scss b/src/app/hierarchical-grid/hierarchical-grid-batch-editing/hierarchical-grid-batch-editing.component.scss
index d6e632a37f..b76aa871e8 100644
--- a/src/app/hierarchical-grid/hierarchical-grid-batch-editing/hierarchical-grid-batch-editing.component.scss
+++ b/src/app/hierarchical-grid/hierarchical-grid-batch-editing/hierarchical-grid-batch-editing.component.scss
@@ -16,7 +16,7 @@ h4 {
     padding: 10px 0;
 }
 
-.addSingerBtn.igx-button--raised{
+.addSingerBtn.igx-button--contained{
     margin-bottom: 10px;
 }
 
diff --git a/src/app/hierarchical-grid/hierarchical-grid-editing/hierarchical-grid-editing.component.scss b/src/app/hierarchical-grid/hierarchical-grid-editing/hierarchical-grid-editing.component.scss
index 3e6af0ddee..2df00e4442 100644
--- a/src/app/hierarchical-grid/hierarchical-grid-editing/hierarchical-grid-editing.component.scss
+++ b/src/app/hierarchical-grid/hierarchical-grid-editing/hierarchical-grid-editing.component.scss
@@ -1,4 +1,4 @@
-.addSingerBtn.igx-button--raised{
+.addSingerBtn.igx-button--contained{
     margin-bottom: 10px;
     background-color: lightgrey;
     color: black;
diff --git a/src/app/hierarchical-grid/hierarchical-grid-excel-style-filtering-style/hierarchical-grid-excel-style-filtering-style.component.scss b/src/app/hierarchical-grid/hierarchical-grid-excel-style-filtering-style/hierarchical-grid-excel-style-filtering-style.component.scss
index 7320950c18..74cd0fb3f5 100644
--- a/src/app/hierarchical-grid/hierarchical-grid-excel-style-filtering-style/hierarchical-grid-excel-style-filtering-style.component.scss
+++ b/src/app/hierarchical-grid/hierarchical-grid-excel-style-filtering-style/hierarchical-grid-excel-style-filtering-style.component.scss
@@ -14,7 +14,7 @@ $custom-flat-button: button-theme(
     $hover-foreground: $yellow
 );
 
-$custom-raised-button: button-theme(
+$custom-contained-button: button-theme(
     $background: $black,
     $foreground: $yellow,
     $hover-background: $black,
@@ -65,7 +65,7 @@ $custom-drop-down: drop-down-theme(
 	@include css-vars($custom-button-group);
 
 	.igx-excel-filter__apply {
-		@include css-vars($custom-raised-button);
+		@include css-vars($custom-contained-button);
 	}
 }
 
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 4c9580a6fe..7cd3b64eca 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
@@ -3,6 +3,6 @@
     margin: 16px;
 }
 
-.igx-button--raised {
+.igx-button--contained {
     margin-right: 5px;
 }
diff --git a/src/app/hierarchical-grid/hierarchical-grid.module.ts b/src/app/hierarchical-grid/hierarchical-grid.module.ts
index 8c6638461c..7c0d4c5421 100644
--- a/src/app/hierarchical-grid/hierarchical-grid.module.ts
+++ b/src/app/hierarchical-grid/hierarchical-grid.module.ts
@@ -7,7 +7,7 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { IgxActionStripModule, IgxAvatarModule, IgxBadgeModule, IgxBannerModule, IgxButtonGroupModule, IgxButtonModule, IgxCheckboxModule,
     IgxChipsModule, IgxComboModule, IgxDatePickerModule, IgxDialogModule,
     IgxDragDropModule,
-    IgxFocusModule, IgxGridModule, IgxHierarchicalGridModule, IgxIconModule, IgxInputGroupModule,
+    IgxFocusModule, IgxGridModule, IgxHierarchicalGridModule, IgxIconButtonDirective, IgxIconModule, IgxInputGroupModule,
     IgxListModule, IgxProgressBarModule, IgxRadioModule, IgxRippleModule, IgxSelectModule, IgxSliderModule, IgxSnackbarModule, IgxSwitchModule,
     IgxTabsModule, IgxToastModule, IgxToggleModule, IgxTooltipModule } from 'igniteui-angular';
 import { IgxPreventDocumentScrollModule } from '../directives/prevent-scroll.directive';
@@ -225,7 +225,8 @@ import { HGridSummaryExportComponent } from './hgrid-summary-export/hgrid-summar
         IgxTooltipModule,
         IgxTabsModule,
         IgxListModule,
-        IgxDragDropModule
+        IgxDragDropModule,
+        IgxIconButtonDirective
     ]
 })
 export class HierarchicalGridModule { }
diff --git a/src/app/index/index.component.scss b/src/app/index/index.component.scss
index c158440ce0..f6cb2bd6a5 100644
--- a/src/app/index/index.component.scss
+++ b/src/app/index/index.component.scss
@@ -34,7 +34,7 @@
 }
 
 :host {
-    [igxbutton="icon"] {
+    [igxIconButton="flat"] {
         igx-icon {
             margin-left: 0;
         }
diff --git a/src/app/interactions/interactions.module.ts b/src/app/interactions/interactions.module.ts
index c5ae87c274..f9dbd02955 100644
--- a/src/app/interactions/interactions.module.ts
+++ b/src/app/interactions/interactions.module.ts
@@ -20,7 +20,8 @@ import {
     IgxSliderModule,
     IgxSwitchModule,
     IgxToggleModule,
-    IgxTooltipModule
+    IgxTooltipModule,
+    IgxIconButtonDirective
 } from 'igniteui-angular';
 import { LayoutsModule } from '../layouts/layouts.module';
 import { DialogSample1Component } from './dialog/dialog-sample-1/dialog-sample-1.component';
@@ -158,7 +159,8 @@ import { TooltipStyleComponent } from './tooltip/tooltip-style/tooltip-style.com
         IgxToggleModule,
         IgxComboModule,
         IgxListModule,
-        LayoutsModule
+        LayoutsModule,
+        IgxIconButtonDirective
     ],
     providers: [IgxOverlayService]
 })
diff --git a/src/app/interactions/overlay/overlay-preset-settings/overlay-preset-settings-sample.component.scss b/src/app/interactions/overlay/overlay-preset-settings/overlay-preset-settings-sample.component.scss
index 649625011b..6d1e09e61d 100644
--- a/src/app/interactions/overlay/overlay-preset-settings/overlay-preset-settings-sample.component.scss
+++ b/src/app/interactions/overlay/overlay-preset-settings/overlay-preset-settings-sample.component.scss
@@ -68,7 +68,7 @@
 }
 
 
-[igxButton="raised"] {
+[igxButton="contained"] {
     margin: rem(24px) 0;
 }
 
diff --git a/src/app/interactions/query-builder/query-builder-style/query-builder-style.component.scss b/src/app/interactions/query-builder/query-builder-style/query-builder-style.component.scss
index 3f7ebda9e0..e7139b5856 100644
--- a/src/app/interactions/query-builder/query-builder-style/query-builder-style.component.scss
+++ b/src/app/interactions/query-builder/query-builder-style/query-builder-style.component.scss
@@ -21,7 +21,7 @@ $custom-button: button-theme(
     $border-color: $yellow
 );
 
-$custom-raised-button: button-theme(
+$custom-contained-button: button-theme(
     $schema: $dark-material-schema,
     $background: $yellow,
     $foreground: $black,
@@ -93,8 +93,8 @@ $custom-drop-down: drop-down-theme(
             @include css-vars($custom-button);
         }
 
-        [igxButton="raised"] {
-            @include css-vars($custom-raised-button);
+        [igxButton="contained"] {
+            @include css-vars($custom-contained-button);
         }
 
         igx-query-builder {
diff --git a/src/app/layouts/layouts.module.ts b/src/app/layouts/layouts.module.ts
index 710b4fff7f..de1186743e 100644
--- a/src/app/layouts/layouts.module.ts
+++ b/src/app/layouts/layouts.module.ts
@@ -13,6 +13,7 @@ import {
     IgxDividerModule,
     IgxExpansionPanelModule,
     IgxGridModule,
+    IgxIconButtonDirective,
     IgxIconModule,
     IgxInputGroupModule,
     IgxLayoutModule,
@@ -194,7 +195,8 @@ import { StepperOverviewSampleComponent } from './stepper/stepper-overview-sampl
         IgxSwitchModule,
         IgxTabsModule,
         IgxTimePickerModule,
-        IgxToastModule
+        IgxToastModule,
+        IgxIconButtonDirective
     ],
     schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
diff --git a/src/app/layouts/tabs/tabs-header-prefix-suffix/tabs-header-prefix-suffix.html b/src/app/layouts/tabs/tabs-header-prefix-suffix/tabs-header-prefix-suffix.html
index bb4aa5c471..b5f89de4f9 100644
--- a/src/app/layouts/tabs/tabs-header-prefix-suffix/tabs-header-prefix-suffix.html
+++ b/src/app/layouts/tabs/tabs-header-prefix-suffix/tabs-header-prefix-suffix.html
@@ -3,7 +3,7 @@
         <igx-tab-header>
             <img igxPrefix src="{{item.image}}" height="20px" width="20px"/>
             <h6>{{item.header}}</h6>
-            <button igxButton="icon" igxSuffix (click)="closeTab(i)">
+            <button igxIconButton="flat" igxSuffix (click)="closeTab(i)">
                 <igx-icon>close</igx-icon>
             </button>
         </igx-tab-header>
diff --git a/src/app/lists/lists.module.ts b/src/app/lists/lists.module.ts
index 5522f4c15f..e901c08d06 100644
--- a/src/app/lists/lists.module.ts
+++ b/src/app/lists/lists.module.ts
@@ -19,7 +19,8 @@ import {
     IgxToastModule,
     IgxTooltipModule,
     IgxTreeModule,
-    IgxProgressBarModule
+    IgxProgressBarModule,
+    IgxIconButtonDirective
 } from 'igniteui-angular';
 import { IgxFinancialChartModule } from 'igniteui-angular-charts';
 import { ComboBindingComponent } from './combo/combo-binding/combo-binding.component';
@@ -101,7 +102,8 @@ import { SimpleComboRemoteComponent } from './combo/simple-combo-remote/simple-c
         IgxTooltipModule,
         IgxFinancialChartModule,
         IgxSimpleComboModule,
-        IgxProgressBarModule
+        IgxProgressBarModule,
+        IgxIconButtonDirective
     ]
 })
 export class ListsModule { }
diff --git a/src/app/menus/menus.module.ts b/src/app/menus/menus.module.ts
index ef6bf009cd..9c00d82a29 100644
--- a/src/app/menus/menus.module.ts
+++ b/src/app/menus/menus.module.ts
@@ -5,6 +5,7 @@ import {
     IgxActionStripModule,
     IgxButtonGroupModule,
     IgxButtonModule,
+    IgxIconButtonDirective,
     IgxIconModule,
     IgxLayoutModule,
     IgxNavbarModule,
@@ -71,7 +72,8 @@ import { NavDrawerHierarchicalComponent } from './navdrawer/nav-drawer-hierarchi
         IgxSwitchModule,
         IgxToggleModule,
         IgxNavbarModule,
-        IgxTreeModule
+        IgxTreeModule,
+        IgxIconButtonDirective
     ]
 })
 export class MenusModule { }
diff --git a/src/app/notifications/notifications.module.ts b/src/app/notifications/notifications.module.ts
index fcb5ca6466..9663d32aca 100644
--- a/src/app/notifications/notifications.module.ts
+++ b/src/app/notifications/notifications.module.ts
@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { IgxAvatarModule, IgxBannerModule, IgxButtonModule, IgxCardModule, IgxIconModule, IgxInputGroupModule,
+import { IgxAvatarModule, IgxBannerModule, IgxButtonModule, IgxCardModule, IgxIconButtonDirective, IgxIconModule, IgxInputGroupModule,
      IgxListModule, IgxNavbarModule, IgxRippleModule, IgxSnackbarModule,
      IgxSwitchModule, IgxToastModule } from 'igniteui-angular';
 import { BannerAdvancedSampleComponent } from './banner/banner-advanced-sample/banner-advanced-sample.component';
@@ -58,7 +58,8 @@ import { ToastStyleComponent } from './toast/toast-style/toast-style.component';
         IgxRippleModule,
         IgxSnackbarModule,
         IgxSwitchModule,
-        IgxToastModule
+        IgxToastModule,
+        IgxIconButtonDirective
     ]
 })
 export class NotificationsModule {}
diff --git a/src/app/pagination/pagination.module.ts b/src/app/pagination/pagination.module.ts
index 5587596ff3..1ceb824ae3 100644
--- a/src/app/pagination/pagination.module.ts
+++ b/src/app/pagination/pagination.module.ts
@@ -2,7 +2,7 @@ import { CommonModule } from '@angular/common';
 import { HttpClientModule } from '@angular/common/http';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { IgxButtonGroupModule, IgxButtonModule, IgxCardModule, IgxIconModule, IgxPaginatorModule, IgxRippleModule } from 'igniteui-angular';
+import { IgxButtonGroupModule, IgxButtonModule, IgxCardModule, IgxIconButtonDirective, IgxIconModule, IgxPaginatorModule, IgxRippleModule } from 'igniteui-angular';
 import { PaginatorRoutingModule } from './pagination-routing.module';
 import { PaginationSampleComponent } from './paginator/pagination-sample.component';
 
@@ -20,7 +20,8 @@ import { PaginationSampleComponent } from './paginator/pagination-sample.compone
         IgxButtonModule,
         IgxButtonGroupModule,
         IgxIconModule,
-        IgxRippleModule
+        IgxRippleModule,
+        IgxIconButtonDirective
     ]
 })
 export class PaginationModule { }
diff --git a/src/app/scheduling/calendar/calendar-sample-7/calendar-sample-7.component.scss b/src/app/scheduling/calendar/calendar-sample-7/calendar-sample-7.component.scss
index 9281393d89..667e5027ec 100644
--- a/src/app/scheduling/calendar/calendar-sample-7/calendar-sample-7.component.scss
+++ b/src/app/scheduling/calendar/calendar-sample-7/calendar-sample-7.component.scss
@@ -11,6 +11,6 @@
     border-radius: 0;
 }
 
-.igx-button--raised {
+.igx-button--contained {
     border-radius: 0;
 }
diff --git a/src/app/scheduling/calendar/multiview/multiview.component.scss b/src/app/scheduling/calendar/multiview/multiview.component.scss
index 606641b807..8a1827773d 100644
--- a/src/app/scheduling/calendar/multiview/multiview.component.scss
+++ b/src/app/scheduling/calendar/multiview/multiview.component.scss
@@ -11,7 +11,7 @@
     border-radius: 0;
 }
 
-.igx-button--raised {
+.igx-button--contained {
     border-radius: 0;
 }
 
diff --git a/src/app/theming/default-theme-sample/default-theme-sample.component.scss b/src/app/theming/default-theme-sample/default-theme-sample.component.scss
index 5b76cc505a..ccb7599bad 100644
--- a/src/app/theming/default-theme-sample/default-theme-sample.component.scss
+++ b/src/app/theming/default-theme-sample/default-theme-sample.component.scss
@@ -1,4 +1,4 @@
-.addProdBtn.igx-button--raised {
+.addProdBtn.igx-button--contained {
     margin-bottom: 5px;
 }
 
diff --git a/src/app/theming/shadows/card-sample-shadow/card-sample-shadow.html b/src/app/theming/shadows/card-sample-shadow/card-sample-shadow.html
index d0a2f69dab..a943922347 100644
--- a/src/app/theming/shadows/card-sample-shadow/card-sample-shadow.html
+++ b/src/app/theming/shadows/card-sample-shadow/card-sample-shadow.html
@@ -20,7 +20,7 @@ <h5 class="igx-card-header__subtitle">subtitle</h5>
         </igx-card-content>
         <igx-card-actions>
             <div class="igx-card-actions__igroup--start">
-                <span igxButton="icon" igxRipple [igxRippleCentered]="true">
+                <span igxIconButton="flat" igxRipple [igxRippleCentered]="true">
                     <igx-icon fontSet="material">favorite</igx-icon>
                 </span>
             </div>
@@ -53,7 +53,7 @@ <h5 class="igx-card-header__subtitle">subtitle</h5>
         </igx-card-content>
         <igx-card-actions>
             <div class="igx-card-actions__igroup--start">
-                <span igxButton="icon" igxRipple [igxRippleCentered]="true">
+                <span igxIconButton="flat" igxRipple [igxRippleCentered]="true">
                     <igx-icon fontSet="material">favorite</igx-icon>
                 </span>
             </div>
diff --git a/src/app/theming/theming.module.ts b/src/app/theming/theming.module.ts
index c70b87dc6c..eba48d0055 100644
--- a/src/app/theming/theming.module.ts
+++ b/src/app/theming/theming.module.ts
@@ -3,7 +3,7 @@ import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { IgxAvatarModule, IgxButtonGroupModule, IgxButtonModule, IgxCalendarModule, IgxCardModule, IgxDatePickerModule,
-    IgxDialogModule, IgxDividerModule, IgxDropDownModule, IgxExpansionPanelModule, IgxGridModule, IgxIconModule, IgxInputGroupModule,
+    IgxDialogModule, IgxDividerModule, IgxDropDownModule, IgxExpansionPanelModule, IgxGridModule, IgxIconButtonDirective, IgxIconModule, IgxInputGroupModule,
     IgxLayoutModule, IgxListModule, IgxRippleModule, IgxSelectModule, IgxSnackbarModule, IgxToggleModule } from 'igniteui-angular';
 import { MatButtonModule } from '@angular/material/button';
 import { MatFormFieldModule } from '@angular/material/form-field';
@@ -77,6 +77,7 @@ import { ThemingRoutingModule } from './theming-routing.module';
         MatSliderModule,
         MatStepperModule,
         MatToolbarModule,
+        IgxIconButtonDirective,
         NgbModule
     ]
 })
diff --git a/src/app/tree-grid/tree-grid-action-strip/tree-grid-action-strip-sample.html b/src/app/tree-grid/tree-grid-action-strip/tree-grid-action-strip-sample.html
index bf8b732ea4..d881f41ad9 100644
--- a/src/app/tree-grid/tree-grid-action-strip/tree-grid-action-strip-sample.html
+++ b/src/app/tree-grid/tree-grid-action-strip/tree-grid-action-strip-sample.html
@@ -15,24 +15,24 @@
         <igx-action-strip #actionstrip>
             <igx-grid-pinning-actions></igx-grid-pinning-actions>
             <ng-container *ngIf="!inEditMode(actionstrip.context)">
-                <button title="Edit" igxButton="icon" igxRipple
+                <button title="Edit" igxIconButton="flat" igxRipple
                     (click)='startEdit(actionstrip.context)'>
                     <igx-icon>edit</igx-icon>
                 </button>
-                <button title="Undo All" igxButton="icon" igxRipple *ngIf='isDirty(actionstrip.context)'
+                <button title="Undo All" igxIconButton="flat" igxRipple *ngIf='isDirty(actionstrip.context)'
                     (click)='undo(actionstrip.context)'>
                     <igx-icon>undo</igx-icon>
                 </button>
-                <button title="Redo All" igxButton="icon" igxRipple
+                <button title="Redo All" igxIconButton="flat" igxRipple
                     *ngIf='!isDirty(actionstrip.context) && hasDiscardedTransactions(actionstrip.context)'
                     (click)='redo(actionstrip.context)'>
                     <igx-icon>redo</igx-icon>
                 </button>
-                <button title='Save' igxButton="icon" igxRipple *ngIf='isDirty(actionstrip.context)'
+                <button title='Save' igxIconButton="flat" igxRipple *ngIf='isDirty(actionstrip.context)'
                     (click)='commit(actionstrip.context)'>
                     <igx-icon>save</igx-icon>
                 </button>
-                <button title="Delete" igxButton="icon" igxRipple *ngIf='!isDeleted(actionstrip.context)'
+                <button title="Delete" igxIconButton="flat" igxRipple *ngIf='!isDeleted(actionstrip.context)'
                     (click)='actionstrip.context.delete()'>
                     <igx-icon>delete</igx-icon>
                 </button>
diff --git a/src/app/tree-grid/tree-grid-advanced-filtering-style/tree-grid-advanced-filtering-style.component.scss b/src/app/tree-grid/tree-grid-advanced-filtering-style/tree-grid-advanced-filtering-style.component.scss
index ca1eb6bb7b..39f95d7158 100644
--- a/src/app/tree-grid/tree-grid-advanced-filtering-style/tree-grid-advanced-filtering-style.component.scss
+++ b/src/app/tree-grid/tree-grid-advanced-filtering-style/tree-grid-advanced-filtering-style.component.scss
@@ -19,7 +19,7 @@ $custom-button: button-theme(
     $border-color: $yellow
 );
 
-$custom-raised-button: button-theme(
+$custom-contained-button: button-theme(
     $schema: $dark-material-schema,
     $background: $yellow,
     $foreground: $black,
@@ -84,7 +84,7 @@ $custom-drop-down: drop-down-theme(
             @include css-vars($custom-drop-down);
 
             .igx-excel-filter__apply {
-                @include css-vars($custom-raised-button);
+                @include css-vars($custom-contained-button);
             }
 
             .igx-filter-empty__title {
diff --git a/src/app/tree-grid/tree-grid-excel-style-filtering-style/tree-grid-excel-style-filtering-style.component.scss b/src/app/tree-grid/tree-grid-excel-style-filtering-style/tree-grid-excel-style-filtering-style.component.scss
index c62963069e..5ccb5da7d2 100644
--- a/src/app/tree-grid/tree-grid-excel-style-filtering-style/tree-grid-excel-style-filtering-style.component.scss
+++ b/src/app/tree-grid/tree-grid-excel-style-filtering-style/tree-grid-excel-style-filtering-style.component.scss
@@ -14,7 +14,7 @@ $custom-flat-button: button-theme(
     $hover-foreground: $yellow
 );
 
-$custom-raised-button: button-theme(
+$custom-contained-button: button-theme(
     $background: $black,
     $foreground: $yellow,
     $hover-background: $black,
@@ -66,7 +66,7 @@ $custom-drop-down: drop-down-theme(
         @include css-vars($custom-button-group);
 
         .igx-excel-filter__apply {
-            @include css-vars($custom-raised-button);
+            @include css-vars($custom-contained-button);
         }
     }
 }
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 a2d3285174..a0ccbe533b 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
@@ -3,6 +3,6 @@
     margin: 10px;
 }
 
-.igx-button--raised {
+.igx-button--contained {
     margin-right: 5px;
 }
diff --git a/src/app/tree-grid/tree-grid.module.ts b/src/app/tree-grid/tree-grid.module.ts
index 408619f59b..1d4e2dd035 100644
--- a/src/app/tree-grid/tree-grid.module.ts
+++ b/src/app/tree-grid/tree-grid.module.ts
@@ -17,6 +17,7 @@ import {
     IgxDragDropModule,
     IgxFocusModule,
     IgxGridModule,
+    IgxIconButtonDirective,
     IgxIconModule,
     IgxInputGroupModule,
     IgxListModule,
@@ -271,7 +272,8 @@ import { TreeGridSummaryExportComponent } from './tree-grid-summary-export/tree-
         IgxSimpleComboModule,
         IgxInputGroupModule,
         IgxDragDropModule,
-        IgxFocusModule
+        IgxFocusModule,
+        IgxIconButtonDirective
     ],
     providers: [RemoteFilteringService]
 })