.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;

  -webkit-mask: var(--svg) no-repeat center / contain;
  mask: var(--svg) no-repeat center / contain;
  background-image: var(--svg);

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  
  -webkit-mask-position: center;
  mask-position: center;
  
  -webkit-mask-size: contain;
  mask-size: contain;
}

.icon.check2 {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%23white'%3E%3Cpath d='M400-304 240-464l56-56 104 104 264-264 56 56-320 320Z'/%3E%3C/svg%3E");
}

.icon.check {
  --svg: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIyNHB4IiBmaWxsPSIjMWYxZjFmIj48cGF0aCBkPSJNNDAwLTMwNCAyNDAtNDY0bDU2LTU2IDEwNCAxMDQgMjY0LTI2NCA1NiA1Ni0zMjAgMzIwWiIvPjwvc3ZnPg==");
}


/* 

.icona {
  width: 40px;
  height: 40px;
  background: red;
  -webkit-mask: var(--svg) no-repeat center / contain;
}

.icona.check {
  --svg: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
} */

/* make inline style width/height accepted: ensure min-width/height are unset */
/* .icon { min-width: 0; min-height: 0; } */


/* .icon.check {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M400-304 240-464l56-56 104 104 264-264 56 56-320 320Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M400-304 240-464l56-56 104 104 264-264 56 56-320 320Z'/%3E%3C/svg%3E");
} */

/* .icon.check {
  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIyNHB4IiBmaWxsPSIjMWYxZjFmIj48cGF0aCBkPSJNNDAwLTMwNCAyNDAtNDY0bDU2LTU2IDEwNCAxMDQgMjY0LTI2NCA1NiA1Ni0zMjAgMzIwWiIvPjwvc3ZnPg==");
  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIyNHB4IiBmaWxsPSIjMWYxZjFmIj48cGF0aCBkPSJNNDAwLTMwNCAyNDAtNDY0bDU2LTU2IDEwNCAxMDQgMjY0LTI2NCA1NiA1Ni0zMjAgMzIwWiIvPjwvc3ZnPg==");
} */

/* sizing helpers (optional) */
.icon--24 { width: 24px; height: 24px; }
.icon--16 { width: 16px; height: 16px; }
.icon--32 { width: 32px; height: 32px; }