@softwareag/dlt-icons v1.6.0

Using Icon font

Add the reference in the header as shown below:

<link rel="stylesheet" href="path-to/node_modules/@softwareag/dlt-icons/Font/css/dlt-icons-font.css"/>

Add the specific class name (Copy the names from showcase below) to the element as shown below to render the icon:

<span class="dlt-icon-check"></span>

Using SVG Sprite
Inline

To insert your icons as inline SVGs (with the <use> element), copy the <svg> element (that contains symbol definitions) from the source of the 'symbol-defs.svg' file, below your own HTML's <body> tag. After copying this SVG, you can reference your glyphs like the following:

<svg class="dlt-icon-svg dlt-icon-check"> 
  <use xlink:href="#dlt-icon-check"></use>
</svg>

Add the reference in the header as shown below for basic styling:

<link rel="stylesheet" href="path-to/node_modules/@softwareag/dlt-icons/Sprite/css/dlt-icons-sprite.css"/>
External (Requires server)

To reference an external SVG (containing <defs>) instead of embedding it in HTML, you can easily use as shown below.

<svg class="dlt-icon-svg dlt-icon-shutdown">
  <use xlink:href="path-to/symbol-defs.svg#dlt-icon-shutdown"></use>
</svg>

Add the reference in the header as shown below for basic styling:

<link rel="stylesheet" href="path-to/node_modules/@softwareag/dlt-icons/Sprite/css/dlt-icons-sprite.css"/>

Showcase

For searching capability, please check the Delite icon library.