<!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"]});