Remove requirement to specify icon class in umb-icon directive

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

@@ -14,7 +14,7 @@ The prompt can be opened in four direction up, down, left or right.</p>
     <div ng-controller="My.Controller as vm">
 
         <div class="my-action" style="position:relative;">
-            <i class="icon-trash" ng-click="vm.showPrompt()"></i>
+            <umb-icon icon="icon-trash" ng-click="vm.showPrompt()"></umb-icon>
             <umb-confirm-action
                 ng-if="vm.promptIsVisible"
                 direction="left"

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

@@ -15,7 +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"></umb-icon>
+    <umb-icon icon="icon-alert" class="another-class"></umb-icon>
 </pre>
 @example
  **/
@@ -33,8 +33,8 @@ Icon with additional attribute. It can be treated like any other dom element
                 icon: "@",
                 svgString: "=?"
             },
-
             link: function (scope, element) {
+
                 if (scope.svgString === undefined && scope.svgString !== null && scope.icon !== undefined && scope.icon !== null) {
                     const observer = new IntersectionObserver(_lazyRequestIcon, {rootMargin: "100px"});
                     const iconEl = element[0];
@@ -49,6 +49,7 @@ Icon with additional attribute. It can be treated like any other dom element
 
                 scope.$watch("icon", function (newValue, oldValue) {
                     if (newValue && oldValue) {
+
                         var newicon = newValue.split(" ")[0];
                         var oldicon = oldValue.split(" ")[0];
 
@@ -64,6 +65,7 @@ Icon with additional attribute. It can be treated like any other dom element
                             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);
                         }
                     });

src/Umbraco.Web.UI.Client/src/less/components/umb-icon.less

@@ -8,26 +8,43 @@
         width: 100%;
         height: 100%;
         fill: currentColor;
+        animation: inherit;
     }
 
-    &.large{
-        width: 32px; 
+    &.large {
+        width: 32px;
         height: 32px;
     }
-    &.medium{
+
+    &.medium {
         width: 24px;
         height: 24px;
     }
-    &.small{
+
+    &.small {
         width: 14px;
         height: 14px;
     }
 
-    &:before, &:after {
+    &::before,
+    &::after {
         content: none !important;
     }
 
-    > i {
-        font-family: inherit;
+    &__inner {
+        // Clear pseudo classes
+        &::before,
+        &::after {
+            content: none !important;
+        }
+
+        ng-transclude {
+            animation: inherit;
+            font-family: inherit;
+
+            > span {
+                animation: inherit;
+            }
+        }
     }
 }

src/Umbraco.Web.UI.Client/src/less/components/umb-lightbox.less

@@ -11,68 +11,74 @@
     align-items: center;
     justify-content: center;
     flex-direction: column;
-}
 
-.umb-drawer-is-visible .umb-lightbox {
-    width: calc(~'100%' - ~'@{drawerWidth}');
-    left: @drawerWidth;
-}
+    &__backdrop {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        background: rgba(21, 21, 23, 0.7);
+        width: 100%;
+        height: 100%;
+    }
 
-.umb-lightbox__backdrop {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    background: rgba(21, 21, 23, 0.7);
-    width: 100%;
-    height: 100%;
-}
+    &__close {
+        position: absolute;
+        top: 20px;
+        right: 20px;
+        height: 40px;
+        width: 40px;
 
-.umb-lightbox__close {
-    position: absolute;
-    top: 20px;
-    right: 20px;
-    height: 40px;
-    width: 40px;
-}
+        .umb-icon {
+            font-size: 20px;
+            height: inherit;
+            width: inherit;
+            position: absolute;
+            top: 0;
+            left: 0;
+        }
+    }
 
-.umb-lightbox__close i {
-    font-size: 20px;
-    height: inherit;
-    width: inherit;
-    position: absolute;
-    top: 0;
-    left: 0;
-}
+    &__images {
+        position: relative;
+        z-index: 1000;
+        max-width: calc(~'100%' - 200px); // subtract the width of the two arrow buttons
+    }
 
-.umb-lightbox__images {
-    position: relative;
-    z-index: 1000;
-    max-width: calc(~'100%' - 200px); // subtract the width of the two arrow buttons
-}
+    &__image {
+        background: @white;
+        border-radius: 3px;
+        padding: 10px;
+    }
 
-.umb-lightbox__image {
-    background: @white;
-    border-radius: 3px;
-    padding: 10px;
-}
+    &__control {
+        background-color: @white;
+        width: 50px;
+        height: 50px;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        position: absolute;
 
-.umb-lightbox__control {
-    background-color: @white;
-    width: 50px;
-    height: 50px;
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    position: absolute;
-    &:hover {
-        .umb-lightbox__control-icon, &::before {
-            color: @ui-active-type-hover;
+        &:hover {
+            .umb-lightbox__control-icon, &::before {
+                color: @ui-active-type-hover;
+            }
         }
     }
+
+    &__control-icon {
+        color: @ui-active-type;
+        font-size: 20px;
+    }
+}
+
+.umb-drawer-is-visible .umb-lightbox {
+    width: calc(~'100%' - ~'@{drawerWidth}');
+    left: @drawerWidth;
 }
 
 .umb-lightbox__control.-next {
@@ -94,9 +100,3 @@
         margin-left: -4px;
     }
 }
-
-.umb-lightbox__control-icon {
-    color: @ui-active-type;
-    font-size: 20px;
-
-}

src/Umbraco.Web.UI.Client/src/less/components/umb-package-local-install.less

@@ -22,20 +22,21 @@
     align-items: center;
     margin-bottom: 30px;
     transition: 100ms box-shadow ease, 100ms border ease;
-    
+
     &.drag-over {
         border-color: @ui-action-border-hover;
         border-style: solid;
         box-shadow: 0 3px 8px rgba(0,0,0, .1);
         transition: 100ms box-shadow ease, 100ms border ease;
     }
-}
 
-.umb-upload-local__dropzone i {
-    display: block;
-    color: @ui-action-type;
-    font-size: 110px;
-    line-height: 1;
+    .umb-icon {
+        display: block;
+        color: @ui-action-type;
+        font-size: 6.75rem;
+        line-height: 1;
+        margin: 0 auto;
+    }
 }
 
 .umb-upload-local__select-file {

src/Umbraco.Web.UI.Client/src/less/components/umb-packages.less

@@ -136,35 +136,40 @@
     justify-content: center;
     opacity: .6;
     margin-top: 10px;
-}
 
-.umb-package-numbers small {
-    padding: 0 5px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
+    small {
+        padding: 0 5px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
 
-.umb-package-numbers i {
-    font-size: 14px;
+    .umb-icon {
+        font-size: 0.9rem;
+    }
 }
 
-.umb-package-link:hover .umb-package-numbers {
-    opacity: 1;
-}
+.umb-package-link {
+    &:hover {
+        .umb-package-numbers {
+            opacity: 1;
 
-.umb-package-link:hover .umb-package-numbers .icon-hearts {
-    color: @red !important;
-}
+            .icon-hearts {
+                color: @red !important;
+            }
+        }
+    }
 
-.umb-package-link .umb-package-cloud {
-    margin-top: 8px;
-    font-size: 11px;
-    height: 11px; // ensures vertical space is taken up even if "works on cloud" isn't visible
-}
+    .umb-package-cloud {
+        margin-top: 0.5rem;
+        font-size: 0.75rem;
+        min-height: 1rem; // ensures vertical space is taken up even if "works on cloud" isn't visible
 
-.umb-package-link .umb-package-cloud .icon-cloud {
-    color: #2eadaf !important;
+        .umb-icon {
+            color: @turquoise !important;
+            font-size: 0.9rem;
+        }
+    }
 }
 
 // Version
@@ -182,7 +187,7 @@
 
 .umb-packages-categories {
     display: flex;
-    user-select: center;
+    user-select: none;
     flex-wrap: wrap;
 }
 

src/Umbraco.Web.UI.Client/src/less/components/umb-panel-group.less

@@ -75,7 +75,7 @@
     flex: 0 0 50px;
     display: flex;
     justify-content: center;
-    padding: 0 20px;
+    padding: 0.25rem 20px;
 }
 
 .umb-panel-group__details-status-content {

src/Umbraco.Web.UI.Client/src/less/components/umb-search-filter.less

@@ -20,7 +20,7 @@ html .umb-search-filter {
 
     // "icon-search" class it kept for backward compatibility
     .umb-icon, 
-    .icon-search {
+    i.icon-search {
         color: @gray-8;
         position: absolute;
         top: 0;

src/Umbraco.Web.UI.Client/src/less/dashboards/healthcheck.less

@@ -75,27 +75,20 @@
 	font-size: 13px;
 }
 
-.umb-healthcheck-message i {
+.umb-healthcheck-message .umb-icon {
 	font-size: 15px;
 	margin-right: 3px;
 }
 
 .umb-healthcheck-details-link {
-	color: @turquoise-d1;
-}
+    color: @turquoise-d1;
 
-.umb-healthcheck-details-link:hover {
-	text-decoration: none;
-	color: @turquoise-d1;
+    &:hover {
+        color: @turquoise-d1;
+        text-decoration: none;
+    }
 }
 
-
-/* Helpers */
-.align-self-center {
-	align-self: center;
-}
-
-
 /* Spacing for boxes */
 .umb-air {
 	flex: 0 0 auto;
@@ -127,7 +120,6 @@
 }
 
 .umb-healthcheck-status-icon {
-	font-size: 20px;
 	margin-top: 2px;
 }