Styling

Sizing

The host element has these defaults:

icoglyph-svg {
  display: block;
  width: 100%;
  height: 100%;
}

It fills its container and is always square (1:1 ratio). If the parent has no explicit size, the icon collapses to zero. Always size the container - never set width or height on <icoglyph-svg> itself.

/* Size the container */
.icon-wrapper { width: 24px; height: 24px; }

/* In a button — icon fills the button height */
.button-with-icon { height: 40px; }

/* Responsive container */
.icon-wrapper { width: clamp(24px, 4vw, 64px); height: clamp(24px, 4vw, 64px); }

CSS Custom Properties

The <icoglyph-svg> web component renders inside a Shadow DOM. All visual styling is controlled through CSS custom properties that pierce the shadow boundary.

Inline Styles

Set custom properties directly on the element via the style attribute for per-icon overrides.

<icoglyph-svg
  use="arrow-right"
  style="--icoglyph-stroke: #2563eb; --icoglyph-stroke-width: 0.5rem;"
></icoglyph-svg>

Global Styling via CSS

Apply a consistent style to all icons in a section, page, or the entire app with a CSS rule.

icoglyph-svg {
  --icoglyph-stroke: #374151;
  --icoglyph-stroke-width: 0.35rem;
}

/* Override for a specific context */
.nav icoglyph-svg {
  --icoglyph-stroke: currentColor;
  --icoglyph-stroke-width: 0.3rem;
}

Hover Effects with --icoglyph-transition

By default, --icoglyph-transition: 200ms smoothly animates stroke color, width, and opacity changes. Override it with a custom value or set to none to disable. It has no effect on path morph animations.

icoglyph-svg {
  --icoglyph-transition: opacity 0.15s ease;
  cursor: pointer;
}
icoglyph-svg:hover {
  --icoglyph-stroke-opacity: 0.6;
}

Shadow DOM Part

The inner <svg> element is exposed as a CSS part named svg. Use the ::part(svg) pseudo-element to apply styles that CSS custom properties cannot cover, such as filters, transforms, or pointer-events.

icoglyph-svg::part(svg) {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
}

.interactive icoglyph-svg::part(svg) {
  transition: transform 0.2s ease;
}
.interactive icoglyph-svg:hover::part(svg) {
  transform: scale(1.1);
}

Theme Support

Since icons inherit their style from CSS custom properties, switching between light and dark themes is straightforward. Define per-theme values on a parent selector or with prefers-color-scheme.

.light icoglyph-svg {
  --icoglyph-stroke: #374151;
  --icoglyph-stroke-width: 0.35rem;
}

.dark icoglyph-svg {
  --icoglyph-stroke: #e5e7eb;
  --icoglyph-stroke-width: 0.35rem;
}

/* Or with media query */
@media (prefers-color-scheme: dark) {
  icoglyph-svg {
    --icoglyph-stroke: #e5e7eb;
  }
}

Setting --icoglyph-stroke: currentColor makes the icon inherit the text color of its parent, which is often the simplest way to support themes.