Tabs/TabPanel: icon position in Material

packages/devextreme/js/ui/tabs.js

@@ -148,7 +148,8 @@ const Tabs = CollectionWidget.inherit({
                 },
                 options: {
                     useInkRipple: true,
-                    selectOnFocus: false
+                    selectOnFocus: false,
+                    iconPosition: ICON_POSITION.top,
                 }
             }
         ]);

packages/devextreme/scss/widgets/material/tabs/_index.scss

@@ -86,7 +86,6 @@
   }
 
   .dx-tab-text {
-    flex-direction: column;
     text-transform: uppercase;
     line-height: $material-tab-text-line-height;
     font-weight: 500;
@@ -159,6 +158,14 @@
   }
 }
 
+.dx-tabs-icon-position-start .dx-tab .dx-icon {
+  @include dx-icon-margin($material-base-icon-margin, start);
+}
+
+.dx-tabs-icon-position-end .dx-tab .dx-icon {
+  @include dx-icon-margin($material-base-icon-margin, end);
+}
+
 .dx-tabs-vertical {
   .dx-tab-selected {
     @include dx-tabs-border-mixin(left, $tabs-selected-tab-border-color);
@@ -168,14 +175,6 @@
     }
   }
 
-  .dx-tab-text {
-    flex-direction: row;
-
-    .dx-icon {
-      @include dx-icon-margin($material-base-icon-margin-right);
-    }
-  }
-
   .dx-tabs-nav-button {
     padding: $material-tab-vertical-nav-button-content-padding;
   }

packages/devextreme/scss/widgets/material/tabs/_sizes.scss

@@ -8,8 +8,7 @@ $material-tab-height: null !default;
 $material-tab-min-width: null !default;
 
 $material-tab-text-line-height: null !default;
-$material-base-icon-margin-right: null !default;
-$material-base-icon-margin-bottom: null !default;
+$material-base-icon-margin: null !default;
 
 $material-tab-nav-button-icon-width: null !default;
 $material-tab-nav-button-icon-height: null !default;
@@ -22,8 +21,7 @@ $material-tab-vertical-nav-button-content-padding: null !default;
   $material-tabs-item-padding: 12px 16px !default;
   $material-tab-height: auto !default;
   $material-tab-min-width: 90px !default;
-  $material-base-icon-margin-right: 8px !default;
-  $material-base-icon-margin-bottom: 4px !default;
+  $material-base-icon-margin: 8px !default;
   $material-tab-text-line-height: 24px !default;
   $material-tab-nav-button-icon-width: 24px !default;
   $material-tab-nav-button-icon-height: 24px !default;
@@ -36,8 +34,7 @@ $material-tab-vertical-nav-button-content-padding: null !default;
   $material-tabs-item-padding: 6px 12px !default;
   $material-tab-height: auto !default;
   $material-tab-min-width: 82px !default;
-  $material-base-icon-margin-right: 8px !default;
-  $material-base-icon-margin-bottom: 4px !default;
+  $material-base-icon-margin: 8px !default;
   $material-tab-text-line-height: 24px !default;
   $material-tab-nav-button-icon-width: 24px !default;
   $material-tab-nav-button-icon-height: 24px !default;

packages/devextreme/testing/testcafe/tests/navigation/tabPanel/common.ts

@@ -1,6 +1,6 @@
 import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
 import { Selector, ClientFunction } from 'testcafe';
-import { testScreenshot, isMaterial } from '../../../helpers/themeUtils';
+import { testScreenshot } from '../../../helpers/themeUtils';
 import url from '../../../helpers/getPageUrl';
 import createWidget from '../../../helpers/createWidget';
 import TabPanel from '../../../model/tabPanel';
@@ -425,9 +425,7 @@ test('TabPanel borders without scrolling', async (t) => {
     test('TabPanel icon position', async (t) => {
       const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
-      if (!isMaterial()) {
-        await testScreenshot(t, takeScreenshot, `TabPanel iconPosition=${iconPosition},rtl=${rtlEnabled}.png`, { element: '#container' });
-      }
+      await testScreenshot(t, takeScreenshot, `TabPanel iconPosition=${iconPosition},rtl=${rtlEnabled}.png`, { element: '#container' });
 
       await t
         .expect(compareResults.isValid())

packages/devextreme/testing/testcafe/tests/navigation/tabs/common.ts

@@ -16,9 +16,7 @@ fixture.disablePageReloads`Tabs_common`
     test('Tabs icon position', async (t) => {
       const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
-      if (!isMaterial()) {
-        await testScreenshot(t, takeScreenshot, `Tabs iconPosition=${iconPosition},rtl=${rtlEnabled}.png`, { element: '#tabs', shouldTestInCompact: true });
-      }
+      await testScreenshot(t, takeScreenshot, `Tabs iconPosition=${iconPosition},rtl=${rtlEnabled}.png`, { element: '#tabs', shouldTestInCompact: true });
 
       await t
         .expect(compareResults.isValid())