Join GitHub today
GitHub is home to over 31 million developers working together to host and review code, manage projects, and build software together.Sign up
Adding or Updating Built In Library Icons
This Wiki walks through adding or replacing icons for out-of-the-box Dynamo nodes. If you are looking for information on adding icons to ZeroTouch or NodeModel derived nodes please see this Wiki instead. To skip the additional background information start here.
Small icons are a 32px X 32px images used in the library next to a nodes name.
Large icons are 96px X 96px images visible when hovering a node in the library via a separate pop-up window displaying a nodes description
The icon names should include the full class name, including the namespace. You can also locate the fully qualified name in the
layoutSpec.json file if the node already exists.
NodeSearchElement (from folder Dynamo\bin\AnyCPU\Debug\nodes): Namespace.Class.Small.png
Operators do not use their real names because Visual Studio doesn't not allow characacters such as
% == !=. Operators use FunctionDescriptor.Name.Small.png
It is common to have several Dynamo nodes with the same name in the library, each taking different input parameters. We handle this by appending the parameter types to the name, each separated by a dash. You can easily locate these types by hovering the node names in the Library as shown below.
If you have array of incoming parameters, simply replace
If you are working with arbitrary arrays replace
// Geometry Object Autodesk.DesignScript.Geometry.BoundingBox.ByGeometry.Geometry.Small.png // 1 Dimensional Array of Geometry Objects Autodesk.DesignScript.Geometry.BoundingBox.ByGeometry.Geometry1.Small.png // 2 Dimensional Array of Geometry Objects Autodesk.DesignScript.Geometry.BoundingBox.ByGeometry.Geometry2.Small.png // Arbitrary Array of Geometry Objects Autodesk.DesignScript.Geometry.BoundingBox.ByGeometry.GeometryN.Small.png
Step 1: Add Icons to Resources
Once you have your icons they should be stored in the
Resources folder in your Dynamo repo within the appropriate namespace sub-folder.
Small Icon Location:
Large Icon Location:
Step 2: Update .resx File
Begin by opening your Dynamo Visual Studio Solution. Navigate to the appropriate namespace of the node you wish to add an icon to. There should be an existing
.resx file under this namespace. The
.resx associated with the example used above would be...
Double-click to open the
.resx in the main visual studio environment. You should see any pre-existing icons displayed.
NOTE: If you are replacing an existing icon make sure to remove it by right-clicking and selecting
remove before proceeding to avoid naming conflicts.
Drag and drop your small and large icons on the
.resx file within Visual Studio. Now we want to ensure the new icons are embedded. We can do this by selecting the icon we just placed, navigating to properties, and selecting
Embedded in .resx in the
Persistence field. Once embedded the files in the resources folder can be deleted if desired.
Step 3: Build
Rebuild and launch Dynamo to verify your icons are properly displayed.
Step 4: Delete Resources Folder in VS
(This step only applies if you are adding new icons and shouldn't be necessary for renaming existing icons)
After the icons have been embedded you need to delete the additional resources folder that gets created in the
.csproj when you drag and drop new icons into the
.resx. This will not remove them from
C:\...\Dynamo\src\Resources\.. but will prevent you from committing unnecessary changes to the project file.
Step 5: Update Testing Resources
When adding, modifying, or removing icons to the Library you need to make sure you update the
libraryItems.json file with any changes. If you do not do this the
ViewExtensionLibraryTests.DynamoLibraryItemsTests.VerifyIconsForLibraryItems test will fail! This will also ensure any new icons are appropriately covered in testing. The properties shown in the image below should correspond with the naming conventions used above in adding the icon.