Skip to main content
Version: 1.1.0

Icons

SpartanFX renders every icon as in-house inline SVG with fill="currentColor" — there is no Fluent MDL2 icon font and no CDN request. This is the single reason the library renders correctly in the Power Apps Code Apps webplayer, where Fluent's icon font never loads.

Why this matters​

The classic Fluent setup calls initializeIcons() to register an icon font served from a CDN. In hosts where that font or request is blocked (notably the Code Apps webplayer), every glyph renders as a placeholder box. SpartanFX removes that dependency entirely:

  • Icons are SVG paths bundled in the package — nothing is fetched at runtime.
  • fill="currentColor" means an icon inherits text color and adapts to light/dark automatically.
  • The set also covers the glyphs Fluent components render internally (Dropdown caret, Panel close, DetailsList sort arrows, ContextualMenu chevrons…), so even composed Fluent UI looks right.

How it's wired​

Importing the package runs registerSpartanIcons() as a side effect of the entry barrel, registering the in-house set into Fluent's icon registry:

import '@spartanfx/react'; // registerSpartanIcons() runs here — keep this import

You normally never call it yourself. Call it manually only if you tree-shake the barrel away:

import { registerSpartanIcons } from '@spartanfx/react';
registerSpartanIcons();

Using icons directly​

Render a glyph with the Icon component. A number size is treated as pixels; title makes it an accessible image, otherwise it's decorative:

import { Icon } from '@spartanfx/react';

<Icon name="ChevronDown" />
<Icon name="Delete" size={20} title="Delete" onClick={onDelete} />

The IconButton, ActionButton, and FileTypeIcon components build on the same registry. See the Icon API for the full prop contracts and SpartanIconName for the available glyph names.

  • Architecture
  • API: registerSpartanIcons, Icon, IconButton, ActionButton, FileTypeIcon