Render icon styles as component stylesheet

app/assets/stylesheets/_uswds.scss

@@ -9,7 +9,6 @@
 @forward 'usa-collection';
 @forward 'usa-form';
 @forward 'usa-header';
-@forward 'usa-icon';
 @forward 'usa-layout-grid';
 @forward 'usa-link';
 @forward 'usa-list';

app/assets/stylesheets/components/_index.scss

@@ -11,7 +11,6 @@
 @forward 'form';
 @forward 'full-screen';
 @forward 'hr';
-@forward 'icon';
 @forward 'language-picker';
 @forward 'modal';
 @forward 'nav';

app/assets/stylesheets/components/_icon.scss → app/components/icon_component.scss

@@ -1,5 +1,7 @@
 @use 'uswds-core' as *;
-@use '../variables/app' as *;
+@use 'variables/app' as *;
+
+@forward 'usa-icon';
 
 $icon-min-padding: 2px;
 

app/javascript/packages/components/button.spec.tsx

@@ -119,13 +119,4 @@ describe('Button', () => {
 
     expect(button.classList.contains('my-button')).to.be.true();
   });
-
-  it('renders icon', () => {
-    const { getByRole } = render(<Button icon="add">Click me</Button>);
-
-    const icon = getByRole('img', { hidden: true });
-
-    expect(icon.classList.contains('usa-icon')).to.be.true();
-    expect(icon.querySelector('use')!.getAttribute('href')).to.match(/#add$/);
-  });
 });

app/javascript/packages/components/button.tsx

@@ -1,7 +1,5 @@
 import { createElement } from 'react';
 import type { AnchorHTMLAttributes, ButtonHTMLAttributes, MouseEvent, ReactNode } from 'react';
-import Icon from './icon';
-import type { DesignSystemIcon } from './icon';
 
 type ButtonType = 'button' | 'reset' | 'submit';
 
@@ -56,11 +54,6 @@ export interface ButtonProps {
    */
   isUnstyled?: boolean;
 
-  /**
-   * Icon to show next to button text.
-   */
-  icon?: DesignSystemIcon;
-
   /**
    * Optional additional class names.
    */
@@ -77,7 +70,6 @@ function Button({
   isOutline,
   isDisabled,
   isUnstyled,
-  icon,
   className,
   ...htmlAttributes
 }: ButtonProps &
@@ -100,7 +92,6 @@ function Button({
   return createElement(
     tagName,
     { type, href, disabled: isDisabled, className: classes, ...htmlAttributes },
-    icon && <Icon icon={icon} />,
     children,
   );
 }

app/javascript/packages/components/index.ts

@@ -2,7 +2,6 @@ export { default as Alert } from './alert';
 export { default as BlockLink } from './block-link';
 export { default as Button } from './button';
 export { default as FullScreen } from './full-screen';
-export { default as Icon } from './icon';
 export { default as Link } from './link';
 export { default as PageFooter } from './page-footer';
 export { default as PageHeading } from './page-heading';