The Clarity Icons library features a namespaced core of functionality that is publicly accessible from the browser's
window
object. This "API" is available at ClarityIcons
and
provides three useful pieces of functionality such as retrieving icons, adding new icons, and creating aliases for
icons. It's worth noting that you can also access the API from the "@clr/icons"
module
in Typescript. For example:
"@clr/icons"
like this make sure that you are not also loading it via a
script tag or in some other manner.
You can retrieve and check the currently available icons in Clarity Icons by calling the
ClarityIcons.get()
method. The method will return the list of icons, each in a form of
key:value. The key being the icon name and the value its template, you can retrieve the specific icon template by
passing its name in the method. For example: ClarityIcons.get("check")
, which will
return the SVG template of the "check" icon:
"My Custom Icon"
is not valid
"myCustomIcon"
and "mycustomicon"
will be the same icon
The ClarityIcons API enables you to add your own icons to the publicly available ClarityIcons architecture. Use the
following call to add your icon to our library in your application:
The Clarity Icons API can create aliases for the icons in your application with a single API call: