Add document type icons to the items

src/Our.Umbraco.NestedContent/PropertyEditors/NestedContentPropertyEditor.cs

@@ -39,7 +39,8 @@ public NestedContentPropertyEditor()
                 {NestedContentPreValueEditor.ContentTypesPreValueKey, ""},
                 {"minItems", 0},
                 {"maxItems", 0},
-                {"confirmDeletes", 1}
+                {"confirmDeletes", "1"},
+                {"showIcons", "1"}
             };
         }
 
@@ -66,6 +67,9 @@ internal class NestedContentPreValueEditor : PreValueEditor
             [PreValueField("confirmDeletes", "Confirm Deletes", "boolean", Description = "Set whether item deletions should require confirming.")]
             public string ConfirmDeletes { get; set; }
 
+            [PreValueField("showIcons", "Show Icons", "boolean", Description = "Set whether to show the item icons in the list.")]
+            public string ShowIcons { get; set; }
+
             [PreValueField("hideLabel", "Hide Label", "boolean", Description = "Set whether to hide the editor label and have the list take up the full width of the editor window.")]
             public string HideLabel { get; set; }
 

src/Our.Umbraco.NestedContent/Web/UI/App_Plugins/NestedContent/Css/nestedcontent.css

@@ -53,6 +53,13 @@
     line-height: 20px;
 }
 
+.nested-content__heading i 
+{
+    vertical-align: text-top;
+    color: #999; /* same icon color as the icons in the item type picker */
+    margin-right: 10px;
+}
+
 .nested-content__icons 
 {
     margin: -6px 0;

src/Our.Umbraco.NestedContent/Web/UI/App_Plugins/NestedContent/Js/nestedcontent.controllers.js

@@ -73,6 +73,8 @@ angular.module("umbraco").controller("Our.Umbraco.NestedContent.Controllers.Nest
 
         $scope.singleMode = $scope.minItems == 1 && $scope.maxItems == 1;
 
+        $scope.showIcons = $scope.model.config.showIcons || true;
+
         $scope.overlayMenu = {
             show: false,
             style: {}
@@ -176,6 +178,11 @@ angular.module("umbraco").controller("Our.Umbraco.NestedContent.Controllers.Nest
             return name;
         };
 
+        $scope.getIcon = function (idx) {
+            var scaffold = $scope.getScaffold($scope.model.value[idx].ncContentTypeAlias);
+            return scaffold && scaffold.icon && scaffold.icon !== ".sprTreeFolder" ? scaffold.icon : "icon-folder";
+        }
+
         $scope.sortableOptions = {
             axis: 'y',
             cursor: "move",

src/Our.Umbraco.NestedContent/Web/UI/App_Plugins/NestedContent/Views/nestedcontent.html

@@ -7,7 +7,7 @@
 
                 <div class="nested-content__header-bar" ng-click="$parent.editNode($index)" ng-hide="$parent.singleMode">
 
-                    <div class="nested-content__heading" ng-bind="$parent.getName($index)"></div>
+                    <div class="nested-content__heading"><i ng-if="showIcons" class="icon" ng-class="$parent.getIcon($index)"></i><span ng-bind="$parent.getName($index)"></span></div>
 
                     <div class="nested-content__icons">
                         <a class="nested-content__icon nested-content__icon--edit"  ng-class="{ 'nested-content__icon--active' : $parent.currentNode.id == node.id }" ng-click="$parent.editNode($index); $event.stopPropagation();" prevent-default>