Page tree

Have questions? Stuck? Please check our FAQ for some common questions and answers.

Skip to end of metadata
Go to start of metadata

IconService

The IconService is an Angular Factory in the SVG module with the name icon.js. It provides an API to inject pre-installed icons (based on glyphs) to be used in the client-side application. To use this API, see the documentation on injecting Angular services.

What is an icon?

An icon is a higher level of abstraction for the GlyphService. It is used as a lookup for predefined glyphs to quickly create an SVG element. Icons are used in an HTML attribute in a directive to quickly insert dynamic icons into the GUI. There is also an API to quickly insert icons via the IconService instead of going through the GlyphService.

Icons are in the Device View. Below is a checkmark icon and a device switch icon as examples.

Notice how these are still SVG glyphs. The only difference is that they were inserted using the IconService via an icon directive.

API Functions

NameSummary
loadIconCreates an icon with the given glyph ID.
loadIconByClassCreate an icon with the given icon lookup. This function provides more options than loadEmbeddedIcon.
loadEmbeddedIconCreate an icon with the given icon lookup.
addDeviceIconAdds a device icon to the given element.
addHostIconAdds a host icon to the given element.
iconConfigReturns the configuration for device and host icons in the Topology View.
sortIconsReturns an API (used in Tabular views) for adding ascending and descending icons, and removing them.

registerIconMapping

Registers an icon-to-glyph mapping.

Directive

NameOther AttributesSummary
iconicon-id, icon-sizeCreates an icon in the HTML element with the given ID of the given size.

Function Descriptions

loadIcon

Loads an SVG icon into the given div using a glyph ID instead of an icon lookup.

Example UsageArgumentsDefault ParametersReturn Value
is.loadIcon(div, glyphId, size, installGlyph, svgClass);

div - d3 selection of the div where the icon should be loaded

glyphId - string of the glyph ID of the glyph you would like to have as the icon

size - number in pixels that represents one side's length of the icon (a square)

installGlyph - a truthy value will load the icon into the glyph defs element

svgClass - string of a CSS class to identify the SVG layer

If any of the following values are undefined, they will be given the following default values.

glyphID - 'unknown'

size - 20

installGlyph - false

svgClass - 'embeddedIcon'

an icon will be created in the given div, no return value

loadIconByClass

Loads an SVG icon into the given div using an icon lookup. This calls the loadIcon function. The main difference is that the SVG group element will have iconCls as a class.

Example UsageArgumentsDefault ParametersReturn Value
is.loadIconByClass(div, iconCls, size, installGlyph, svgClass);

div - d3 selection of the div where the icon should be loaded

iconCls - string of the icon lookup that maps to a glyph ID

size - number in pixels that represents one side's length of the icon (a square)

installGlyph - a truthy value will load the icon into the glyph defs element

svgClass - string of a CSS class to identify the SVG layer

If any of the following values are undefined, they will be given the following default values.

iconCls - 'unknown' will be used if the icon lookup couldn't be found mapped to a glyph

size - 20

installGlyph - false

svgClass - 'embeddedIcon'

creates an icon, no return value

loadEmbeddedIcon

An abstraction of loadIconByClass – it always installs the glyph defs element.

Example UsageArgumentsDefault ParametersReturn Value
is.loadEmbeddedIcon(div, iconCls, size);

div - d3 selection of the div where the icon should be loaded

iconCls - string of the icon lookup that maps to a glyph ID

size - number in pixels that represents one side's length of the icon (a square)

If any of the following values are undefined, they will be given the following default values.

iconCls - 'unknown' will be used if the icon lookup couldn't be found mapped to a glyph

size - 20

creates an icon, no return value

addDeviceIcon

Shortcut function to add a device icon to the Topology View.

Example UsageArgumentsReturn Value
is.addDeviceIcon(elem, glyphId);

elem - d3 selection of the SVG element of where the icon should be

glyphId - string of the glyph ID to use

d3 selection of the group element that contains the icon

addHostIcon

Shortcut function to add a host icon to the Topology View.

Example UsageArgumentsReturn Value
is.addHostIcon(elem, radius, glyphId);

elem - d3 selection of the SVG element of where the icon should be

radius - the radius of the circle that the host icon will be in

glyphId - string of the glyph ID to use

d3 selection of the group element that contains the icon

iconConfig

Returns the configuration for device and host icons in the Topology View.

Example UsageArgumentsReturn Value
is.iconConfig();nonean object with icon configuration information for device and host icons – access these through the tags 'device' and 'host'

sortIcons

Returns an API to manipulate the sort icons used in the Tabular Views for sort direction.

Example UsageArgumentsReturn Value
var sortAPI = is.sortIcons();nonean object containing an API (see below)
Returned API Example UsageArgumentsReturn Value
sortAPI.sortAsc(div);div - d3 selection of the div where the icon should be loadedcreates an up arrow for ascending sort direction, no return value
sortAPI.sortDesc(div);div - d3 selection of the div where the icon should be loadedcreates a down arrow for ascending sort direction, no return value
sortAPI.sortNone(div);div - d3 selection of the div that contains the icon that should be removedremoves the contents of div, no return value

registerIconMapping

Registers an icon-to-glyph mapping 

Example UsageArgumentsReturn Value

is.registerIconMapping(iconId, glyphId);

iconId - the new icon ID to be added to the map

glyphId - the ID of a glyph in the glyph library

None

Directive

icon

Icons are also able to be loaded into HTML elements through an Angular directive.

Example Usage in HTML

<div icon icon-id="active" icon-size="36"></div>

The icon directive calls loadEmbeddedIcon for you. In this example, the "checkMark" glyph will be used, because it matches up to the "active" icon class.

Make sure the icon directive is inside a div that can have elements dynamically appended to it.

Attributes Used

AttributeDescriptionDefault Value
icon-id (required)the icon lookup to match icon to glyph(there is no default)
icon-size (optional)the size in pixels of one side of the icon (icons are square)the Number 20

You can also have an Angular interpolated value as the icon-id, and the icon glyph will be updated automatically. This approach is used in the Tabular Views to dynamically change the icon indicating active or inactive status. Below is an example from the Device View:

<div icon icon-id="{{dev._iconid_available}}"></div>

Icon Lookup

Below is a mapping of icon lookup keys to the glyph IDs they correspond to. Also see the list of all glyphs.

  • No labels