Icon
<cds-icon shape="user" aria-label="This is an icon example that shows how to use the icon element in an application"></cds-icon>
Sizes
<cds-icon shape="house" size="sm" aria-label="This is an example of an icon using a pre-defined small size"></cds-icon>
<cds-icon shape="house" size="md" aria-label="This is an example of an icon using a pre-defined medium size"></cds-icon>
<cds-icon shape="house" size="lg" aria-label="This is an example of an icon using a pre-defined large size"></cds-icon>
<cds-icon shape="house" size="xl" aria-label="This is an example of an icon using a pre-defined extra large size"></cds-icon>
<cds-icon shape="house" size="xxl" aria-label="This is an example of an icon using a pre-defined extra extra large size"></cds-icon>
<cds-icon shape="house" size="16" aria-label="This is an example of an icon using a custom size of 16 pixels wide and tall"></cds-icon>
<cds-icon shape="house" size="24" aria-label="This is an example of an icon using a custom size of 24 pixels wide and tall"></cds-icon>
<cds-icon shape="house" size="48" aria-label="This is an example of an icon using a custom size of 48 pixels wide and tall"></cds-icon>
<cds-icon shape="house" size="64" aria-label="This is an example of an icon using a custom size of 64 pixels wide and tall"></cds-icon>
<cds-icon shape="house" size="128" loading aria-label="This is an example of an icon using a custom size of 128 pixels wide and tall"></cds-icon>
Badges
<cds-icon shape="user" size="lg" badge="info" aria-label="This is an example of an icon of a user with a blue informational badge"></cds-icon>
<cds-icon shape="user" size="lg" badge="success" aria-label="This is an example of an icon of a user with a green badge indicating success"></cds-icon>
<cds-icon shape="user" size="lg" badge="danger" aria-label="This is an example of an icon of a user with a red badge indicating danger or an error"></cds-icon>
<cds-icon shape="user" size="lg" badge="warning" aria-label="This is an example of an icon of a user with a dark orange badge indicating a warning"></cds-icon>
<cds-icon shape="user" size="lg" badge="warning-triangle" aria-label="This is an example of an icon of a user with a dark orange triangle indicating something may be wrong"></cds-icon>
<cds-demo inverse inline-block>
<cds-icon shape="user" size="lg" badge="inherit-triangle" inverse aria-label="This is an example of an icon of a user on a dark background with a warning triangle that is the same color as the icon"></cds-icon>
</cds-demo>
Status
<cds-icon shape="user" size="lg" aria-label="This is an example of an icon of a user with the default color of the surrounding text"></cds-icon>
<cds-icon shape="user" status="info" size="lg" aria-label="This is an example of a blue, informational icon of a user"></cds-icon>
<cds-icon shape="user" status="success" size="lg" aria-label="This is an example of a green icon of a user indicating success"></cds-icon>
<cds-icon shape="user" status="warning" size="lg" aria-label="This is an example of a dark orange icon of a user indicating a warning"></cds-icon>
<cds-icon shape="user" status="danger" size="lg" aria-label="This is an example of a red icon of a user indicating danger or an error"></cds-icon>
<cds-icon shape="user" size="lg" solid aria-label="This is an example of an icon of a user completely filled in with the default color of the surrounding text"></cds-icon>
<cds-icon shape="user" status="info" size="lg" solid aria-label="This is an example of an icon of a user completely filled in with the blue, informational color"></cds-icon>
<cds-icon shape="user" status="success" size="lg" solid aria-label="This is an example of an icon of a user completely filled in with a green color indicating success"></cds-icon>
<cds-icon shape="user" status="warning" size="lg" solid aria-label="This is an example of an icon of a user completely filled in with a dark orange color indicating warning"></cds-icon>
<cds-icon shape="user" status="danger" size="lg" solid aria-label="This is an example of an icon of a user completely filled in with a red color indicating danger or an error"></cds-icon>
StatusInverse
<cds-demo inverse inline-block>
<cds-icon shape="user" inverse size="lg" aria-label="This is an example of an icon of a user on a dark background with the default color of the surrounding text"></cds-icon>
<cds-icon shape="user" inverse status="info" size="lg" aria-label="This is an example of a blue, informational icon of a user on a dark background"></cds-icon>
<cds-icon shape="user" inverse status="success" size="lg" aria-label="This is an example of a green icon of a user on a dark background indicating success"></cds-icon>
<cds-icon shape="user" inverse status="warning" size="lg" aria-label="This is an example of a dark orange icon of a user on a dark background indicating a warning"></cds-icon>
<cds-icon shape="user" inverse status="danger" size="lg" aria-label="This is an example of a red icon of a user on a dark background indicating danger or an error"></cds-icon>
<cds-icon shape="user" inverse size="lg" solid aria-label="This is an example of an icon of a user completely filled in with the default color of the surrounding text on a dark background"></cds-icon>
<cds-icon shape="user" inverse status="info" size="lg" solid aria-label="This is an example of an icon of a user completely filled in with the blue, informational color on a dark background"></cds-icon>
<cds-icon shape="user" inverse status="success" size="lg" solid aria-label="This is an example of an icon of a user on a dark background completely filled in with a green color indicating success"></cds-icon>
<cds-icon shape="user" inverse status="warning" size="lg" solid aria-label="This is an example of an icon of a user on a dark background completely filled in with a dark orange color indicating warning"></cds-icon>
<cds-icon shape="user" inverse status="danger" size="lg" solid aria-label="This is an example of an icon of a user on a dark background completely filled in with a red color indicating danger or an error"></cds-icon>></cds-icon>
</cds-demo>
Direction
<cds-icon shape="image" size="lg" direction="up" aria-label="This is an example of an icon whose glyph is directed with its top to point upward. This is the default icon direction."></cds-icon>
<cds-icon shape="image" size="lg" direction="left" aria-label="This is an example of an icon whose glyph is directed with its top to point to the left."></cds-icon>
<cds-icon shape="image" size="lg" direction="down" aria-label="This is an example of an icon whose glyph is directed with its top to point downward."></cds-icon>
<cds-icon shape="image" size="lg" direction="right" aria-label="This is an example of an icon whose glyph is directed with its top to point to the right."></cds-icon>
CustomStyles
The first icon should be green with a yellow badge
The second icon should be all pink (even the warning triangle should be pink)
The third icon should be default gray color with a custom pink badge
<style>
.custom-icon-colors {
background: black;
padding: 8px 12px;
border-radius: 3px;
display: inline-block;
margin-left: 12px;
position: relative;
}
.custom-icon-colors.c {
background: #dcdcdc;
}
.custom-icon-colors::before {
content: 'X';
font-size: 14px;
position: absolute;
display: block;
top: 0;
left: 4px;
color: white;
}
.custom-icon-colors.a::before {
content: 'A';
}
.custom-icon-colors.b::before {
content: 'B';
}
.custom-icon-colors.c::before {
content: 'C';
color: #313131;
}
.custom-icon-colors cds-icon {
height: 36px;
width: 36px;
}
.icon-a {
--color: limegreen;
--badge-color: yellow;
}
.icon-b {
--color: fuchsia;
--badge-color: fuchsia;
}
.icon-c {
--badge-color: fuchsia;
}
</style>
<div class="custom-icon-colors a">
<cds-icon shape="user" badge="default" class="icon-a" aria-label="This is an example of how an icon can be visually customized."></cds-icon>
</div>
<div class="custom-icon-colors b">
<cds-icon shape="user" class="icon-b" badge="warning-triangle" aria-label="This is another example of how an icon can be visually customized."></cds-icon>
</div>
<div class="custom-icon-colors c">
<cds-icon shape="user" badge="default" class="icon-c" aria-label="This is a third example of how an icon can be visually customized."></cds-icon>
</div>
<p>
<i>The first icon should be green with a yellow badge</i><br />
<i>The second icon should be all pink (even the warning triangle should be pink)</i><br />
<i>The third icon should be default gray color with a custom pink badge</i>
</p>
Flip
<cds-icon size="lg" shape="image" aria-label="This is an example of an icon whose glyph is positioned upright. This is the default."></cds-icon>
<cds-icon size="lg" flip="vertical" shape="image" aria-label="This is an example of an icon whose glyph is flipped vertically."></cds-icon>
<cds-icon size="lg" flip="horizontal" shape="image" aria-label="This is an example of an icon whose glyph is flipped horizontally."></cds-icon>
DarkTheme
<div cds-layout="vertical gap:sm" cds-theme="dark" cds-text="body">
<div cds-layout="horizontal gap:sm">
<cds-icon shape="user" size="lg" badge="info"></cds-icon>
<cds-icon shape="user" size="lg" badge="success"></cds-icon>
<cds-icon shape="user" size="lg" badge="danger"></cds-icon>
<cds-icon shape="user" size="lg" badge="warning"></cds-icon>
<cds-icon shape="user" size="lg" badge="warning-triangle"></cds-icon>
</div>
<div cds-layout="horizontal gap:sm">
<cds-icon shape="user" size="lg"></cds-icon>
<cds-icon shape="user" status="info" size="lg"></cds-icon>
<cds-icon shape="user" status="success" size="lg"></cds-icon>
<cds-icon shape="user" status="warning" size="lg"></cds-icon>
<cds-icon shape="user" status="danger" size="lg"></cds-icon>
</div>
<div cds-layout="horizontal gap:sm">
<cds-icon shape="user" size="lg" solid></cds-icon>
<cds-icon shape="user" status="info" size="lg" solid></cds-icon>
<cds-icon shape="user" status="success" size="lg" solid></cds-icon>
<cds-icon shape="user" status="warning" size="lg" solid></cds-icon>
<cds-icon shape="user" status="danger" size="lg" solid></cds-icon>
</div>
</div>