V8/feature/update icon picker to use umb icon (#9063)

src/Umbraco.Web.UI.Client/src/common/directives/components/umbicon.directive.js

@@ -15,16 +15,7 @@ Simple icon
 
 Icon with additional attribute. It can be treated like any other dom element
 <pre>
-    <umb-icon icon="icon-alert" class="icon-class" ng-click="doSomething()"></umb-icon>
-</pre>
-
-Manual svg string
-This format is only used in the iconpicker.html
-<pre>
-    <umb-icon 
-        icon="icon-alert"
-        svg-string='<svg height="50" width="50"><circle cx="25" cy="25" r="25" fill="red" /></svg>'>
-    </umb-icon>
+    <umb-icon icon="icon-alert" class="icon-class"></umb-icon>
 </pre>
 @example
  **/
@@ -43,13 +34,19 @@ This format is only used in the iconpicker.html
                 svgString: "=?"
             },
 
-            link: function (scope) {
-                
+            link: function (scope, element) {
                 if (scope.svgString === undefined && scope.svgString !== null && scope.icon !== undefined && scope.icon !== null) {
-                    var icon = scope.icon.split(" ")[0]; // Ensure that only the first part of the icon is used as sometimes the color is added too, e.g. see umbeditorheader.directive scope.openIconPicker
+                    const observer = new IntersectionObserver(_lazyRequestIcon, {rootMargin: "100px"});
+                    const iconEl = element[0];
 
-                    _requestIcon(icon);
+                    observer.observe(iconEl);
+
+                    // make sure to disconnect the observer when the scope is destroyed
+                    scope.$on('$destroy', function () {
+                        observer.disconnect();
+                    });
                 }
+
                 scope.$watch("icon", function (newValue, oldValue) {
                     if (newValue && oldValue) {
                         var newicon = newValue.split(" ")[0];
@@ -61,6 +58,17 @@ This format is only used in the iconpicker.html
                     }
                 });
 
+                function _lazyRequestIcon(entries, observer) {
+                    entries.forEach(entry => {
+                        if (entry.isIntersecting === true) {
+                            observer.disconnect();
+
+                            var icon = scope.icon.split(" ")[0]; // Ensure that only the first part of the icon is used as sometimes the color is added too, e.g. see umbeditorheader.directive scope.openIconPicker
+                            _requestIcon(icon);
+                        }
+                    });
+                }
+
                 function _requestIcon(icon) {
                     // Reset svg string before requesting new icon.
                     scope.svgString = null;

src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/iconpicker/iconpicker.controller.js

@@ -43,10 +43,24 @@ function IconPickerController($scope, localizationService, iconHelper) {
 
         setTitle();
 
-        iconHelper.getIcons().then(function (icons) {
-            vm.icons = icons;
-            vm.loading = false;
-        });
+        iconHelper.getAllIcons()
+            .then(icons => {
+                vm.icons = icons;
+
+                // Get's legacy icons, removes duplicates then maps them to IconModel
+                iconHelper.getIcons()
+                    .then(icons => {
+                        if (icons && icons.length > 0) {
+                            let legacyIcons = icons
+                                .filter(icon => !vm.icons.find(x => x.name == icon))
+                                .map(icon => { return { name: icon, svgString: null }; });
+
+                            vm.icons = legacyIcons.concat(vm.icons);
+                        }
+
+                        vm.loading = false;
+                    });
+            });
 
         // set a default color if nothing is passed in
         vm.color = $scope.model.color ? findColor($scope.model.color) : vm.colors.find(x => x.default);

src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/iconpicker/iconpicker.html

@@ -45,10 +45,10 @@
 
                 <div class="umb-control-group" ng-show="!vm.loading && filtered.length > 0 ">
                     <ul class="umb-iconpicker" ng-class="vm.color.value" ng-show="vm.icons">
-                        <li class="umb-iconpicker-item" ng-class="{'-selected': icon == model.icon}" ng-repeat="icon in filtered = (vm.icons | filter: searchTerm) track by $id(icon)">
-                            <button type="button" title="{{icon}}" ng-click="vm.selectIcon(icon, vm.color.value)">
-                                <i class="{{icon}} large" aria-hidden="true"></i>
-                                <span class="sr-only"><localize key="buttons_select">Select</localize> {{icon}}</span>
+                        <li class="umb-iconpicker-item" ng-class="{'-selected': icon.name == model.icon}" ng-repeat="icon in filtered = (vm.icons | filter: searchTerm | orderBy:'name') track by $id(icon)">
+                            <button type="button" title="{{icon.name}}" ng-click="vm.selectIcon(icon.name, vm.color.value)">
+                                <umb-icon class="umb-iconpicker-svg {{icon.name}} large" icon="{{icon.name}}"></umb-icon>
+                                <span class="sr-only"><localize key="buttons_select">Select</localize> {{icon.name}}</span>
                             </button>
                         </li>
                     </ul>