1. Current icon options
<clr-icon shape="info"></clr-icon>
<clr-icon shape="success"></clr-icon>
<clr-icon shape="warning"></clr-icon>
<clr-icon shape="danger"></clr-icon>
2. Color options
<clr-icon shape="info"></clr-icon>
<clr-icon shape="info" class="icon-color-highlight"></clr-icon>
<clr-icon shape="info" class="icon-color-danger"></clr-icon>
<clr-icon shape="info" class="icon-color-warning"></clr-icon>
<clr-icon shape="info" class="icon-color-success"></clr-icon>
<clr-icon shape="info" class="icon-color-info"></clr-icon>
Inverse color option
<clr-icon shape="info" class="icon-color-inverse"></clr-icon>
3. Setting the icon size
<clr-icon shape="info" size="12"></clr-icon>
<clr-icon shape="info" size="16"></clr-icon>
<clr-icon shape="info" size="36"></clr-icon>
<clr-icon shape="info" size="48"></clr-icon>
<clr-icon shape="info" size="64"></clr-icon>
<clr-icon shape="info" size="72"></clr-icon>
The size attribute overrides the CSS size style. If you don’t set either the size attribute or the CSS size style, the size defaults to 16 by 16 pixels.
4. Orientation options
<clr-icon shape="info" class="icon-orient-up"></clr-icon>
<clr-icon shape="info" class="icon-orient-right"></clr-icon>
<clr-icon shape="info" class="icon-orient-left"></clr-icon>
<clr-icon shape="info" class="icon-orient-down"></clr-icon>