Design Technologist
icon("play", "material")
icon("square.and.arrow.up")
function icon(name, set = "symbols") {
let unicode = "";
if (set === "symbols") {
unicode = l[name];
}
if (set === "material") {
const u1 = parseInt(l2[name], 16);
unicode = String.fromCodePoint(u1);
}
return html`<style>
@font-face {
font-family: "Symbols";
font-weight: 500;
font-style: normal;
src: url("${u}") format("woff2");
}
@font-face {
font-family: "Material Icons";
src: url("${u2}");
font-weight: normal;
font-style: normal;
}
.symbols {
font-family: "Symbols";
font-style: normal;
}
.material {
font-family: "Material Icons";
font-style: normal;
}
</style><i class="${set}">${unicode}<i/>`;
}
u = await FileAttachment("symbols.woff2").url()
u2 = await FileAttachment("material-icons.woff2").url()
l = await FileAttachment("symbols.json").json();
l2 = await FileAttachment("icons.json").json();
import {html} from "@observable/htl"
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
