Icons are used to provide additional meaning or in places where text label doesn’t fit. Icon component allows you to customize the size and color of the icon.
Accessibility
Any place an icon is used, there must be an accessible text label. If the icon accompanies visible text, the icon can be hidden from assistive tech. If the icon is standalone, it must not be hidden from assistive tech, and must contain a visually hidden label.
To hide an icon from assistive tech, add attribute aria-hidden="true" to the svg.
To add an accessible label to a standalone icon, add a title element inside of the svg that accurately describes the functionality. Ensure it is implemented using a translatable resource.
Sizes
Icons are used throughout our system at various sizes, depending on the use case. Using the .qw-icon-* size classes will define icon sizes. The table below shows the available options.
Additionally, we offer the ability to place an icon inline with text. When placed inline, the icon will inherit the size of the text it accompanies. The class used for inline icons is .qw-icon-inline.
Inline
The Quantum Workplace logo
should be aligned with the text of this paragraph.