Styling

Styling

Sizing

The host element has these defaults:

icoglyph-svg {
  display: inline-block;
  width: 1em;
  height: 1em;
}

Icons render at the current font size and sit inline with text. Resize via font-size, or set width and height directly for explicit pixel sizing.

/* Resize via font-size */
icoglyph-svg { font-size: 32px; }

/* Or set width/height directly */
icoglyph-svg { width: 32px; height: 32px; }

/* Fill a container */
.icon-wrapper icoglyph-svg { width: 100%; height: 100%; }

Color

Icons use stroke: currentColor by default and follow the surrounding text color automatically. Use standard CSS to style them - no custom properties needed.

/* recommended - icons follow text color */
icoglyph-svg { color: #333; }

/* or set stroke directly */
icoglyph-svg { stroke: #333; }

/* stroke width (viewBox units, default 9) */
icoglyph-svg { stroke-width: 6; }

/* theme all icons in a section */
.dark-section { color: white; }

Inline Styles

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

<icoglyph-svg
  use="arrow-right"
  style="color: #2563eb; stroke-width: 8;"
></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 {
  color: #374151;
  stroke-width: 8;
}

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

Hover Effects

Use standard CSS transitions on the <icoglyph-svg> element or its parent. Color transitions cascade naturally to the icon via currentColor.

icoglyph-svg {
  cursor: pointer;
  transition: color 0.15s ease;
}
icoglyph-svg:hover {
  color: #2563eb;
}

Filters and Transforms

The inner <svg> is in the light DOM and can be targeted directly with icoglyph-svg > svg for filters, transforms, or pointer-events.

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

.interactive icoglyph-svg > svg {
  transition: transform 0.2s ease;
}
.interactive icoglyph-svg:hover > 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 { color: #374151; }
.dark icoglyph-svg { color: #e5e7eb; }

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

Icons use stroke: currentColor by default, so they already inherit the text color of their parent. No extra configuration needed for theme support.