We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

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

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); }

5 Replies

BR Balavignesh RaviChandran Syncfusion Team March 7, 2023 10:22 AM UTC

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



HI Hidden March 7, 2023 11:23 AM UTC

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



BR Balavignesh RaviChandran Syncfusion Team March 8, 2023 01:12 PM UTC

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




SP Scott Peal May 24, 2023 07:15 PM UTC

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.



BR Balavignesh RaviChandran Syncfusion Team May 25, 2023 10:18 AM UTC

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



Loader.
Up arrow icon