Options
ds-icon, and have specific classes for applying icons. Basic usage
For a full list of published icon classes, refer to the examples on the Icons page.
Component color
All Icon options support component color classes.
Visual states
Icon adheres to the 4x preset visual states - alert, warning, success and info.
Indent
Icon supports a subset to ds-indents
Size
When using ds-icon inside ds-text or ds-heading if you don’t specify a specific size, the icon will automatically be scaled to suit the ds-text or ds-heading parent element.
ds-icon, and have specific classes for applying icons. You can specify a specific icon size using the following classes:
Styles
Round
Square
Rounded
Animation
Animation states for icons should only be used sparingly to indicate temporary states (such as sending/receiving data or waiting for a server side process to complete).
Tests
Inline vs class
This test checks that the icon specified as an inline ds-icon presents the same as an element if an icon class.
Sizing
The following tests check that a ds-icon without a specific size class inside various html elements/components assume the correct default sizing for that element.