Add check and x icons for validation feedback

Adds icons from the Feather set with the same color as text. Tweaks validation
item spacing to match the design.

res/css/views/elements/_Validation.scss

@@ -14,19 +14,48 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+.mx_Validation_description {
+    margin-bottom: 1em;
+}
+
 .mx_Validation_details {
-    padding-left: 15px;
+    padding-left: 20px;
+    margin: 0;
 }
 
 .mx_Validation_detail {
+    position: relative;
     font-weight: normal;
+    list-style: none;
+    margin-bottom: 0.5em;
+
+    &::before {
+        content: "";
+        position: absolute;
+        width: 14px;
+        height: 14px;
+        top: 0;
+        left: -18px;
+        mask-repeat: no-repeat;
+        mask-position: center;
+        mask-size: contain;
+    }
 
-    // TODO: Check / cross images
     &.mx_Validation_valid {
         color: $input-valid-border-color;
+
+        &::before {
+            mask-image: url('$(res)/img/feather-customised/check.svg');
+            background-color: $input-valid-border-color;
+        }
     }
 
     &.mx_Validation_invalid {
         color: $input-invalid-border-color;
+
+        &::before {
+            mask-image: url('$(res)/img/feather-customised/x.svg');
+            background-color: $input-invalid-border-color;
+        }
     }
 }

res/img/feather-customised/check.svg

@@ -0,0 +1,3 @@
+<svg fill="none" height="24" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+    <path d="m20 6-11 11-5-5"/>
+</svg>

res/img/feather-customised/x.svg

@@ -0,0 +1,4 @@
+<svg fill="none" height="24" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+    <path d="m18 6-12 12"/>
+    <path d="m6 6 12 12"/>
+</svg>

src/components/views/elements/Validation.js

@@ -97,7 +97,7 @@ export default function withValidation({ description, rules }) {
         }
 
         const feedback = <div className="mx_Validation">
-            <div>{description}</div>
+            <div className="mx_Validation_description">{description}</div>
             {details}
         </div>;