<!DOCTYPE html>
<html>
<head>
<!--CLARITY ICONS STYLE-->
<link rel="stylesheet" href="https://unpkg.com/clarity-icons/clarity-icons.min.css">
<!--CLARITY ICONS DEPENDENCY: CUSTOM ELEMENTS POLYFILL-->
<script src="https://unpkg.com/@webcomponents/custom-elements/custom-elements.min.js"></script>
<!--CLARITY ICONS API & ALL ICON SETS-->
<script src="https://unpkg.com/clarity-icons/clarity-icons.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<h1>
Clarity Icons API
</h1>
<p>
Check <b>app.js</b> file to see how the API is used to add aliases to existing icons so you can use those icons with their aliases.
</p>
<p>
<clr-icon shape="pencil" size="36"></clr-icon> is a <em>"pencil"</em> icon. I have given it new names such as "draw" and "mark" using the API's <b>".alias()"</b> method.
</p>
<p>
So now <clr-icon shape="draw" size="36"></clr-icon> is a <em>"draw"</em> icon too. You can use it as a <em>"mark"<em> icon too and the result would look the same.
</p>
</body>
</html>
ClarityIcons.alias({"pencil": ["draw", "mark"]});