fix: Apply 1   worth of margin between icon/text

Author: meissadia

src/components/Icon/Icon.less

@@ -0,0 +1,15 @@
+// Calculation methodology
+// https://github.com/cfpb/design-stories/issues/130#issuecomment-1670396537
+@width-of-1-nbsp: 0.3098125em;
+
+.u-icon-before-text .cf-icon-svg-wrapper {
+  margin-right: @width-of-1-nbsp;
+}
+
+.u-icon-after-text .cf-icon-svg-wrapper {
+  margin-left: @width-of-1-nbsp;
+}
+
+.t-icon-with-text {
+  width: 100%;
+}

src/components/Icon/Icon.stories.tsx

@@ -75,15 +75,15 @@ export const IconWithText = (): React.ReactElement => {
   const elements = ['h1', 'h2', 'h3', 'h4', 'h5', 'p', 'a'];
 
   return (
-    <table>
+    <table className='t-icon-with-text'>
       <thead>
         <tr>
           <th>Element</th>
           <th>Plain Icon</th>
-          <th>Plain Icon Left</th>
           <th>Round Icon</th>
-          <th>Round Icon Left</th>
           <th>Square Icon</th>
+          <th>Plain Icon Left</th>
+          <th>Round Icon Left</th>
           <th>Square Icon Left</th>
         </tr>
       </thead>
@@ -95,44 +95,49 @@ export const IconWithText = (): React.ReactElement => {
             <tr key={element}>
               <td>{element}</td>
               <td>
-                <DynamicTag>
+                <DynamicTag className='u-icon-after-text'>
                   {element} text
                   <Icon name='email' />
                 </DynamicTag>
               </td>
+
               <td>
-                <DynamicTag>
-                  <Icon name='email' />
+                <DynamicTag className='u-icon-after-text'>
                   {element} text
+                  <Icon name='zero' withBg />
                 </DynamicTag>
               </td>
+
               <td>
-                <DynamicTag>
+                <DynamicTag className='u-icon-after-text'>
                   {element} text
-                  <Icon name='zero' withBg />
+                  <Icon name='facebook' withBg />
                 </DynamicTag>
               </td>
               <td>
-                <DynamicTag>
-                  <Icon name='zero' withBg />
+                <DynamicTag className='u-icon-before-text'>
+                  <Icon name='email' />
                   {element} text
                 </DynamicTag>
               </td>
               <td>
-                <DynamicTag>
-                  <Icon name='facebook' withBg />
+                <DynamicTag className='u-icon-before-text'>
+                  <Icon name='zero' withBg />
                   {element} text
                 </DynamicTag>
               </td>
               <td>
-                <DynamicTag>
-                  {element} text
+                <DynamicTag className='u-icon-before-text'>
                   <Icon name='facebook' withBg />
+                  {element} text
                 </DynamicTag>
               </td>
             </tr>
           );
         })}
+        <tr>
+          <td>test space</td>
+        </tr>
       </tbody>
     </table>
   );

src/components/Icon/Icon.tsx

@@ -2,6 +2,8 @@ import classNames from 'classnames';
 import { useIconSvg } from '../../hooks/useIconSvg';
 import { numberIcons } from './iconLists';
 
+import './Icon.less';
+
 // Design System font sizes for HTML elements
 const sizeMap: Record<string, string> = {
   h1: '34px',