Icons¶

The @sciflow/editor-start package ships with built-in Material Symbols icons as inline SVGs. No external font or CDN request is required — icons are bundled directly in the JavaScript and render instantly without flash of unstyled text (FOUT).

Bundled Icons¶

The format bar and demo use 36 icons from the Material Symbols Rounded family (weight 400, unfilled). These are available at runtime through the materialIcons export:

import { materialIcons } from '@sciflow/editor-start';

materialIcons is a Record<string, string> mapping icon names to inline SVG markup. Each SVG uses fill="currentColor" so it inherits the text color of its parent element.

Full list of bundled icons

Name	Used by
`format_bold`	Bold toggle
`format_italic`	Italic toggle
`format_quote`	Blockquote toggle
`format_list_bulleted`	Bullet list
`format_list_numbered`	Ordered list
`format_indent_increase`	Increase indent
`format_indent_decrease`	Decrease indent
`asterisk`	Insert footnote
`functions`	Insert math equation
`image`	Insert figure
`link`	Insert hyperlink
`table_chart`	Insert table
`chevron_left`	Add column before
`chevron_right`	Add column after
`delete`	Delete column / row
`expand_less`	Add row before
`expand_more`	Add row after
`merge_type`	Merge cells
`call_split`	Split cell
`table_rows`	Toggle header row
`view_column`	Toggle header column
`keyboard_tab`	Go to next cell
`delete_sweep`	Delete table
`format_align_left`	Align left
`format_align_center`	Align center
`format_align_right`	Align right
`format_align_justify`	Align justify
`undo`	Undo
`redo`	Redo
`info`	Demo shell
`notifications`	Demo shell
`arrow_back`	Demo shell
`menu_book`	Demo shell
`tune`	Demo shell
`toc`	Demo shell
`toggle_on`	Demo shell

Using Bundled Icons in Your App¶

Insert an icon anywhere in your HTML by reading from the map:

import { materialIcons } from '@sciflow/editor-start';

// Get the SVG string
const svg = materialIcons['format_bold'];

// Insert into the DOM
const el = document.getElementById('my-icon');
el.innerHTML = svg;

With Lit or other template libraries:

import { html } from 'lit';
import { unsafeHTML } from 'lit/directives/unsafe-html.js';
import { materialIcons } from '@sciflow/editor-start';

// In a Lit template
html`<span class="my-icon">${unsafeHTML(materialIcons['undo'])}</span>`;

Style the icons with CSS — they inherit currentColor and can be sized with width/height:

.my-icon svg {
  width: 20px;
  height: 20px;
  color: #2563eb;
}

Adding Custom Icons¶

If you need icons beyond the 36 bundled ones, you have two options.

Option A: Add to the Generator (Contributors)¶

If you are contributing to the SciFlow repository, add the icon name to the ICON_MAP in packages/editor/start/scripts/generate-icons.mjs:

const ICON_MAP = {
  // ... existing icons ...

  // My new icon
  my_icon_name: 'my_icon_name',   // must match a filename in @material-symbols/svg-400/rounded/
};

Then regenerate:

node packages/editor/start/scripts/generate-icons.mjs

The script reads SVGs from the @material-symbols/svg-400 npm package (installed as a devDependency) and writes src/lib/icons-generated.ts. Browse the full icon set to find the name you need.

Option B: Bring Your Own SVG (Consumers)¶

If you're consuming the published package and need additional icons, source the SVG from the @material-symbols/svg-400 package or any other icon set and add it to your own code:

npm install --save-dev @material-symbols/svg-400

// Read the SVG file at build time or copy it into your project
// SVGs are at: node_modules/@material-symbols/svg-400/rounded/<name>.svg

Or use any SVG icon directly — the format bar and editor do not require Material Symbols specifically. The CommandMetadata.icon field is a string key that the format bar looks up in materialIcons. If the key is not found, the button falls back to showing the command label as text.

To extend the lookup map at runtime:

import { materialIcons } from '@sciflow/editor-start';

// Add your own icon (any valid SVG string)
materialIcons['my_custom'] = '<svg viewBox="0 0 24 24" fill="currentColor">...</svg>';

This works because materialIcons is a plain mutable object.

License¶

The bundled icons are from Google Material Symbols and are licensed under the Apache License 2.0. The THIRD_PARTY_LICENSES file in the published package contains the full attribution. You may freely use, modify, and redistribute them — see the Apache 2.0 license for details.