IconShape

23 Sep 20253 minutes to read

Defines the behavior of default IconShapes

Properties

borderColor string

Sets the border color of an icon.

Defaults to ’’

borderWidth number

Defines the border width of the icon.

Defaults to 1

content string

Defines the custom content of the icon

Defaults to ’’

cornerRadius number

Defines the corner radius of the icon border

Defaults to 0

fill string

Sets the fill color of an icon.

<div id='diagram'></div>
let nodes: NodeModel[] = [{
          id: 'node1', width: 100, height: 100, offsetX: 100, offsetY: 100,
          annotations: [{ content: 'Default Shape' }],
          expandIcon: { height: 20, width: 20, shape: "ArrowDown", fill: 'red' },
          collapseIcon: { height: 20, width: 20, shape: "ArrowUp" },
      }];
let diagram: Diagram = new Diagram({
...
 nodes: nodes,
...
});
diagram.appendTo('#diagram');

Defaults to ‘white’

height number

Defines the height of the icon.

Defaults to 10

horizontalAlignment HorizontalAlignment

Defines how the Icon has to be horizontally aligned.

  • Stretch - Stretches the diagram element throughout its immediate parent
  • Left - Aligns the diagram element at the left of its immediate parent
  • Right - Aligns the diagram element at the right of its immediate parent
  • Center - Aligns the diagram element at the center of its immediate parent
  • Auto - Aligns the diagram element based on the characteristics of its immediate parent

Defaults to ‘Auto’

iconColor string

Sets the Path color of an icon.

Defaults to ’’

margin MarginModel

Defines the space that the icon has to be moved from its actual position

Defaults to new Margin(0,0,0,0)

offset PointModel

Defines the offset of the icon.

Defaults to new Point(0.5,1)

padding MarginModel

Defines the space that the icon has to be moved from the icon border

Defaults to new Margin(2,2,2,2)

pathData string

Defines the geometry of a path

Defaults to ’’

shape IconShapes

Defines the shape of the icon.
None
Minus - sets the icon shape as minus
Plus - sets the icon shape as Plus
ArrowUp - sets the icon shape as ArrowUp
ArrowDown - sets the icon shape as ArrowDown
Template - sets the icon shape based on the given custom template
Path - sets the icon shape based on the given custom Path

Defaults to ‘None’

verticalAlignment VerticalAlignment

Defines how the Icon has to be Vertically aligned.

  • Stretch - Stretches the diagram element throughout its immediate parent
  • Top - Aligns the diagram element at the top of its immediate parent
  • Bottom - Aligns the diagram element at the bottom of its immediate parent
  • Center - Aligns the diagram element at the center of its immediate parent
  • Auto - Aligns the diagram element based on the characteristics of its immediate parent

Defaults to ‘Auto’

width number

Defines the width of the icon.

Defaults to 10