Icons

The SDK has the SciTrader app's toolbar and navigation icons, as SVG. There are nine:

Name	Used in the SciTrader app for	Has a selected look
`pencil`	The drawing tools
`drawingList`	The list of drawings on the chart
`fx`	The indicators (studies) view	✓
`settings`	The chart settings view	✓
`target`	Switching the cursor mode (crosshair)
`bookmark`	The watchlist view, and bookmarking a symbol	✓
`marketDepth`	The order book (market depth) view	✓
`more`	The "more" menu	✓
`palette`	The theme picker

The selected look. Five of the icons have a second version, their selected look, filled with the theme's brand gradient instead of the plain text colour. It marks the button of the view that is open. The SciTrader app uses these five icons on its navigation tabs, each of which opens a view: the watchlist (bookmark), the indicators (fx), the settings (settings), the order book (marketDepth) and the "more" menu (more). The selected look shows which view is open, as a tab's highlight does. The other four icons are for buttons that perform an action, such as starting a drawing (pencil), so they have no selected look. Draw it with selected: true; on an icon without one, selected has no effect.

The galleries below show every icon, with the selected look beside the five that have one.

TypeScript Example: Icon Gallery

Every icon, drawn with sciTraderIconSvg, in its normal look and, where it has one, its selected look. The buttons are styled with plain CSS, and the icons take the buttons' colour; hover over one to see it change.

The code for this example is found below.

import "scichart-scitrader/scitrader.css";
import { SCITRADER_ICONS, sciTraderIconSvg, TSciTraderIconName } from "scichart-scitrader";

// This example expects this HTML:
// <div id="gallery"></div>

// Every icon name, from SCITRADER_ICONS: "pencil", "drawingList", "fx", ...
const names = Object.keys(SCITRADER_ICONS) as TSciTraderIconName[];

const gallery = document.getElementById("gallery");
gallery.className = "icon-gallery";

for (const name of names) {
    const card = document.createElement("div");
    card.className = "icon-card";

    // The normal look: the icon fills with currentColor, so it takes the button's text colour
    const button = document.createElement("button");
    button.className = "icon-button";
    button.setAttribute("aria-label", name); // the icon is hidden from assistive technology: label the button
    button.innerHTML = sciTraderIconSvg(name, { width: 24, height: 24 });
    card.appendChild(button);

    // The "selected" look, for icons that have one: filled with the theme's brand gradient
    if (SCITRADER_ICONS[name].selectedBody) {
        const selected = document.createElement("button");
        selected.className = "icon-button";
        selected.setAttribute("aria-label", `${name}, selected`);
        selected.innerHTML = sciTraderIconSvg(name, { width: 24, height: 24, selected: true });
        card.appendChild(selected);
    }

    const label = document.createElement("code");
    label.textContent = name;
    card.appendChild(label);
    gallery.appendChild(card);
}

// The gallery's look. The icon buttons are plain CSS: style the button, and the icon follows its colour
const style = document.createElement("style");
style.textContent = `
    .icon-gallery {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        align-content: start;
        gap: 12px;
        height: 100%;
        box-sizing: border-box;
        padding: 16px;
        background: var(--st-ui-background, #2b2839);
        font-family: var(--st-font-family, sans-serif);
    }
    .icon-card {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 12px;
        border-radius: 6px;
        background: var(--st-ui-surface, #373447);
    }
    .icon-card code {
        width: 100%;
        text-align: center;
        color: var(--st-ui-text-muted, #9da2bc);
        font-size: 12px;
    }
    .icon-button {
        display: inline-flex;
        padding: 6px;
        border: none;
        border-radius: 50%;
        background: transparent;
        color: var(--st-ui-icon, #e5e7eb); /* the icon's colour */
        cursor: pointer;
    }
    .icon-button:hover {
        background: rgb(255 255 255 / 0.08);
        color: #ffffff;
    }
`;
document.head.appendChild(style);

React Example: Icon Gallery

The same gallery in React, with the SciTraderIcon component from scichart-scitrader-react. Click an icon to select it.

The code for this example is found below.

React

import "scichart-scitrader/scitrader.css";
import * as React from "react";
import { SCITRADER_ICONS, TSciTraderIconName } from "scichart-scitrader";
import { SciTraderIcon } from "scichart-scitrader-react";

// Every icon name, from SCITRADER_ICONS: "pencil", "drawingList", "fx", ...
const NAMES = Object.keys(SCITRADER_ICONS) as TSciTraderIconName[];

export function IconGallery() {
    // Which icon is selected, to show the "selected" look on click
    const [selected, setSelected] = React.useState<TSciTraderIconName>("bookmark");

    return (
        <div style={galleryStyle}>
            {NAMES.map((name) => (
                <div key={name} style={cardStyle}>
                    {/* The icon is hidden from assistive technology, so label the button */}
                    <button aria-label={name} aria-pressed={selected === name} style={buttonStyle} onClick={() => setSelected(name)}>
                        {/* selected draws the theme's brand gradient, for icons that have a selected look */}
                        <SciTraderIcon name={name} width={24} height={24} selected={selected === name} />
                    </button>
                    <code style={labelStyle}>{name}</code>
                    <span style={hintStyle}>{SCITRADER_ICONS[name].selectedBody ? "has a selected look" : ""}</span>
                </div>
            ))}
        </div>
    );
}

// The gallery uses SciTrader's UI colours: its --st-ui-* CSS variables, with the stylesheet's defaults
const galleryStyle: React.CSSProperties = {
    display: "grid",
    gridTemplateColumns: "repeat(auto-fill, minmax(150px, 1fr))",
    alignContent: "start",
    gap: 12,
    height: "100%",
    boxSizing: "border-box",
    padding: 16,
    background: "var(--st-ui-background, #2b2839)",
    fontFamily: "var(--st-font-family, sans-serif)",
};

const cardStyle: React.CSSProperties = {
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    gap: 6,
    padding: 12,
    borderRadius: 6,
    background: "var(--st-ui-surface, #373447)",
};

// The icon fills with currentColor: set the button's colour, and the icon follows it
const buttonStyle: React.CSSProperties = {
    display: "inline-flex",
    padding: 6,
    border: "none",
    borderRadius: "50%",
    background: "transparent",
    color: "var(--st-ui-icon, #e5e7eb)",
    cursor: "pointer",
};

const labelStyle: React.CSSProperties = { color: "var(--st-ui-text-muted, #9da2bc)", fontSize: 12 };
const hintStyle: React.CSSProperties = { color: "var(--st-ui-text-muted, #9da2bc)", fontSize: 11, minHeight: 14 };

sciTraderIconSvg: Icons as SVG Markup

sciTraderIconSvg returns an icon's complete <svg> markup as a string, for plain TypeScript or any framework. Insert it as HTML:

import { sciTraderIconSvg } from "scichart-scitrader";

// sciTraderIconSvg(name: TSciTraderIconName, options?: ISciTraderIconOptions): string
const button = document.createElement("button");
button.setAttribute("aria-label", "Watchlist"); // label the button: the icon is hidden from screen readers
button.innerHTML = sciTraderIconSvg("bookmark", { width: 20, height: 20, selected: true });

Option	Type	What it does
`width`	`number`	The icon's width in pixels. Default: its natural width
`height`	`number`	The icon's height in pixels. Default: its natural height
`selected`	`boolean`	Draw the "selected" look, for icons that have one. Default `false`
`className`	`string`	A class for the `<svg>`

name is a TSciTraderIconName: one of the nine names above. SCITRADER_ICONS holds each icon's natural width and height, viewBox and markup (body, and selectedBody for the selected look), for drawing them your own way.

SciTraderIcon: Icons in React

SciTraderIcon from scichart-scitrader-react renders the same <svg>, with the same options as props. It is safe to render on the server.

import { SciTraderIcon } from "scichart-scitrader-react";

<button aria-label="Watchlist" onClick={() => setTab("watchlist")}>
    <SciTraderIcon name="bookmark" width={20} height={20} selected={tab === "watchlist"} />
</button>

sciTraderIconSvg, ISciTraderIconOptions, TSciTraderIconName, ISciTraderIcon and SCITRADER_ICONS, with their TSDoc

/**
 * The complete `<svg>` markup for an icon, hidden from assistive technology (label the button
 * it sits in instead).
 *
 * ```ts
 * button.innerHTML = sciTraderIconSvg("bookmark", { selected: true });
 * ```
 */
function sciTraderIconSvg(name: TSciTraderIconName, options?: ISciTraderIconOptions): string;

/** Options for {@link sciTraderIconSvg}. */
interface ISciTraderIconOptions {
    /** Default: the icon's natural width. */
    width?: number;
    /** Default: the icon's natural height. */
    height?: number;
    /** Draw the "selected" look, for icons that have one. Default `false`. */
    selected?: boolean;
    /** A class for the `<svg>`. */
    className?: string;
}

/** The name of a {@link SCITRADER_ICONS} icon. */
type TSciTraderIconName = "pencil" | "drawingList" | "fx" | "settings" | "target" | "bookmark" | "marketDepth" | "more" | "palette";

/** One icon: its natural size and its markup, the inside of its `<svg>`. */
interface ISciTraderIcon {
    width: number;
    height: number;
    viewBox: string;
    body: string;
    /** The "selected" look, where the icon has one. */
    selectedBody?: string;
}

/** Every SciTrader UI icon, by name. */
const SCITRADER_ICONS: Record<TSciTraderIconName, ISciTraderIcon>;

The React SciTraderIcon and its props, with their TSDoc

/** Props for {@link SciTraderIcon}. */
interface ISciTraderIconProps {
    name: TSciTraderIconName;
    /** Default: the icon's natural width. */
    width?: number;
    /** Default: the icon's natural height. */
    height?: number;
    /** Draw the "selected" look (the brand gradient), for icons that have one. Default `false`. */
    selected?: boolean;
    className?: string;
}

/**
 * One of the SDK's UI icons (`SCITRADER_ICONS`) as an inline `<svg>`. It fills with
 * `currentColor`, so it follows the text colour of the button it sits in, and it is hidden from
 * assistive technology: label the button instead. Safe to render on the server.
 *
 * ```tsx
 * <IconButton aria-label="Watchlist">
 *     <SciTraderIcon name="bookmark" selected={tab === "watchlist"} />
 * </IconButton>
 * ```
 */
function SciTraderIcon({ name, width, height, selected, className }: ISciTraderIconProps): JSX.Element;

Styling the Icons

Colour: the icons fill with currentColor, so they take the text colour of the element they sit in. Style the button, not the icon: color: … on the button, including on :hover.
Size: pass width and height, or style the <svg> through className.
Selected look: the brand gradient comes from the theme's --st-ui-brand-gradient-start and --st-ui-brand-gradient-end CSS variables, darkened 20%, so it follows the theme. Set them to change it.
Accessibility: the icons are hidden from assistive technology (aria-hidden). Give the button an aria-label.

/* Icon buttons that turn the accent colour on hover */
.my-toolbar button {
    color: var(--st-ui-icon, #e5e7eb);
}
.my-toolbar button:hover {
    color: var(--st-ui-accent, #7464ff);
}

/* A different selected gradient */
:root {
    --st-ui-brand-gradient-start: #22c55e;
    --st-ui-brand-gradient-end: #0ea5e9;
}

/* Every icon given className: "toolbar-icon" at 18px */
.toolbar-icon {
    width: 18px;
    height: 18px;
}

See Styling and Themes.

The palette icon's path is from Font Awesome Free 5.15.4 (CC BY 4.0).

TypeScript Example: Icon Gallery​

React Example: Icon Gallery​

sciTraderIconSvg: Icons as SVG Markup​

SciTraderIcon: Icons in React​

Styling the Icons​

TypeScript Example: Icon Gallery

React Example: Icon Gallery

sciTraderIconSvg: Icons as SVG Markup

SciTraderIcon: Icons in React

Styling the Icons