---
description: An easy way to import MaterialDesign icons into the standard and custom.
---

# Icons

To see a full list of icons go to [https://materialdesignicons.com](https://materialdesignicons.com)

Select an icon to add. Under `Advanced Export` click on `</>` and choose `View XAML (DrawImage)`.

<figure><img src="https://2522353545-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXf5GuikRIHooatf_sm%2Fuploads%2Fk3lVQcf7F2KTKbN1mIRn%2FDrawImage.png?alt=media&#x26;token=5c0fa683-15af-471a-b3fc-31a4b2881a56" alt=""><figcaption></figcaption></figure>

### Standard icons

Inside of the `DrawingImage` will be a `GeometryDrawing` tag. Copy this tag into the `Icons.xaml` file. Add a `x:Key` attribute to the tag and give it a key. Optionally change the brush of the `GeometryDrawing`.

<figure><img src="https://2522353545-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXf5GuikRIHooatf_sm%2Fuploads%2F2qKvFJTyPCe2URm4s9EP%2FGeometryDrawing.png?alt=media&#x26;token=a2adf93a-32c1-4422-9586-10f03774a5df" alt=""><figcaption></figcaption></figure>

Now add a `DrawingImage` element at the bottom. Give it a `x:Key` attribute. This will be the name of the icon. Set its `Drawing` attribute to the recently added `GeometryDrawing`.

<figure><img src="https://2522353545-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXf5GuikRIHooatf_sm%2Fuploads%2FQeytGYVULLJXOXuUYoY5%2FDrawingImage.png?alt=media&#x26;token=15219636-d62c-4988-aab3-f8e85b831d74" alt=""><figcaption></figcaption></figure>

The last required step is to add the icon name to the `clientGlobals.cs`. Inside of it is `public enum Icons`. Add the icon name inside there at the correct alphabetical order. The icon name must be the same as the `x:Key` of the `DrawingImage`. Now the icon can be used like any other icon.

<figure><img src="https://2522353545-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXf5GuikRIHooatf_sm%2Fuploads%2FYcfJdU5lQeQXUYkO7Uxn%2Ficon.png?alt=media&#x26;token=c2129e66-b8ee-4eb5-ad00-e21034d97941" alt=""><figcaption></figcaption></figure>

## Custom icons



Inside of the `DrawingImage` will be a `GeometryDrawing` tag. Copy this tag into the `$CustomPath/Themes/Icons.xaml` file, if the file does not exist, create a new file  from TimeLine Developer.

<figure><img src="https://2522353545-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXf5GuikRIHooatf_sm%2Fuploads%2F5dP64SBK9bH2V1u1w7aN%2Fimage.png?alt=media&#x26;token=c6475367-560a-4273-8700-fb88774d26c1" alt=""><figcaption><p>Create a new Icons.xaml file</p></figcaption></figure>



&#x20;Add a `x:Key` attribute to the tag and give it a key. Optionally change the brush of the `GeometryDrawing`. See the picture and the comments below.

<figure><img src="https://2522353545-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXf5GuikRIHooatf_sm%2Fuploads%2FtCypBn6QOf4mdDufZYxD%2Fimage.png?alt=media&#x26;token=f15d2797-88b4-4468-bfec-665c20805d9d" alt=""><figcaption><p>Custom icon</p></figcaption></figure>

After the drawing is added the custom `Icons.xaml` file, the icon will be available in the image picker.
