BwIcon | bw-icon

Overview

BwIcon is a wrapper around Google Material Symbols.

Usage

Sizes

searchsearchsearch

<div style="display: flex; gap: 4px; padding: 4px; align-items: center;">
  <bw-icon size="sm">search</bw-icon>
  <bw-icon size="md">search</bw-icon>
  <bw-icon size="lg">search</bw-icon>
</div>

Icons

addsettingsdelete

<div style="display: flex; gap: 4px; padding: 4px;">
  <bw-icon>add</bw-icon>
  <bw-icon>settings</bw-icon>
  <bw-icon>delete</bw-icon>
</div>

Properties

Property	Attribute	Description	Type	Default
fill	fill	Whether or not the icon should be filled	boolean	undefined
grade	grade	Icon grade	"high" | "low"	undefined
padding	padding	Padding around the icon	"lg" | "md" | "sm"	undefined
size	size	Size of the icon	"lg" | "md" | "sm" | "xl" | "xs"	'md'
weight	weight	Icon weight	number	undefined

CSS Custom Properties

Name	Description
--fill	1 or 0, true or false
--grade	Emphasis?
--optical	Stroke weight
--weight	icon weight

Dependencies

Used by

• bw-alert
• bw-checkbox
• bw-checkbox-group
• bw-details
• bw-dialog
• bw-file-uploader
• bw-icon-button
• bw-input
• bw-map-search
• bw-menu
• bw-option
• bw-radio
• bw-radio-group
• bw-select
• bw-toast

Graph

---

© 2025 United Systems & Software - All Rights Reserved.