Material Design Icon Shapes in paint.net

treycodes · June 1, 2020

Hello,

I'm a developer, and as of the past week or so, a fan of paint.net... I frequently use the material design icons for, well, icons. There's not a lot of shapes available in paint.net that I could really use but I made use of the custom shapes feature. I figured someone else could use this too so I tried to make it non-developer friendly...

There's A LOT of material design icons you can choose from on materialdesignicons.com. For this example I am using the "emoticon-devil-outline" icon. You can search for whatever shape/icon you need and when you find one just open the details up.

The details screen has an advanced export drop down and XAML is one of the options (which is what the paint.net shapes files are).

You can select either XAML option since the shape geometry is the same for both UI elements.

Copy the "Data" attribute (and optionally it's value). Now, I guess I'm limited on the upload pictures for this post and even though I've removed extra ones it's still saying I'm over the limit which is annoying... but anyways, either create a new or copy an existing custom shape. I've included the contents of this one as an example but you're free to use it as a template or whatever works for you.

When creating a new icon/file here's the things that you need to change (just as a quick reference):

DisplayName attribute value
- This is what your shape will show up as in the custom section in paint.net AND is used for alphabetical sorting. So I have all of my material shaped DisplayNames are prefixed with "material-" so they are easier to find
Geometry attribute value
- This comes from the Data attribute on the material design site's XAML export drop down menu in the "Advanced Export" section
The file name of the document
- In this case I created a folder in "Shapes" called "Material" and then created this material-emoticon-devil-outline.xaml

<ps:SimpleGeometryShape xmlns="clr-namespace:PaintDotNet.UI.Media;assembly=PaintDotNet.Framework"
        xmlns:ps="clr-namespace:PaintDotNet.Shapes;assembly=PaintDotNet.Framework"
	DisplayName="material-emoticon-devil-outline"
        Geometry="M1.5,2.09C2.4,3 3.87,3.73 5.69,4.25C7.41,2.84 9.61,2 12,2C14.39,2 16.59,2.84 18.31,4.25C20.13,3.73 21.6,3 22.5,2.09C22.47,3.72 21.65,5.21 20.28,6.4C21.37,8 22,9.92 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12C2,9.92 2.63,8 3.72,6.4C2.35,5.21 1.53,3.72 1.5,2.09M20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12M10.5,10C10.5,10.8 9.8,11.5 9,11.5C8.2,11.5 7.5,10.8 7.5,10V8.5L10.5,10M16.5,10C16.5,10.8 15.8,11.5 15,11.5C14.2,11.5 13.5,10.8 13.5,10L16.5,8.5V10M12,17.23C10.25,17.23 8.71,16.5 7.81,15.42L9.23,14C9.68,14.72 10.75,15.23 12,15.23C13.25,15.23 14.32,14.72 14.77,14L16.19,15.42C15.29,16.5 13.75,17.23 12,17.23Z">
</ps:SimpleGeometryShape>

I'm sure this isn't anything new but it's the best way to make use of the custom shapes for paint.net (which I started using ~a week ago). If you have any questions or need more examples let me know.

Edited June 1, 2020 by treycodes
formatting

treycodes · June 1, 2020

I couldn't upload the file with the .xaml extension but here it is as a .txt file. Just change the extension to .xaml before putting it in your shapes folder.

material-emoticon-devil-outline.txt