SVG in Web Component Slots
Slots let a Web Component accept caller-provided SVG icons while keeping the component's internal structure encapsulated.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Named Slots for Icon Placement
A custom `<my-button>` component can define `<slot name="icon">` in its Shadow DOM template, letting callers pass any SVG icon (`<my-button><svg slot="icon">...</svg>My Button</my-button>`) into that specific position — the component controls layout while remaining icon-agnostic.
- Named slots accept caller-provided SVG at a specific template position
- Components stay icon-agnostic while controlling overall layout
- Callers supply whatever icon fits their specific use case
Default Icons and Styling Slotted Content
Provide fallback content inside the `<slot>` tag itself for a sensible default icon when the caller doesn't supply one, and use the `::slotted()` CSS pseudo-element within the Shadow DOM to apply limited styling (like sizing) to whatever SVG content gets slotted in.
- Fallback content inside <slot> provides a sensible default icon
- ::slotted() CSS selector styles caller-provided content from inside
- Styling control via ::slotted() is intentionally limited for encapsulation
Frequently Asked Questions
Can I style a caller's SVG icon color from inside the component?
Only partially — ::slotted() can apply layout-level styles like size and spacing, but deep internal SVG styling (specific path colors) is better handled by the caller using currentColor conventions.
What happens if no icon is slotted in?
Whatever fallback content you've placed inside the <slot> tags in the component's template renders by default — a sensible generic icon or empty state, ensuring the component doesn't break without a supplied icon.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Try It Free — Convert Image to SVG