Remove classes from dashicons (https://github.com/woocommerce/woocommerce-blocks/pull/2848)

plugins/woocommerce-blocks/assets/js/base/components/chip/removable-chip.js

@@ -72,7 +72,11 @@ const RemovableChip = ( {
 				className="wc-block-components-chip__remove"
 				{ ...removeProps }
 			>
-				<Icon srcElement={ noAlt } size={ 16 } />
+				<Icon
+					className="wc-block-components-chip__remove-icon"
+					srcElement={ noAlt }
+					size={ 16 }
+				/>
 			</RemoveElement>
 		</Chip>
 	);

plugins/woocommerce-blocks/assets/js/base/components/chip/style.scss

@@ -44,10 +44,10 @@
 		border: 0;
 		appearance: none;
 		padding: 0;
+	}
 
-		> .dashicon {
-			vertical-align: middle;
-		}
+	.wc-block-components-chip__remove-icon {
+		vertical-align: middle;
 	}
 }
 

plugins/woocommerce-blocks/assets/js/base/components/chip/test/__snapshots__/index.js.snap

@@ -107,7 +107,7 @@ exports[`RemovableChip should render custom aria label 1`] = `
   >
     <svg
       aria-hidden="true"
-      className="dashicon dashicons-arrow-down-alt2"
+      className="wc-block-components-chip__remove-icon"
       focusable="false"
       height={16}
       role="img"
@@ -149,7 +149,7 @@ exports[`RemovableChip should render default aria label if text is a node 1`] =
   >
     <svg
       aria-hidden="true"
-      className="dashicon dashicons-arrow-down-alt2"
+      className="wc-block-components-chip__remove-icon"
       focusable="false"
       height={16}
       role="img"
@@ -189,7 +189,7 @@ exports[`RemovableChip should render screen reader text aria label 1`] = `
   >
     <svg
       aria-hidden="true"
-      className="dashicon dashicons-arrow-down-alt2"
+      className="wc-block-components-chip__remove-icon"
       focusable="false"
       height={16}
       role="img"
@@ -224,7 +224,7 @@ exports[`RemovableChip should render text and the remove button 1`] = `
   >
     <svg
       aria-hidden="true"
-      className="dashicon dashicons-arrow-down-alt2"
+      className="wc-block-components-chip__remove-icon"
       focusable="false"
       height={16}
       role="img"
@@ -259,7 +259,7 @@ exports[`RemovableChip should render with disabled remove button 1`] = `
   >
     <svg
       aria-hidden="true"
-      className="dashicon dashicons-arrow-down-alt2"
+      className="wc-block-components-chip__remove-icon"
       focusable="false"
       height={16}
       role="img"
@@ -295,7 +295,7 @@ exports[`RemovableChip with removeOnAnyClick should be a button when removeOnAny
   >
     <svg
       aria-hidden="true"
-      className="dashicon dashicons-arrow-down-alt2"
+      className="wc-block-components-chip__remove-icon"
       focusable="false"
       height={16}
       role="img"

plugins/woocommerce-blocks/assets/js/base/components/dropdown-selector/style.scss

@@ -123,7 +123,7 @@ $dropdown-selector-line-height: 18/14;
 		line-height: 1;
 		padding: 0 0 0 0.3em;
 
-		> .dashicon {
+		> svg {
 			display: block;
 		}
 	}

plugins/woocommerce-blocks/assets/js/icons/library/arrow-down-alt2.js

@@ -2,19 +2,13 @@
  * External dependencies
  */
 import { SVG } from 'wordpress-components';
-import classnames from 'classnames';
 
 const Component = ( { className, size = 20, ...extraProps } ) => {
-	const iconClass = classnames(
-		'dashicon',
-		'dashicons-arrow-down-alt2',
-		className
-	);
 	return (
 		<SVG
 			xmlns="http://www.w3.org/2000/svg"
 			viewBox="0 0 20 20"
-			className={ iconClass }
+			className={ className }
 			width={ size }
 			height={ size }
 			{ ...extraProps }

plugins/woocommerce-blocks/assets/js/icons/library/no-alt.js

@@ -2,19 +2,13 @@
  * External dependencies
  */
 import { SVG } from 'wordpress-components';
-import classnames from 'classnames';
 
 const Component = ( { className, size, ...extraProps } ) => {
-	const iconClass = classnames(
-		'dashicon',
-		'dashicons-arrow-down-alt2',
-		className
-	);
 	return (
 		<SVG
 			xmlns="http://www.w3.org/2000/svg"
 			viewBox="0 0 20 20"
-			className={ iconClass }
+			className={ className }
 			width={ size }
 			height={ size }
 			{ ...extraProps }