Use USWDS icons with validation messages (#441)

CHANGELOG.md

@@ -3,6 +3,7 @@
 ### Improvements
 
 - Update styling for Alert component for increased contrast and consistency with U.S. Web Design System. ([#439](https://github.com/18F/identity-design-system/pull/439))
+- Update styling for Validation component icons for consistency with U.S. Web Design System. ([#441](https://github.com/18F/identity-design-system/pull/441))
 - Update markup for badge component to use U.S. Web Design System icons. ([#442](https://github.com/18F/identity-design-system/pull/442))
   - Existing usage will not be affected until the next major release (see "Deprecations").
 

src/scss/packages/usa-error-message/src/_overrides.scss

@@ -1,12 +1,27 @@
 @use 'uswds-core' as *;
 
 .usa-error-message {
-  @include add-background-svg('alerts/error');
   @include u-padding-y(0.5);
-  background-position: 0 0.5em;
-  background-size: units(2);
+  position: relative;
   display: block;
   font-weight: font-weight('bold');
   padding-left: units(3);
   color: color('error');
+
+  &::before {
+    @include add-color-icon(
+      (
+        'name': 'error',
+        'color': currentColor,
+        'svg-height': 24,
+        'svg-width': 24,
+        'height': 2.5,
+      )
+    );
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+  }
 }

src/scss/packages/usa-success-message/src/_styles.scss

@@ -2,11 +2,26 @@
 
 .usa-success-message {
   @include u-padding-y(0.5);
-  @include add-background-svg('alerts/success');
-  background-position: 0 0.5em;
-  background-size: units(2);
+  position: relative;
   display: block;
   font-weight: font-weight('bold');
   padding-left: units(3);
   color: color('success');
+
+  &::before {
+    @include add-color-icon(
+      (
+        'name': 'check_circle',
+        'color': currentColor,
+        'svg-height': 24,
+        'svg-width': 24,
+        'height': 2.5,
+      )
+    );
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+  }
 }