SF Diagram blazor - how to use font icon as the icon of the symbol palette icon

[Hidden]

Question: How to modify below to use a font icon as the Shape's icon?
example: \e00a  - to show oi-arrow-circle-left as the icon

private void CreatePaletteNode(NodeFlowShapes flowShape, string id)
    {
        Node node = new Node()
        {
            ID = id,
            Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = flowShape },
            Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED" },
        };
        PaletteNodes.Add(node);
    }

[Balavignesh RaviChandran]

Could you please confirm whether you are trying to change the icon of the symbol palette header or the symbol of nodes that are rendered in the symbol palette? Please provide details of your requirement which would be helpful for our validation

[Hidden]

The symbol nodes not the header as your example already explains how to do it in the header .

[Balavignesh RaviChandran]

Nodes and symbol contents can be created using SVG elements or HTML elements. It is not applicable to use font icons as content for symbols and nodes. You should convert the font icons into any of the supported formats, such as the path element or HTML element, to render symbols and nodes. Please refer to the following links to create customized nodes and symbols:

 

https://blazor.syncfusion.com/documentation/diagram/shapes#html-template-shape
https://blazor.syncfusion.com/documentation/diagram/shapes#svg-template-shape
https://blazor.syncfusion.com/documentation/diagram/shapes#path-shape-node

[Scott Peal]

Is there any instructions on the logic of the Path data values? Is there a converter to convert an SVG font to a Path? Is there a Path modeling tool to get the data values?

Thanks... This information is missing from the documentation as far as I can tell.

[Balavignesh RaviChandran]

Please find the responses to the following queries below.

 

Queries	Response
Is there a converter to convert an SVG font to a Path?	We do not have any support or tools to convert the SVG font icons to path elements.
Is there any instructions on the logic of the Path data values?  Is there a Path modeling tool to get the data values?	We suggest you use our Metro Studio application, which is a collection of over 7,000 flat and wireframe icon templates that can be easily customized to create thousands of unique icons. It also supports creating custom icon font packages from selected sets of icons. You can use these templates in the node templates to create custom SVG nodes. But the data cannot be used for path shape. Please refer to the following link to learn more about Metro Studio and download it. https://www.syncfusion.com/downloads/metrostudio

[Jacob Harris]

Could the syncfusion team explain what format PathData is in?  I have not found any documentation on the format of this string.

[Balavignesh RaviChandran]

The PathData property in Syncfusion components uses the SVG path data format. This is a string format that defines shapes using a series of commands:

• M (move-to): Start at a point (e.g., M10,20 moves to X=10, Y=20).
• L (line-to): Draw a straight line to a point (e.g., L30,40 draws a line to X=30, Y=40).
• C (curve-to): Draw a cubic curve (e.g., C50,50,70,90,100,100).
• Z (close path): Close the shape by connecting to the starting point.

For example, this path creates a triangle:
M10,10 L100,10 L55,80 Z

You can use this format to create custom shapes. If you’d like to learn more, you can check out this guide on SVG paths.

Let us know if you have any other questions!

Best regards,

Balavignesh R

[Jacob Harris]

Thank you!  On a related topic, is there a way to attach dynamic (not from a template) SVG documents directly as a node?

[Balavignesh RaviChandran]

Attaching dynamically generated SVG content directly as a node is not supported in the SfDiagramComponent. However, you can use the SVG Template feature as an alternative to render SVG content within a node.

Using SVG Templates

The SVG Template feature allows you to define and render custom SVG content for diagram nodes. You can learn more about this approach and how to implement it by referring to the following documentation:

Blazor Diagram - SVG Template Shape

Let us know if you need any further assistance with this implementation!

Regards,
Balavignesh R