Initial commit

Co-Authored-By: kotte <14197736+mrtamagotchi@users.noreply.github.com>
Co-Authored-By: mikaeltellhed <2311083+mikaeltellhed@users.noreply.github.com>
Co-Authored-By: Tore Knudsen <18231882+torekndsn@users.noreply.github.com>
Co-Authored-By: Michael Cartner <32543275+michaelcartner@users.noreply.github.com>

library/prefabs/list-with-icons/README.md

@@ -0,0 +1,76 @@
+---
+title: List With Icons
+hide_title: true
+---
+
+import useBaseUrl from '@docusaurus/useBaseUrl'
+import CopyToClipboardButton from '/src/components/copytoclipboardbutton'
+
+# List With Icons
+
+This is a very simple list component that you can use as starting point for building your own custom lists.
+
+<div className="ndl-image-with-background l">
+
+![](/library/prefabs/list-with-icons/list-with-icons.png)
+
+</div>
+
+## Basic usage
+
+You specify the items of the list by editing the **Items** array in the **List With Icons** component. Below is the default value.
+
+```javascript
+[
+    {
+        // Icons are references to material icons, 
+        // see https://fonts.google.com/icons?selected=Material+Icons
+        Icon:"account_circle",
+        Label:"List Item 1"
+    },
+    {
+        Icon:"account_circle",
+        Label:"List Item 2"
+    },
+    {
+        Icon:"account_circle",
+        Label:"List Item 3"
+    }   
+]
+```
+
+- **Icon** This is an icon identifier, you can find a list of all supported icons [here](https://fonts.google.com/icons?selected=Material+Icons).
+- **Label** The label that should be shown for the list item.
+
+## Item Clicked
+
+The list has an output signal called **Item Clicked** when an item is clicked, and the output **Item Id** will contain the id of the object corresponding to that item.
+
+<div className="ndl-image-with-background xl">
+
+![](/library/prefabs/list-with-icons/list-with-icons-1.png)
+
+</div>
+
+The function node in the above example contains the following code:
+
+```javascript
+const clickedListItem = Noodl.Objects[Inputs.ItemId]
+
+console.log("This item was clicked: " + clickedListItem.Label)
+```
+
+## Customizing
+
+Like most UI Components in the library this is a great staring point for building your own lists. The best way is to look at the **Item** sub component of the **List With Icons** component. Here you can see how the **Label** and **Icon** are connected from the **Repeater Object**. 
+
+<div className="ndl-image-with-background xl">
+
+![](/library/prefabs/list-with-icons/list-with-icons-2.png)
+
+</div>
+
+It's a starting point to build your own custom list items.
+
+
+