Use CSS to make SVG icons for buttos rather than <use>

[gopi-suvanam]

Currently for reducing the button load time, we have put all button icons as svg in sandbox.html.

Ideally these should be moved to a css (like style.css) and modified like this:

/* Base icon style /
.icon {
display: inline-block;
width: 24px;
height: 24px;
background-repeat: no-repeat;
background-size: contain;
stroke: currentColor; / tells browser to use the element's text color /
color: #222; / default (light mode) /
}

/ Switch color in dark mode /
@media (prefers-color-scheme: dark) {
.icon {
color: #f5f5f5;
}
}

/ Individual icons */
.icon-share {
background-image: url("data:image/svg+xml;utf8,




");
}

.icon-play {
background-image: url("data:image/svg+xml;utf8,


");
}