Icons

Live demonstration

Meaningful icon

Use it

Use an icon argument on a higher-level component where it provides one. Call bw_icon directly only for standalone glyphs.
Register project icons once from AppConfig.ready with reviewed static SVG inner markup.
Mark directional icons so they flip in RTL. Never pass visitor supplied SVG through the registry.

{% load brickwork_icons %}
<p>{% bw_icon "search" size=icon_size label="Search documentation" %} Search documentation</p>
<button class="bw-btn bw-btn--secondary" type="button">{% bw_icon "download" size=icon_size decorative=True %} Export</button>

Python context

# views.py
context = {
    "icon_size": "md",
    "icon_label": "Search documentation",
}

Public API

Name	Signature or values	Contract
`bw_icon`	`name, size='md', decorative=False, label='', css_class=''`	Renders a registered SVG. size is sm, md, lg, or xl.
`register_icons`	`mapping, directional=()`	Registers reviewed SVG path markup at app-ready time. The caller owns the markup trust boundary.
`decorative / label`	`exactly one`	The tag raises if both or neither are supplied.

Accessibility and no-JavaScript behaviour

Decorative icons use aria-hidden. Meaningful icons receive role=img and an escaped accessible label. Icon-only controls still need their own accessible name.

Icons are inline SVG markup, so they need no script or external sprite request.

Troubleshooting

The icon is blank or raises.: Use a registered name. Unknown names intentionally raise with a nearby suggestion.
A screen reader announces a decorative glyph.: Pass decorative=True, or give the icon a useful label, but never both.