- Catalog
- Usage
This catalog is the older core Anvil2 set: Material icons and ServiceTitan
SVGs used with the Icon component. Lucide
icons for AI Kit and React Native live in the Lucide
catalog.
Icon as
shown under Usage.Installation
Material and ServiceTitan SVG assets ship with@servicetitan/anvil2. Install
the core package; there is no separate icons package for this set.pnpm add @servicetitan/anvil2
@servicetitan/startup 23.5.0 or later
already configure SVGR. Standalone apps must keep removeViewBox disabled
in svgoConfig (see Icon for Webpack and
Vite examples).Import
Import theIcon wrapper from @servicetitan/anvil2 and each SVG from the
package asset path. Material round icons live under
assets/icons/material/round/. ServiceTitan SVGs live under
assets/icons/st/.import { Icon } from "@servicetitan/anvil2";
import Warning from "@servicetitan/anvil2/assets/icons/material/round/warning.svg";
<Icon svg={Warning} size="large" aria-label="Warning" />;
import { Icon } from "@servicetitan/anvil2";
import AiChat from "@servicetitan/anvil2/assets/icons/st/ai_chat.svg";
<Icon svg={AiChat} size="medium" />;
./assets/* from the built dist/assets tree. Do not
import Material icons from @servicetitan/anvil2-icons for core Web product
UI.Props
Icon accepts the SVG component through svg and sizes the wrapper. Props
match the published IconProps surface.Svg
required
Assets passed in using SVGR.
string
Sets the wrapper color used by the SVG. Accepts CSS colors and CSS
variables.
boolean
default:"false"
Uses the parent text color when no explicit
color is set."small" | "medium" | "large" | "xlarge"
default:"medium"
Icon scale.
Icon also accepts layout utility props (except flex grow/shrink/basis) and
any valid HTML span props, including className, style, aria-label,
and a forwarded ref.Full behavior, accessibility, and SVGR config live on the
Icon component page.