Icons

THT comes with a set of essential icons in SVG format.

Because they are SVG, they inherit all text styles (size, color, etc.).

Each icon is only about 50 bytes. They are inlined, so they don't trigger any extra network requests.

Example:

tem cancelHtml {
    <div style="color: red">
        {{ Web.icon('cancel') }} Cancel
    </div>
}

Icons

Stylesheet

If you are not using the Basic CSS Framework, you need to include this in your CSS:

.ticon {
    display: inline-block;
    position: relative;
    height: 1em;
    width: 1em;
    top: 0.15em;
    fill: currentColor;
}

.ticon * {
    stroke: currentColor;
    stroke-width: 15;
    fill: none;
}

.ticon .svgfill {
    stroke: none;
    fill: currentColor;
}

Styling Icons

You can set the style of icons, including line thickness, using regular CSS:

.ticon.ticon-caretRight * {
    color: red;
    stroke-width: 10;
}

See Also

• Web.icon
• Basic CSS Framework