JSFiddle - React, Tailwind, and code Playground

by Bart Kalisz

HTML

<p>
  Outline is not visible because it's covered by the mask:
</p>
<button id="sad"></button>

<p>
  Outline is visible because the mask is on the inner (:before) element:
</p>
<button id="happy"></button>

SCSS

@mixin icon-mask() {
  background-color: blue;

  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white' width='18px' height='18px'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath d='M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2z'/%3E%3C/svg%3E");
  -webkit-mask-size: cover;
  -webkit-mask-position: 0 0;
}

button {
  display: block;
  width: 50px;
  height: 50px;
  padding: 0;
  margin: 0;
  border: none;
  background: none;

  outline: 2px dotted red;
}

button#sad {
  @include icon-mask();
}

button#happy::before {
  @include icon-mask();

  display: block;
  content: "";
  width: 100%;
  height: 100%;
}