Use SVG for Tag delete button

matrix-org · Apr 13, 2022 · 48c389a · 48c389a
1 parent c95b212
commit 48c389a
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 4 deletions.
diff --git a/res/css/views/elements/_TagComposer.scss b/res/css/views/elements/_TagComposer.scss
@@ -80,9 +80,8 @@ limitations under the License.
         background: $system;
         position: relative;
 
-        &::before {
-            content: "✕";
-            font-size: 0.7em;
+        svg {
+            width: .5em;
             vertical-align: middle;
         }
     }

diff --git a/src/components/views/elements/Tag.tsx b/src/components/views/elements/Tag.tsx
@@ -17,6 +17,7 @@ limitations under the License.
 import React from "react";
 
 import AccessibleButton from "./AccessibleButton";
+import { Icon as CancelRounded } from "../../../../res/img/element-icons/cancel-rounded.svg";
 
 interface IProps {
     icon?: () => JSX.Element;
@@ -35,7 +36,9 @@ export const Tag = ({
         { icon?.() }
         { label }
         { onDeleteClick && (
-            <AccessibleButton className="mx_Tag_delete" onClick={onDeleteClick} disabled={disabled} />
+            <AccessibleButton className="mx_Tag_delete" onClick={onDeleteClick} disabled={disabled}>
+                <CancelRounded />
+            </AccessibleButton>
         ) }
     </div>;
 };