From 0491b742c2dd6ae48c0d917ed9adaa1918b0ccf3 Mon Sep 17 00:00:00 2001
From: Travis Ralston <travpc@gmail.com>
Date: Wed, 2 Oct 2019 12:52:07 -0600
Subject: [PATCH] Use a mask instead of an img for "Show image" eye

See https://github.com/matrix-org/matrix-react-sdk/pull/3492#pullrequestreview-296223646
---
 res/css/views/messages/_MImageBody.scss     | 10 ++++++++--
 src/components/views/messages/MImageBody.js |  2 +-
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/res/css/views/messages/_MImageBody.scss b/res/css/views/messages/_MImageBody.scss
index 8e650eaff4..547b16e9ad 100644
--- a/res/css/views/messages/_MImageBody.scss
+++ b/res/css/views/messages/_MImageBody.scss
@@ -79,11 +79,17 @@ limitations under the License.
     .mx_HiddenImagePlaceholder_button {
         color: $accent-color;
 
-        img {
+        span.mx_HiddenImagePlaceholder_eye {
             margin-right: 8px;
+
+            background-color: $accent-color;
+            mask-image: url('$(res)/img/feather-customised/eye.svg');
+            display: inline-block;
+            width: 18px;
+            height: 14px;
         }
 
-        span {
+        span:not(.mx_HiddenImagePlaceholder_eye) {
             vertical-align: text-bottom;
         }
     }
diff --git a/src/components/views/messages/MImageBody.js b/src/components/views/messages/MImageBody.js
index e89c6d2bc9..640baa1966 100644
--- a/src/components/views/messages/MImageBody.js
+++ b/src/components/views/messages/MImageBody.js
@@ -496,7 +496,7 @@ export class HiddenImagePlaceholder extends React.PureComponent {
         return (
             <div className={className}>
                 <div className='mx_HiddenImagePlaceholder_button'>
-                    <img src={require("../../../../res/img/feather-customised/eye.svg")} width={17} height={12} />
+                    <span className='mx_HiddenImagePlaceholder_eye' />
                     <span>{_t("Show image")}</span>
                 </div>
             </div>