@zohodesk/dot 1.7.13 → 1.7.14

package/coverage/src/version2/lookup/AlertLookup/props/index.html

@@ -116,7 +116,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-07-16T12:42:32.284Z
+                at 2025-07-16T14:50:33.531Z
             </div>
         <script src="../../../../../prettify.js"></script>
         <script>

package/coverage/src/version2/lookup/AlertLookup/props/propTypes.js.html

@@ -199,7 +199,7 @@ export const propTypes = {
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-07-16T12:42:32.284Z
+                at 2025-07-16T14:50:33.531Z
             </div>
         <script src="../../../../../prettify.js"></script>
         <script>

package/coverage/src/version2/notification/DesktopNotification/DesktopNotification.js.html

@@ -697,7 +697,7 @@ DesktopNotification.defaultProps = defaultProps;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-07-16T12:42:32.284Z
+                at 2025-07-16T14:50:33.531Z
             </div>
         <script src="../../../../prettify.js"></script>
         <script>

package/coverage/src/version2/notification/DesktopNotification/DesktopNotification.module.css.html

@@ -409,7 +409,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-07-16T12:42:32.284Z
+                at 2025-07-16T14:50:33.531Z
             </div>
         <script src="../../../../prettify.js"></script>
         <script>

package/coverage/src/version2/notification/DesktopNotification/index.html

@@ -116,7 +116,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-07-16T12:42:32.284Z
+                at 2025-07-16T14:50:33.531Z
             </div>
         <script src="../../../../prettify.js"></script>
         <script>

package/coverage/src/version2/notification/DesktopNotification/props/defaultProps.js.html

@@ -124,7 +124,7 @@ export const defaultProps = {
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-07-16T12:42:32.284Z
+                at 2025-07-16T14:50:33.531Z
             </div>
         <script src="../../../../../prettify.js"></script>
         <script>

package/coverage/src/version2/notification/DesktopNotification/props/index.html

@@ -116,7 +116,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-07-16T12:42:32.284Z
+                at 2025-07-16T14:50:33.531Z
             </div>
         <script src="../../../../../prettify.js"></script>
         <script>

package/coverage/src/version2/notification/DesktopNotification/props/propTypes.js.html

@@ -202,7 +202,7 @@ export const DesktopNotificationUI_propTypes = {
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-07-16T12:42:32.284Z
+                at 2025-07-16T14:50:33.531Z
             </div>
         <script src="../../../../../prettify.js"></script>
         <script>

package/coverage/src/version2/notification/DesktopNotificationHeader/DesktopNotificationHeader.js.html

@@ -346,7 +346,7 @@ DesktopNotificationHeader.defaultProps = defaultProps;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-07-16T12:42:32.284Z
+                at 2025-07-16T14:50:33.531Z
             </div>
         <script src="../../../../prettify.js"></script>
         <script>

package/coverage/src/version2/notification/DesktopNotificationHeader/DesktopNotificationHeader.module.css.html

@@ -370,7 +370,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-07-16T12:42:32.284Z
+                at 2025-07-16T14:50:33.531Z
             </div>
         <script src="../../../../prettify.js"></script>
         <script>

package/coverage/src/version2/notification/DesktopNotificationHeader/index.html

@@ -116,7 +116,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-07-16T12:42:32.284Z
+                at 2025-07-16T14:50:33.531Z
             </div>
         <script src="../../../../prettify.js"></script>
         <script>

package/coverage/src/version2/notification/DesktopNotificationHeader/props/defaultProps.js.html

@@ -94,7 +94,7 @@ export const defaultProps = {
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-07-16T12:42:32.284Z
+                at 2025-07-16T14:50:33.531Z
             </div>
         <script src="../../../../../prettify.js"></script>
         <script>

package/coverage/src/version2/notification/DesktopNotificationHeader/props/index.html

@@ -116,7 +116,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-07-16T12:42:32.284Z
+                at 2025-07-16T14:50:33.531Z
             </div>
         <script src="../../../../../prettify.js"></script>
         <script>

package/coverage/src/version2/notification/DesktopNotificationHeader/props/propTypes.js.html

@@ -109,7 +109,7 @@ export const propTypes = {
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-07-16T12:42:32.284Z
+                at 2025-07-16T14:50:33.531Z
             </div>
         <script src="../../../../../prettify.js"></script>
         <script>

package/es/AttachmentViewer/__tests__/__snapshots__/AttachmentViewer.spec.js.snap

@@ -87,7 +87,7 @@ exports[`AttachmentViewer rendering the when isActive is true  1`] = `
                     >
                       <i
                         aria-hidden="true"
-                        class="zd_font_icons basic icon-download    "
+                        class="zd_font_icons basic icon-download   icon_button_center  "
                         data-id="fontIcon"
                         data-selector-id="fontIcon"
                         data-test-id="fontIcon"
@@ -111,7 +111,7 @@ exports[`AttachmentViewer rendering the when isActive is true  1`] = `
                   >
                     <i
                       aria-hidden="true"
-                      class="zd_font_icons basic icon-cross    "
+                      class="zd_font_icons basic icon-cross   icon_button_center  "
                       data-id="fontIcon"
                       data-selector-id="fontIcon"
                       data-test-id="fontIcon"
@@ -369,7 +369,7 @@ exports[`AttachmentViewer rendering the when isActive is true  1`] = `
         >
           <i
             aria-hidden="true"
-            class="zd_font_icons basic icon-hideTab  thumpIcon thumpIconActive  "
+            class="zd_font_icons basic icon-hideTab  thumpIcon thumpIconActive icon_button_center  "
             data-id="fontIcon"
             data-selector-id="fontIcon"
             data-test-id="fontIcon"

package/es/Drawer/__tests__/__snapshots__/Header.spec.js.snap

@@ -73,7 +73,7 @@ exports[`Header Component - Title Prop Combinations renders Header with title an
         >
           <i
             aria-hidden="true"
-            class="zd_font_icons basic icon-cross    "
+            class="zd_font_icons basic icon-cross   icon_button_center  "
             data-id="fontIcon"
             data-selector-id="fontIcon"
             data-test-id="fontIcon"
@@ -438,7 +438,7 @@ exports[`Header Component - Title Prop Combinations renders Header with title, c
         >
           <i
             aria-hidden="true"
-            class="zd_font_icons basic icon-cross    "
+            class="zd_font_icons basic icon-cross   icon_button_center  "
             data-id="fontIcon"
             data-selector-id="fontIcon"
             data-test-id="fontIcon"
@@ -539,7 +539,7 @@ exports[`Header Component - Title Prop Combinations renders Header with title, i
         >
           <i
             aria-hidden="true"
-            class="zd_font_icons basic icon-cross    "
+            class="zd_font_icons basic icon-cross   icon_button_center  "
             data-id="fontIcon"
             data-selector-id="fontIcon"
             data-test-id="fontIcon"
@@ -736,7 +736,7 @@ exports[`Header Component - Title Prop Combinations renders Header with title, i
         >
           <i
             aria-hidden="true"
-            class="zd_font_icons basic icon-cross    "
+            class="zd_font_icons basic icon-cross   icon_button_center  "
             data-id="fontIcon"
             data-selector-id="fontIcon"
             data-test-id="fontIcon"

package/es/FlipCard/__tests__/__snapshots__/FlipCard.spec.js.snap

@@ -161,7 +161,7 @@ exports[`FlipCard renders correctly with channel: chat and action: outgoing 1`]
           >
             <i
               aria-hidden="true"
-              class="zd_font_icons basic icon-chChatOut   iconStyle chat_outgoing   iconColor  undefined   blue"
+              class="zd_font_icons basic icon-chChatOut   iconStyle chat_outgoing   avatar_align_center  iconColor     blue"
               data-id="fontIcon"
               data-selector-id="fontIcon"
               data-test-id="fontIcon"
@@ -255,7 +255,7 @@ exports[`FlipCard renders correctly with channel: email and action: incoming 1`]
           >
             <i
               aria-hidden="true"
-              class="zd_font_icons basic icon-chMailIn   iconStyle email_incoming   iconColor  undefined   green"
+              class="zd_font_icons basic icon-chMailIn   iconStyle email_incoming   avatar_align_center  iconColor     green"
               data-id="fontIcon"
               data-selector-id="fontIcon"
               data-test-id="fontIcon"
@@ -525,7 +525,7 @@ exports[`FlipCard renders correctly with className, channel, and action 1`] = `
           >
             <i
               aria-hidden="true"
-              class="zd_font_icons basic icon-chMailIn   iconStyle email_incoming   iconColor  undefined   green"
+              class="zd_font_icons basic icon-chMailIn   iconStyle email_incoming   avatar_align_center  iconColor     green"
               data-id="fontIcon"
               data-selector-id="fontIcon"
               data-test-id="fontIcon"
@@ -1250,7 +1250,7 @@ exports[`FlipCard renders correctly with iconSize as a number and channel & acti
           >
             <i
               aria-hidden="true"
-              class="zd_font_icons basic icon-chMailIn   iconStyle email_incoming   iconColor  undefined   green"
+              class="zd_font_icons basic icon-chMailIn   iconStyle email_incoming   avatar_align_center  iconColor     green"
               data-id="fontIcon"
               data-selector-id="fontIcon"
               data-test-id="fontIcon"
@@ -1835,7 +1835,7 @@ exports[`FlipCard renders correctly with palette, channel, and action 1`] = `
           >
             <i
               aria-hidden="true"
-              class="zd_font_icons basic icon-chChatOut   iconStyle chat_outgoing   iconColor  undefined   blue"
+              class="zd_font_icons basic icon-chChatOut   iconStyle chat_outgoing   avatar_align_center  iconColor     blue"
               data-id="fontIcon"
               data-selector-id="fontIcon"
               data-test-id="fontIcon"
@@ -3824,7 +3824,7 @@ exports[`FlipCard renders with icon 1`] = `
         >
           <i
             aria-hidden="true"
-            class="zd_font_icons basic icon-ch-email    iconColor  undefined   "
+            class="zd_font_icons basic icon-ch-email    avatar_align_center  iconColor     "
             data-id="fontIcon"
             data-selector-id="fontIcon"
             data-test-id="fontIcon"

package/es/IconButton/IconButton.js

@@ -136,7 +136,7 @@ export default class IconButton extends React.Component {
       isBold: isBold,
       size: iconSize,
       name: iconName,
-      iconClass: iconClass
+      iconClass: `${iconClass} ${style.icon_button_center}`
     }) : null, children ? children : null));
   }
 

package/es/IconButton/IconButton.module.css

@@ -46,4 +46,7 @@
 .primaryFilled,
 .primaryFilled_active {
   --iconColor: var(--zdt_iconButton_icon_primaryActive);
+}
+.icon_button_center {
+  composes: tcenter from '~@zohodesk/components/lib/common/common.module.css';
 }

package/es/IconButton/__tests__/__snapshots__/IconButton.spec.js.snap

@@ -94,7 +94,7 @@ exports[`IconButton rendering in Icon 1`] = `
   >
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-infoStroke fbold iconClass  "
+      class="zd_font_icons basic icon-infoStroke fbold iconClass icon_button_center  "
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"

package/es/PlusIcon/__tests__/__snapshots__/PlusIcon.spec.js.snap

@@ -15,7 +15,7 @@ exports[`PlusIcon renders with  size is  - medium 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus    icon iconColor  undefined   "
+        class="zd_font_icons basic icon-plus    icon avatar_align_center  iconColor     "
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -41,7 +41,7 @@ exports[`PlusIcon renders with  size is  - small 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus    icon iconColor  undefined   "
+        class="zd_font_icons basic icon-plus    icon avatar_align_center  iconColor     "
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -67,7 +67,7 @@ exports[`PlusIcon renders with  size is  - xlarge 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus    icon iconColor  undefined   "
+        class="zd_font_icons basic icon-plus    icon avatar_align_center  iconColor     "
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -93,7 +93,7 @@ exports[`PlusIcon renders with  size is  - xmedium 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus    icon iconColor  undefined   "
+        class="zd_font_icons basic icon-plus    icon avatar_align_center  iconColor     "
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -119,7 +119,7 @@ exports[`PlusIcon renders with  size is  - xsmall 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus    icon iconColor  undefined   "
+        class="zd_font_icons basic icon-plus    icon avatar_align_center  iconColor     "
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -145,7 +145,7 @@ exports[`PlusIcon renders with  size is  - xxsmall 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus    icon iconColor  undefined   "
+        class="zd_font_icons basic icon-plus    icon avatar_align_center  iconColor     "
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -171,7 +171,7 @@ exports[`PlusIcon renders with customClass prop 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus    icon iconColor  undefined   "
+        class="zd_font_icons basic icon-plus    icon avatar_align_center  iconColor     "
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -197,7 +197,7 @@ exports[`PlusIcon renders with dataId prop 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus    icon iconColor  undefined   "
+        class="zd_font_icons basic icon-plus    icon avatar_align_center  iconColor     "
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -223,7 +223,7 @@ exports[`PlusIcon renders with default props 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus    icon iconColor  undefined   "
+        class="zd_font_icons basic icon-plus    icon avatar_align_center  iconColor     "
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -249,7 +249,7 @@ exports[`PlusIcon renders with iconClass prop 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus   custom-icon-class icon iconColor  undefined   "
+        class="zd_font_icons basic icon-plus   custom-icon-class icon avatar_align_center  iconColor     "
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -275,7 +275,7 @@ exports[`PlusIcon renders with iconName prop 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus    icon iconColor  undefined   "
+        class="zd_font_icons basic icon-plus    icon avatar_align_center  iconColor     "
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -301,7 +301,7 @@ exports[`PlusIcon renders with iconSize prop 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus    icon iconColor  undefined   "
+        class="zd_font_icons basic icon-plus    icon avatar_align_center  iconColor     "
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -328,7 +328,7 @@ exports[`PlusIcon renders with title prop 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus    icon iconColor  undefined   "
+        class="zd_font_icons basic icon-plus    icon avatar_align_center  iconColor     "
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"

package/es/alert/AlertHeader/__tests__/__snapshots__/AlertHeader.spec.js.snap

@@ -770,7 +770,7 @@ exports[`AlertHeader renders with onClose function and closeTitle 1`] = `
       >
         <i
           aria-hidden="true"
-          class="zd_font_icons basic icon-cross    "
+          class="zd_font_icons basic icon-cross   icon_button_center  "
           data-id="fontIcon"
           data-selector-id="fontIcon"
           data-test-id="fontIcon"

package/es/avatar/AvatarIcon/AvatarIcon.js

@@ -29,7 +29,7 @@ export default class AvatarIcon extends React.Component {
     } = customProps;
     let border = borderOnHover || onClick;
     return /*#__PURE__*/React.createElement(Container, {
-      className: `${style.container} ${borderOnActive ? style.borderOnActive : border ? style.borderOnHover : ''} ${AvatarSize(size)} ${style[palette]} ${className}`,
+      className: `${style.container} ${borderOnActive ? style.borderOnActive : border ? style.borderOnHover : ''} ${AvatarSize(size)} ${style[palette] ? style[palette] : ''} ${className}`,
       onClick: onClick,
       dataId: dataId,
       "data-title": title,
@@ -41,7 +41,7 @@ export default class AvatarIcon extends React.Component {
     }, /*#__PURE__*/React.createElement(Icon, {
       name: name,
       size: iconSize,
-      iconClass: ` ${iconClass} ${style.iconColor} ${iconColor ? ` ${style[`icon_${iconColor}`]}` : ''} `,
+      iconClass: ` ${iconClass} ${style.avatar_align_center}  ${style.iconColor} ${iconColor ? ` ${style[`icon_${iconColor}`] ? style[`icon_${iconColor}`] : ''}` : ''} `,
       isBold: isIconBold
     }));
   }

package/es/avatar/AvatarIcon/AvatarIcon.module.css

@@ -56,3 +56,6 @@
   --icon_color: var(--zdt_avatarIcon_dark_icon);
 }
 
+.avatar_align_center {
+  composes: tcenter from '~@zohodesk/components/lib/common/common.module.css';
+}

package/es/avatar/AvatarIcon/__tests__/__snapshots__/AvatarIcon.spec.js.snap

@@ -10,7 +10,7 @@ exports[`AvatarIcon rendering the defult props 1`] = `
   >
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-add-ag    iconColor  undefined   "
+      class="zd_font_icons basic icon-add-ag    avatar_align_center  iconColor     "
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"

package/es/lookup/header/Close/__tests__/__snapshots__/Close.spec.js.snap

@@ -12,7 +12,7 @@ exports[`AlphabeticList rendering the defult props 1`] = `
   >
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-cross    "
+      class="zd_font_icons basic icon-cross   icon_button_center  "
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"

package/es/lookup/header/TicketHeader/__tests__/__snapshots__/TicketHeader.spec.js.snap

@@ -46,7 +46,7 @@ exports[`TicketHeader rendering the defult props 1`] = `
       >
         <i
           aria-hidden="true"
-          class="zd_font_icons basic icon-cross    "
+          class="zd_font_icons basic icon-cross   icon_button_center  "
           data-id="fontIcon"
           data-selector-id="fontIcon"
           data-test-id="fontIcon"

package/lib/AttachmentViewer/__tests__/__snapshots__/AttachmentViewer.spec.js.snap

@@ -87,7 +87,7 @@ exports[`AttachmentViewer rendering the when isActive is true  1`] = `
                     >
                       <i
                         aria-hidden="true"
-                        class="zd_font_icons basic icon-download    "
+                        class="zd_font_icons basic icon-download   icon_button_center  "
                         data-id="fontIcon"
                         data-selector-id="fontIcon"
                         data-test-id="fontIcon"
@@ -111,7 +111,7 @@ exports[`AttachmentViewer rendering the when isActive is true  1`] = `
                   >
                     <i
                       aria-hidden="true"
-                      class="zd_font_icons basic icon-cross    "
+                      class="zd_font_icons basic icon-cross   icon_button_center  "
                       data-id="fontIcon"
                       data-selector-id="fontIcon"
                       data-test-id="fontIcon"
@@ -369,7 +369,7 @@ exports[`AttachmentViewer rendering the when isActive is true  1`] = `
         >
           <i
             aria-hidden="true"
-            class="zd_font_icons basic icon-hideTab  thumpIcon thumpIconActive  "
+            class="zd_font_icons basic icon-hideTab  thumpIcon thumpIconActive icon_button_center  "
             data-id="fontIcon"
             data-selector-id="fontIcon"
             data-test-id="fontIcon"

package/lib/Drawer/__tests__/__snapshots__/Header.spec.js.snap

@@ -73,7 +73,7 @@ exports[`Header Component - Title Prop Combinations renders Header with title an
         >
           <i
             aria-hidden="true"
-            class="zd_font_icons basic icon-cross    "
+            class="zd_font_icons basic icon-cross   icon_button_center  "
             data-id="fontIcon"
             data-selector-id="fontIcon"
             data-test-id="fontIcon"
@@ -438,7 +438,7 @@ exports[`Header Component - Title Prop Combinations renders Header with title, c
         >
           <i
             aria-hidden="true"
-            class="zd_font_icons basic icon-cross    "
+            class="zd_font_icons basic icon-cross   icon_button_center  "
             data-id="fontIcon"
             data-selector-id="fontIcon"
             data-test-id="fontIcon"
@@ -539,7 +539,7 @@ exports[`Header Component - Title Prop Combinations renders Header with title, i
         >
           <i
             aria-hidden="true"
-            class="zd_font_icons basic icon-cross    "
+            class="zd_font_icons basic icon-cross   icon_button_center  "
             data-id="fontIcon"
             data-selector-id="fontIcon"
             data-test-id="fontIcon"
@@ -736,7 +736,7 @@ exports[`Header Component - Title Prop Combinations renders Header with title, i
         >
           <i
             aria-hidden="true"
-            class="zd_font_icons basic icon-cross    "
+            class="zd_font_icons basic icon-cross   icon_button_center  "
             data-id="fontIcon"
             data-selector-id="fontIcon"
             data-test-id="fontIcon"

package/lib/FlipCard/__tests__/__snapshots__/FlipCard.spec.js.snap

@@ -161,7 +161,7 @@ exports[`FlipCard renders correctly with channel: chat and action: outgoing 1`]
           >
             <i
               aria-hidden="true"
-              class="zd_font_icons basic icon-chChatOut   iconStyle chat_outgoing   iconColor  undefined   blue"
+              class="zd_font_icons basic icon-chChatOut   iconStyle chat_outgoing   avatar_align_center  iconColor     blue"
               data-id="fontIcon"
               data-selector-id="fontIcon"
               data-test-id="fontIcon"
@@ -255,7 +255,7 @@ exports[`FlipCard renders correctly with channel: email and action: incoming 1`]
           >
             <i
               aria-hidden="true"
-              class="zd_font_icons basic icon-chMailIn   iconStyle email_incoming   iconColor  undefined   green"
+              class="zd_font_icons basic icon-chMailIn   iconStyle email_incoming   avatar_align_center  iconColor     green"
               data-id="fontIcon"
               data-selector-id="fontIcon"
               data-test-id="fontIcon"
@@ -525,7 +525,7 @@ exports[`FlipCard renders correctly with className, channel, and action 1`] = `
           >
             <i
               aria-hidden="true"
-              class="zd_font_icons basic icon-chMailIn   iconStyle email_incoming   iconColor  undefined   green"
+              class="zd_font_icons basic icon-chMailIn   iconStyle email_incoming   avatar_align_center  iconColor     green"
               data-id="fontIcon"
               data-selector-id="fontIcon"
               data-test-id="fontIcon"
@@ -1250,7 +1250,7 @@ exports[`FlipCard renders correctly with iconSize as a number and channel & acti
           >
             <i
               aria-hidden="true"
-              class="zd_font_icons basic icon-chMailIn   iconStyle email_incoming   iconColor  undefined   green"
+              class="zd_font_icons basic icon-chMailIn   iconStyle email_incoming   avatar_align_center  iconColor     green"
               data-id="fontIcon"
               data-selector-id="fontIcon"
               data-test-id="fontIcon"
@@ -1835,7 +1835,7 @@ exports[`FlipCard renders correctly with palette, channel, and action 1`] = `
           >
             <i
               aria-hidden="true"
-              class="zd_font_icons basic icon-chChatOut   iconStyle chat_outgoing   iconColor  undefined   blue"
+              class="zd_font_icons basic icon-chChatOut   iconStyle chat_outgoing   avatar_align_center  iconColor     blue"
               data-id="fontIcon"
               data-selector-id="fontIcon"
               data-test-id="fontIcon"
@@ -3824,7 +3824,7 @@ exports[`FlipCard renders with icon 1`] = `
         >
           <i
             aria-hidden="true"
-            class="zd_font_icons basic icon-ch-email    iconColor  undefined   "
+            class="zd_font_icons basic icon-ch-email    avatar_align_center  iconColor     "
             data-id="fontIcon"
             data-selector-id="fontIcon"
             data-test-id="fontIcon"

package/lib/IconButton/IconButton.js

@@ -182,7 +182,7 @@ var IconButton = /*#__PURE__*/function (_React$Component) {
         isBold: isBold,
         size: iconSize,
         name: iconName,
-        iconClass: iconClass
+        iconClass: "".concat(iconClass, " ").concat(_IconButtonModule["default"].icon_button_center)
       }) : null, children ? children : null));
     }
   }]);

package/lib/IconButton/IconButton.module.css

@@ -46,4 +46,7 @@
 .primaryFilled,
 .primaryFilled_active {
   --iconColor: var(--zdt_iconButton_icon_primaryActive);
+}
+.icon_button_center {
+  composes: tcenter from '~@zohodesk/components/lib/common/common.module.css';
 }

package/lib/IconButton/__tests__/__snapshots__/IconButton.spec.js.snap

@@ -94,7 +94,7 @@ exports[`IconButton rendering in Icon 1`] = `
   >
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-infoStroke fbold iconClass  "
+      class="zd_font_icons basic icon-infoStroke fbold iconClass icon_button_center  "
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"