Icon Media (shared partial)

Statistic and CTA Icon Item accept the same icon_name / icon_image prop pair and share the same three-way fallback: a named icon, an uploaded image, or an empty-state placeholder. Text uses the same partial with icon_name only.

Usage

Loading…

Reference

That cascade lives in one place — components/icon_media/ — and each component includes it rather than repeating it:

{% include 'ixm_blocks:icon_media' with {
  icon_name: icon_name,
  icon_image: icon_image,
  icon_class: 'cta-icon-item__icon',
  placeholder_class: 'cta-icon-item__icon-placeholder',
} only %}

icon_media isn't placeable on its own in Canvas (noUi: true, the same convention canvas:image uses) — it's an implementation detail other SDCs include, not a component an editor drops onto a page. icon_name wins over icon_image when both are set; Text passes only icon_name and show_placeholder: false because its icon is optional, while Statistic and CTA Icon Item keep the placeholder since their icon slot is always visually present.

Props

Prop	Required	Type	Description	Example
icon_name	Optional	string	Choose an icon. Used instead of the icon image if both are set.
icon_image	Optional	object or string	An image to use as the icon.
icon_class	Optional	string	Extra CSS classes for the icon. Defaults to ``.
placeholder_class	Optional	string	Extra CSS classes for the placeholder. Defaults to ``.
show_placeholder	Optional	boolean	Show the placeholder when there's no icon or image. Defaults to true.

Keeping the icon inline-level

icon_media.twig applies d-inline-block/d-inline-flex on the image and placeholder branches to counter Canvas's generated Tailwind bundle, which resets img, svg, video { display: block; } — without it a plain <img> stops being inline-level and ignores the ancestor's inherited text-align. icon_name's ixm_icon() wrapper is already inline-flex (see css/ixm-icon.css).

Callers must size the icon with width/height only, never display. Setting display: block on your component's icon modifier class silently reintroduces the same bug: the icon stops inheriting an ancestor's text-align the way every other region (title, subtitle, body) still does, because those stay ordinary inline-level text content while the icon, once forced block, no longer is. statistic.css is the reference pattern — width/height only, no display override.