【css】Material Iconにバツ印を重ねて表示する

メール送信エラーのアイコンを作成したときのものを記載します！

material-design-iconsおよびMaterializeを使用しています。

See the Pen Overlap Material Icon by sjnya (@sjnya) on CodePen.

div.failed_icon {
  display: inline-block;
  position: relative;

  span::before, span::after {
    display: block;
    content: "";
    position: absolute;
    top: 70%;
    left: 90%;
    width: 50%;
    height: 10%;
    margin: -8% 0 0 -42%;
    background: #f50057;
    border-radius: 1px;
  }

  span::before {
    transform: rotate(-45deg);
  }

  span::after {
    transform: rotate(45deg);
  }
}