npm - @watermarkinsights/ripple - Versions diffs - 5.10.0-3 → 5.10.0-4 - Mend

@watermarkinsights/ripple 5.10.0-3 → 5.10.0-4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (253) hide show

package/dist/collection/components/selects/priv-option-list/priv-option-list.css CHANGED Viewed

@@ -31,12 +31,18 @@
    -------------------------------------- */
 .svg-icon {
   display: inline-block;
+  width: var(--icon-size, 14px);
+  height: var(--icon-size, 14px);
+  vertical-align: bottom;
 }
 .svg-icon:before {
   content: "";
+  display: inline-block;
   background-color: var(--icon-fill, currentColor);
-  width: var(--icon-size, 14px);
-  height: var(--icon-size, 14px);
+  width: 100%;
+  height: 100%;
+  -webkit-mask-size: 100%;
+  mask-size: 100%;
 }
 .svg-icon.horizontal {
   transform: scaleX(-1);
@@ -47,16 +53,10 @@
 .svg-icon.svg-pencil:before {
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z'/%3E%3C/svg%3E%0A");
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z'/%3E%3C/svg%3E%0A");
-  -webkit-mask-size: 100%;
-  mask-size: 100%;
-  display: block;
 }
 .svg-icon.svg-rotate-right:before {
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M16.89,15.5L18.31,16.89C19.21,15.73 19.76,14.39 19.93,13H17.91C17.77,13.87 17.43,14.72 16.89,15.5M13,17.9V19.92C14.39,19.75 15.74,19.21 16.9,18.31L15.46,16.87C14.71,17.41 13.87,17.76 13,17.9M19.93,11C19.76,9.61 19.21,8.27 18.31,7.11L16.89,8.53C17.43,9.28 17.77,10.13 17.91,11M15.55,5.55L11,1V4.07C7.06,4.56 4,7.92 4,12C4,16.08 7.05,19.44 11,19.93V17.91C8.16,17.43 6,14.97 6,12C6,9.03 8.16,6.57 11,6.09V10L15.55,5.55Z'/%3E%3C/svg%3E%0A");
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M16.89,15.5L18.31,16.89C19.21,15.73 19.76,14.39 19.93,13H17.91C17.77,13.87 17.43,14.72 16.89,15.5M13,17.9V19.92C14.39,19.75 15.74,19.21 16.9,18.31L15.46,16.87C14.71,17.41 13.87,17.76 13,17.9M19.93,11C19.76,9.61 19.21,8.27 18.31,7.11L16.89,8.53C17.43,9.28 17.77,10.13 17.91,11M15.55,5.55L11,1V4.07C7.06,4.56 4,7.92 4,12C4,16.08 7.05,19.44 11,19.93V17.91C8.16,17.43 6,14.97 6,12C6,9.03 8.16,6.57 11,6.09V10L15.55,5.55Z'/%3E%3C/svg%3E%0A");
-  -webkit-mask-size: 100%;
-  mask-size: 100%;
-  display: block;
 }
 .search {
@@ -94,7 +94,7 @@
   font: normal normal normal 24px/1 "Material Design Icons";
   font-size: inherit;
   text-rendering: auto;
-  line-height: inherit;
+  line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   content: "\f349";
@@ -167,7 +167,7 @@
   font: normal normal normal 24px/1 "Material Design Icons";
   font-size: inherit;
   text-rendering: auto;
-  line-height: inherit;
+  line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   content: "\f141";

package/dist/collection/components/selects/wm-nested-select/wm-nested-select.css CHANGED Viewed

@@ -31,12 +31,18 @@
    -------------------------------------- */
 .svg-icon {
   display: inline-block;
+  width: var(--icon-size, 14px);
+  height: var(--icon-size, 14px);
+  vertical-align: bottom;
 }
 .svg-icon:before {
   content: "";
+  display: inline-block;
   background-color: var(--icon-fill, currentColor);
-  width: var(--icon-size, 14px);
-  height: var(--icon-size, 14px);
+  width: 100%;
+  height: 100%;
+  -webkit-mask-size: 100%;
+  mask-size: 100%;
 }
 .svg-icon.horizontal {
   transform: scaleX(-1);
@@ -47,16 +53,10 @@
 .svg-icon.svg-pencil:before {
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z'/%3E%3C/svg%3E%0A");
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z'/%3E%3C/svg%3E%0A");
-  -webkit-mask-size: 100%;
-  mask-size: 100%;
-  display: block;
 }
 .svg-icon.svg-rotate-right:before {
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M16.89,15.5L18.31,16.89C19.21,15.73 19.76,14.39 19.93,13H17.91C17.77,13.87 17.43,14.72 16.89,15.5M13,17.9V19.92C14.39,19.75 15.74,19.21 16.9,18.31L15.46,16.87C14.71,17.41 13.87,17.76 13,17.9M19.93,11C19.76,9.61 19.21,8.27 18.31,7.11L16.89,8.53C17.43,9.28 17.77,10.13 17.91,11M15.55,5.55L11,1V4.07C7.06,4.56 4,7.92 4,12C4,16.08 7.05,19.44 11,19.93V17.91C8.16,17.43 6,14.97 6,12C6,9.03 8.16,6.57 11,6.09V10L15.55,5.55Z'/%3E%3C/svg%3E%0A");
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M16.89,15.5L18.31,16.89C19.21,15.73 19.76,14.39 19.93,13H17.91C17.77,13.87 17.43,14.72 16.89,15.5M13,17.9V19.92C14.39,19.75 15.74,19.21 16.9,18.31L15.46,16.87C14.71,17.41 13.87,17.76 13,17.9M19.93,11C19.76,9.61 19.21,8.27 18.31,7.11L16.89,8.53C17.43,9.28 17.77,10.13 17.91,11M15.55,5.55L11,1V4.07C7.06,4.56 4,7.92 4,12C4,16.08 7.05,19.44 11,19.93V17.91C8.16,17.43 6,14.97 6,12C6,9.03 8.16,6.57 11,6.09V10L15.55,5.55Z'/%3E%3C/svg%3E%0A");
-  -webkit-mask-size: 100%;
-  mask-size: 100%;
-  display: block;
 }
 :host {
@@ -135,7 +135,7 @@
   font: normal normal normal 24px/1 "Material Design Icons";
   font-size: inherit;
   text-rendering: auto;
-  line-height: inherit;
+  line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   content: "\f026";
@@ -193,7 +193,7 @@
   font: normal normal normal 24px/1 "Material Design Icons";
   font-size: inherit;
   text-rendering: auto;
-  line-height: inherit;
+  line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   content: "\f140";
@@ -375,7 +375,7 @@
   font: normal normal normal 24px/1 "Material Design Icons";
   font-size: inherit;
   text-rendering: auto;
-  line-height: inherit;
+  line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   content: "\f156";
@@ -397,7 +397,7 @@
   font: normal normal normal 24px/1 "Material Design Icons";
   font-size: inherit;
   text-rendering: auto;
-  line-height: inherit;
+  line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   content: "\f142";

package/dist/collection/components/selects/wm-optgroup/wm-optgroup.css CHANGED Viewed

@@ -31,12 +31,18 @@
    -------------------------------------- */
 .svg-icon {
   display: inline-block;
+  width: var(--icon-size, 14px);
+  height: var(--icon-size, 14px);
+  vertical-align: bottom;
 }
 .svg-icon:before {
   content: "";
+  display: inline-block;
   background-color: var(--icon-fill, currentColor);
-  width: var(--icon-size, 14px);
-  height: var(--icon-size, 14px);
+  width: 100%;
+  height: 100%;
+  -webkit-mask-size: 100%;
+  mask-size: 100%;
 }
 .svg-icon.horizontal {
   transform: scaleX(-1);
@@ -47,16 +53,10 @@
 .svg-icon.svg-pencil:before {
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z'/%3E%3C/svg%3E%0A");
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z'/%3E%3C/svg%3E%0A");
-  -webkit-mask-size: 100%;
-  mask-size: 100%;
-  display: block;
 }
 .svg-icon.svg-rotate-right:before {
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M16.89,15.5L18.31,16.89C19.21,15.73 19.76,14.39 19.93,13H17.91C17.77,13.87 17.43,14.72 16.89,15.5M13,17.9V19.92C14.39,19.75 15.74,19.21 16.9,18.31L15.46,16.87C14.71,17.41 13.87,17.76 13,17.9M19.93,11C19.76,9.61 19.21,8.27 18.31,7.11L16.89,8.53C17.43,9.28 17.77,10.13 17.91,11M15.55,5.55L11,1V4.07C7.06,4.56 4,7.92 4,12C4,16.08 7.05,19.44 11,19.93V17.91C8.16,17.43 6,14.97 6,12C6,9.03 8.16,6.57 11,6.09V10L15.55,5.55Z'/%3E%3C/svg%3E%0A");
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M16.89,15.5L18.31,16.89C19.21,15.73 19.76,14.39 19.93,13H17.91C17.77,13.87 17.43,14.72 16.89,15.5M13,17.9V19.92C14.39,19.75 15.74,19.21 16.9,18.31L15.46,16.87C14.71,17.41 13.87,17.76 13,17.9M19.93,11C19.76,9.61 19.21,8.27 18.31,7.11L16.89,8.53C17.43,9.28 17.77,10.13 17.91,11M15.55,5.55L11,1V4.07C7.06,4.56 4,7.92 4,12C4,16.08 7.05,19.44 11,19.93V17.91C8.16,17.43 6,14.97 6,12C6,9.03 8.16,6.57 11,6.09V10L15.55,5.55Z'/%3E%3C/svg%3E%0A");
-  -webkit-mask-size: 100%;
-  mask-size: 100%;
-  display: block;
 }
 :host {

package/dist/collection/components/selects/wm-option/wm-option.css CHANGED Viewed

@@ -31,12 +31,18 @@
    -------------------------------------- */
 .svg-icon {
   display: inline-block;
+  width: var(--icon-size, 14px);
+  height: var(--icon-size, 14px);
+  vertical-align: bottom;
 }
 .svg-icon:before {
   content: "";
+  display: inline-block;
   background-color: var(--icon-fill, currentColor);
-  width: var(--icon-size, 14px);
-  height: var(--icon-size, 14px);
+  width: 100%;
+  height: 100%;
+  -webkit-mask-size: 100%;
+  mask-size: 100%;
 }
 .svg-icon.horizontal {
   transform: scaleX(-1);
@@ -47,16 +53,10 @@
 .svg-icon.svg-pencil:before {
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z'/%3E%3C/svg%3E%0A");
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z'/%3E%3C/svg%3E%0A");
-  -webkit-mask-size: 100%;
-  mask-size: 100%;
-  display: block;
 }
 .svg-icon.svg-rotate-right:before {
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M16.89,15.5L18.31,16.89C19.21,15.73 19.76,14.39 19.93,13H17.91C17.77,13.87 17.43,14.72 16.89,15.5M13,17.9V19.92C14.39,19.75 15.74,19.21 16.9,18.31L15.46,16.87C14.71,17.41 13.87,17.76 13,17.9M19.93,11C19.76,9.61 19.21,8.27 18.31,7.11L16.89,8.53C17.43,9.28 17.77,10.13 17.91,11M15.55,5.55L11,1V4.07C7.06,4.56 4,7.92 4,12C4,16.08 7.05,19.44 11,19.93V17.91C8.16,17.43 6,14.97 6,12C6,9.03 8.16,6.57 11,6.09V10L15.55,5.55Z'/%3E%3C/svg%3E%0A");
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M16.89,15.5L18.31,16.89C19.21,15.73 19.76,14.39 19.93,13H17.91C17.77,13.87 17.43,14.72 16.89,15.5M13,17.9V19.92C14.39,19.75 15.74,19.21 16.9,18.31L15.46,16.87C14.71,17.41 13.87,17.76 13,17.9M19.93,11C19.76,9.61 19.21,8.27 18.31,7.11L16.89,8.53C17.43,9.28 17.77,10.13 17.91,11M15.55,5.55L11,1V4.07C7.06,4.56 4,7.92 4,12C4,16.08 7.05,19.44 11,19.93V17.91C8.16,17.43 6,14.97 6,12C6,9.03 8.16,6.57 11,6.09V10L15.55,5.55Z'/%3E%3C/svg%3E%0A");
-  -webkit-mask-size: 100%;
-  mask-size: 100%;
-  display: block;
 }
 :host(:not(:last-child)) {
@@ -100,7 +100,7 @@
   font: normal normal normal 24px/1 "Material Design Icons";
   font-size: inherit;
   text-rendering: auto;
-  line-height: inherit;
+  line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   content: "\f131";
@@ -173,7 +173,7 @@
   font: normal normal normal 24px/1 "Material Design Icons";
   font-size: inherit;
   text-rendering: auto;
-  line-height: inherit;
+  line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   display: inline-block;

package/dist/collection/components/selects/wm-select/wm-select.css CHANGED Viewed

@@ -31,12 +31,18 @@
    -------------------------------------- */
 .svg-icon {
   display: inline-block;
+  width: var(--icon-size, 14px);
+  height: var(--icon-size, 14px);
+  vertical-align: bottom;
 }
 .svg-icon:before {
   content: "";
+  display: inline-block;
   background-color: var(--icon-fill, currentColor);
-  width: var(--icon-size, 14px);
-  height: var(--icon-size, 14px);
+  width: 100%;
+  height: 100%;
+  -webkit-mask-size: 100%;
+  mask-size: 100%;
 }
 .svg-icon.horizontal {
   transform: scaleX(-1);
@@ -47,16 +53,10 @@
 .svg-icon.svg-pencil:before {
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z'/%3E%3C/svg%3E%0A");
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z'/%3E%3C/svg%3E%0A");
-  -webkit-mask-size: 100%;
-  mask-size: 100%;
-  display: block;
 }
 .svg-icon.svg-rotate-right:before {
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M16.89,15.5L18.31,16.89C19.21,15.73 19.76,14.39 19.93,13H17.91C17.77,13.87 17.43,14.72 16.89,15.5M13,17.9V19.92C14.39,19.75 15.74,19.21 16.9,18.31L15.46,16.87C14.71,17.41 13.87,17.76 13,17.9M19.93,11C19.76,9.61 19.21,8.27 18.31,7.11L16.89,8.53C17.43,9.28 17.77,10.13 17.91,11M15.55,5.55L11,1V4.07C7.06,4.56 4,7.92 4,12C4,16.08 7.05,19.44 11,19.93V17.91C8.16,17.43 6,14.97 6,12C6,9.03 8.16,6.57 11,6.09V10L15.55,5.55Z'/%3E%3C/svg%3E%0A");
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M16.89,15.5L18.31,16.89C19.21,15.73 19.76,14.39 19.93,13H17.91C17.77,13.87 17.43,14.72 16.89,15.5M13,17.9V19.92C14.39,19.75 15.74,19.21 16.9,18.31L15.46,16.87C14.71,17.41 13.87,17.76 13,17.9M19.93,11C19.76,9.61 19.21,8.27 18.31,7.11L16.89,8.53C17.43,9.28 17.77,10.13 17.91,11M15.55,5.55L11,1V4.07C7.06,4.56 4,7.92 4,12C4,16.08 7.05,19.44 11,19.93V17.91C8.16,17.43 6,14.97 6,12C6,9.03 8.16,6.57 11,6.09V10L15.55,5.55Z'/%3E%3C/svg%3E%0A");
-  -webkit-mask-size: 100%;
-  mask-size: 100%;
-  display: block;
 }
 :host {
@@ -147,7 +147,7 @@
   font: normal normal normal 24px/1 "Material Design Icons";
   font-size: inherit;
   text-rendering: auto;
-  line-height: inherit;
+  line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   content: "\f026";
@@ -205,7 +205,7 @@
   font: normal normal normal 24px/1 "Material Design Icons";
   font-size: inherit;
   text-rendering: auto;
-  line-height: inherit;
+  line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   content: "\f140";

package/dist/collection/components/wm-action-menu/wm-action-menu.css CHANGED Viewed

@@ -31,12 +31,18 @@
    -------------------------------------- */
 .svg-icon {
   display: inline-block;
+  width: var(--icon-size, 14px);
+  height: var(--icon-size, 14px);
+  vertical-align: bottom;
 }
 .svg-icon:before {
   content: "";
+  display: inline-block;
   background-color: var(--icon-fill, currentColor);
-  width: var(--icon-size, 14px);
-  height: var(--icon-size, 14px);
+  width: 100%;
+  height: 100%;
+  -webkit-mask-size: 100%;
+  mask-size: 100%;
 }
 .svg-icon.horizontal {
   transform: scaleX(-1);
@@ -47,16 +53,10 @@
 .svg-icon.svg-pencil:before {
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z'/%3E%3C/svg%3E%0A");
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z'/%3E%3C/svg%3E%0A");
-  -webkit-mask-size: 100%;
-  mask-size: 100%;
-  display: block;
 }
 .svg-icon.svg-rotate-right:before {
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M16.89,15.5L18.31,16.89C19.21,15.73 19.76,14.39 19.93,13H17.91C17.77,13.87 17.43,14.72 16.89,15.5M13,17.9V19.92C14.39,19.75 15.74,19.21 16.9,18.31L15.46,16.87C14.71,17.41 13.87,17.76 13,17.9M19.93,11C19.76,9.61 19.21,8.27 18.31,7.11L16.89,8.53C17.43,9.28 17.77,10.13 17.91,11M15.55,5.55L11,1V4.07C7.06,4.56 4,7.92 4,12C4,16.08 7.05,19.44 11,19.93V17.91C8.16,17.43 6,14.97 6,12C6,9.03 8.16,6.57 11,6.09V10L15.55,5.55Z'/%3E%3C/svg%3E%0A");
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M16.89,15.5L18.31,16.89C19.21,15.73 19.76,14.39 19.93,13H17.91C17.77,13.87 17.43,14.72 16.89,15.5M13,17.9V19.92C14.39,19.75 15.74,19.21 16.9,18.31L15.46,16.87C14.71,17.41 13.87,17.76 13,17.9M19.93,11C19.76,9.61 19.21,8.27 18.31,7.11L16.89,8.53C17.43,9.28 17.77,10.13 17.91,11M15.55,5.55L11,1V4.07C7.06,4.56 4,7.92 4,12C4,16.08 7.05,19.44 11,19.93V17.91C8.16,17.43 6,14.97 6,12C6,9.03 8.16,6.57 11,6.09V10L15.55,5.55Z'/%3E%3C/svg%3E%0A");
-  -webkit-mask-size: 100%;
-  mask-size: 100%;
-  display: block;
 }
 :host {

package/dist/collection/components/wm-button/wm-button.css CHANGED Viewed

@@ -87,7 +87,7 @@
   font: normal normal normal 24px/1 "Material Design Icons";
   font-size: inherit;
   text-rendering: auto;
-  line-height: inherit;
+  line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -95,6 +95,8 @@
 :host .wm-button:not(.-icononly):not(.-navigational) .svg-icon {
   margin-right: 0.3125rem;
   font-size: 0.875rem;
+  width: var(--icon-size, 14px);
+  height: var(--icon-size, 14px);
 }
 :host .wm-button[dir=RTL] :not(.-icononly) .mdi {
   margin-left: 0.3125rem;
@@ -216,7 +218,7 @@
   font: normal normal normal 24px/1 "Material Design Icons";
   font-size: inherit;
   text-rendering: auto;
-  line-height: inherit;
+  line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -250,7 +252,7 @@
   font: normal normal normal 24px/1 "Material Design Icons";
   font-size: inherit;
   text-rendering: auto;
-  line-height: inherit;
+  line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -326,7 +328,7 @@
   font: normal normal normal 24px/1 "Material Design Icons";
   font-size: inherit;
   text-rendering: auto;
-  line-height: inherit;
+  line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   content: "\f140";
@@ -475,12 +477,18 @@
 .svg-icon {
   display: inline-block;
+  width: var(--icon-size, 14px);
+  height: var(--icon-size, 14px);
+  vertical-align: bottom;
 }
 .svg-icon:before {
   content: "";
+  display: inline-block;
   background-color: var(--icon-fill, currentColor);
-  width: var(--icon-size, 14px);
-  height: var(--icon-size, 14px);
+  width: 100%;
+  height: 100%;
+  -webkit-mask-size: 100%;
+  mask-size: 100%;
 }
 .svg-icon.horizontal {
   transform: scaleX(-1);
@@ -491,16 +499,10 @@
 .svg-icon.svg-pencil:before {
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z'/%3E%3C/svg%3E%0A");
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z'/%3E%3C/svg%3E%0A");
-  -webkit-mask-size: 100%;
-  mask-size: 100%;
-  display: block;
 }
 .svg-icon.svg-rotate-right:before {
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M16.89,15.5L18.31,16.89C19.21,15.73 19.76,14.39 19.93,13H17.91C17.77,13.87 17.43,14.72 16.89,15.5M13,17.9V19.92C14.39,19.75 15.74,19.21 16.9,18.31L15.46,16.87C14.71,17.41 13.87,17.76 13,17.9M19.93,11C19.76,9.61 19.21,8.27 18.31,7.11L16.89,8.53C17.43,9.28 17.77,10.13 17.91,11M15.55,5.55L11,1V4.07C7.06,4.56 4,7.92 4,12C4,16.08 7.05,19.44 11,19.93V17.91C8.16,17.43 6,14.97 6,12C6,9.03 8.16,6.57 11,6.09V10L15.55,5.55Z'/%3E%3C/svg%3E%0A");
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M16.89,15.5L18.31,16.89C19.21,15.73 19.76,14.39 19.93,13H17.91C17.77,13.87 17.43,14.72 16.89,15.5M13,17.9V19.92C14.39,19.75 15.74,19.21 16.9,18.31L15.46,16.87C14.71,17.41 13.87,17.76 13,17.9M19.93,11C19.76,9.61 19.21,8.27 18.31,7.11L16.89,8.53C17.43,9.28 17.77,10.13 17.91,11M15.55,5.55L11,1V4.07C7.06,4.56 4,7.92 4,12C4,16.08 7.05,19.44 11,19.93V17.91C8.16,17.43 6,14.97 6,12C6,9.03 8.16,6.57 11,6.09V10L15.55,5.55Z'/%3E%3C/svg%3E%0A");
-  -webkit-mask-size: 100%;
-  mask-size: 100%;
-  display: block;
 }
 :host([disabled]),

package/dist/collection/components/wm-button/wm-button.js CHANGED Viewed

@@ -41,13 +41,6 @@ export class Button {
         classes += this.customBackground === "dark" ? " dark" : "";
         return classes;
     }
-    get iconStyles() {
-        let transformStyle = "";
-        transformStyle += this.iconRotate ? `rotate(${this.iconRotate}deg)` : "";
-        transformStyle += this.iconFlip === "horizontal" ? `scaleX(-1)` : "";
-        transformStyle += this.iconFlip === "vertical" ? `scaleY(-1)` : "";
-        return Object.assign(Object.assign({}, (this.iconSize && { fontSize: this.iconSize, "--icon-size": this.iconSize })), ((this.iconRotate || this.iconFlip) && { transform: transformStyle }));
-    }
     toggleTabbingOn() {
         this.isTabbing = true;
     }
@@ -166,18 +159,27 @@ export class Button {
         }
     }
     renderIcon() {
+        const defaultIconSize = this.buttonType == "navigational" || this.buttonType == "icononly" ? "18px" : "14px";
+        let transformStyle = "";
+        transformStyle += this.iconRotate ? `rotate(${this.iconRotate}deg)` : "";
+        transformStyle += this.iconFlip === "horizontal" ? `scaleX(-1)` : "";
+        transformStyle += this.iconFlip === "vertical" ? `scaleY(-1)` : "";
+        const iconStyles = Object.assign({
+            fontSize: this.iconSize ? this.iconSize : defaultIconSize,
+            "--icon-size": this.iconSize ? this.iconSize : defaultIconSize,
+        }, ((this.iconRotate || this.iconFlip) && { transform: transformStyle }));
         if (this.icon.match(/^#/)) {
             // Icon ID
-            return h("span", { class: `svg-icon svg-${this.icon.slice(1)}`, style: this.iconStyles });
+            return h("span", { class: `svg-icon svg-${this.icon.slice(1)}`, style: iconStyles });
         }
         else if (this.icon.match(/^\/\S*[#]\S*/)) {
             // starts with /, any number of non-whitespace characters, followed by #, followed by any non-whitespace characters
             // Relative Path & Symbol
-            return (h("svg", { xmlns: "http://www.w3.org/2000/svg", class: "svg-icon", width: this.iconSize ? this.iconSize : "14px", height: this.iconSize ? this.iconSize : "14px", style: Object.assign(Object.assign({}, this.iconStyles), { "--icon-fill": "currentColor" }) }, h("use", { href: this.icon })));
+            return (h("svg", { xmlns: "http://www.w3.org/2000/svg", class: "svg-icon", width: this.iconSize ? this.iconSize : defaultIconSize, height: this.iconSize ? this.iconSize : defaultIconSize, style: Object.assign(Object.assign({}, iconStyles), { "--icon-fill": "currentColor" }) }, h("use", { href: this.icon })));
         }
         else {
             // MDI
-            return (h("span", { class: "mdi", style: this.iconStyles, "aria-hidden": "true" }, String.fromCodePoint(parseInt(`0x${this.icon}`))));
+            return (h("span", { class: "mdi", style: iconStyles, "aria-hidden": "true" }, String.fromCodePoint(parseInt(`0x${this.icon}`))));
         }
     }
     render() {

package/dist/collection/components/wm-file/wm-file.css CHANGED Viewed

@@ -31,12 +31,18 @@
    -------------------------------------- */
 .svg-icon {
   display: inline-block;
+  width: var(--icon-size, 14px);
+  height: var(--icon-size, 14px);
+  vertical-align: bottom;
 }
 .svg-icon:before {
   content: "";
+  display: inline-block;
   background-color: var(--icon-fill, currentColor);
-  width: var(--icon-size, 14px);
-  height: var(--icon-size, 14px);
+  width: 100%;
+  height: 100%;
+  -webkit-mask-size: 100%;
+  mask-size: 100%;
 }
 .svg-icon.horizontal {
   transform: scaleX(-1);
@@ -47,16 +53,10 @@
 .svg-icon.svg-pencil:before {
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z'/%3E%3C/svg%3E%0A");
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z'/%3E%3C/svg%3E%0A");
-  -webkit-mask-size: 100%;
-  mask-size: 100%;
-  display: block;
 }
 .svg-icon.svg-rotate-right:before {
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M16.89,15.5L18.31,16.89C19.21,15.73 19.76,14.39 19.93,13H17.91C17.77,13.87 17.43,14.72 16.89,15.5M13,17.9V19.92C14.39,19.75 15.74,19.21 16.9,18.31L15.46,16.87C14.71,17.41 13.87,17.76 13,17.9M19.93,11C19.76,9.61 19.21,8.27 18.31,7.11L16.89,8.53C17.43,9.28 17.77,10.13 17.91,11M15.55,5.55L11,1V4.07C7.06,4.56 4,7.92 4,12C4,16.08 7.05,19.44 11,19.93V17.91C8.16,17.43 6,14.97 6,12C6,9.03 8.16,6.57 11,6.09V10L15.55,5.55Z'/%3E%3C/svg%3E%0A");
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M16.89,15.5L18.31,16.89C19.21,15.73 19.76,14.39 19.93,13H17.91C17.77,13.87 17.43,14.72 16.89,15.5M13,17.9V19.92C14.39,19.75 15.74,19.21 16.9,18.31L15.46,16.87C14.71,17.41 13.87,17.76 13,17.9M19.93,11C19.76,9.61 19.21,8.27 18.31,7.11L16.89,8.53C17.43,9.28 17.77,10.13 17.91,11M15.55,5.55L11,1V4.07C7.06,4.56 4,7.92 4,12C4,16.08 7.05,19.44 11,19.93V17.91C8.16,17.43 6,14.97 6,12C6,9.03 8.16,6.57 11,6.09V10L15.55,5.55Z'/%3E%3C/svg%3E%0A");
-  -webkit-mask-size: 100%;
-  mask-size: 100%;
-  display: block;
 }
 :host {
@@ -137,7 +137,7 @@
   font: normal normal normal 24px/1 "Material Design Icons";
   font-size: inherit;
   text-rendering: auto;
-  line-height: inherit;
+  line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   content: "\f133";

package/dist/collection/components/wm-file-list/wm-file-list.css CHANGED Viewed

@@ -31,12 +31,18 @@
    -------------------------------------- */
 .svg-icon {
   display: inline-block;
+  width: var(--icon-size, 14px);
+  height: var(--icon-size, 14px);
+  vertical-align: bottom;
 }
 .svg-icon:before {
   content: "";
+  display: inline-block;
   background-color: var(--icon-fill, currentColor);
-  width: var(--icon-size, 14px);
-  height: var(--icon-size, 14px);
+  width: 100%;
+  height: 100%;
+  -webkit-mask-size: 100%;
+  mask-size: 100%;
 }
 .svg-icon.horizontal {
   transform: scaleX(-1);
@@ -47,16 +53,10 @@
 .svg-icon.svg-pencil:before {
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z'/%3E%3C/svg%3E%0A");
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z'/%3E%3C/svg%3E%0A");
-  -webkit-mask-size: 100%;
-  mask-size: 100%;
-  display: block;
 }
 .svg-icon.svg-rotate-right:before {
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M16.89,15.5L18.31,16.89C19.21,15.73 19.76,14.39 19.93,13H17.91C17.77,13.87 17.43,14.72 16.89,15.5M13,17.9V19.92C14.39,19.75 15.74,19.21 16.9,18.31L15.46,16.87C14.71,17.41 13.87,17.76 13,17.9M19.93,11C19.76,9.61 19.21,8.27 18.31,7.11L16.89,8.53C17.43,9.28 17.77,10.13 17.91,11M15.55,5.55L11,1V4.07C7.06,4.56 4,7.92 4,12C4,16.08 7.05,19.44 11,19.93V17.91C8.16,17.43 6,14.97 6,12C6,9.03 8.16,6.57 11,6.09V10L15.55,5.55Z'/%3E%3C/svg%3E%0A");
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M16.89,15.5L18.31,16.89C19.21,15.73 19.76,14.39 19.93,13H17.91C17.77,13.87 17.43,14.72 16.89,15.5M13,17.9V19.92C14.39,19.75 15.74,19.21 16.9,18.31L15.46,16.87C14.71,17.41 13.87,17.76 13,17.9M19.93,11C19.76,9.61 19.21,8.27 18.31,7.11L16.89,8.53C17.43,9.28 17.77,10.13 17.91,11M15.55,5.55L11,1V4.07C7.06,4.56 4,7.92 4,12C4,16.08 7.05,19.44 11,19.93V17.91C8.16,17.43 6,14.97 6,12C6,9.03 8.16,6.57 11,6.09V10L15.55,5.55Z'/%3E%3C/svg%3E%0A");
-  -webkit-mask-size: 100%;
-  mask-size: 100%;
-  display: block;
 }
 :host {

package/dist/collection/components/wm-input/wm-input.css CHANGED Viewed

@@ -31,12 +31,18 @@
    -------------------------------------- */
 .svg-icon {
   display: inline-block;
+  width: var(--icon-size, 14px);
+  height: var(--icon-size, 14px);
+  vertical-align: bottom;
 }
 .svg-icon:before {
   content: "";
+  display: inline-block;
   background-color: var(--icon-fill, currentColor);
-  width: var(--icon-size, 14px);
-  height: var(--icon-size, 14px);
+  width: 100%;
+  height: 100%;
+  -webkit-mask-size: 100%;
+  mask-size: 100%;
 }
 .svg-icon.horizontal {
   transform: scaleX(-1);
@@ -47,16 +53,10 @@
 .svg-icon.svg-pencil:before {
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z'/%3E%3C/svg%3E%0A");
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z'/%3E%3C/svg%3E%0A");
-  -webkit-mask-size: 100%;
-  mask-size: 100%;
-  display: block;
 }
 .svg-icon.svg-rotate-right:before {
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M16.89,15.5L18.31,16.89C19.21,15.73 19.76,14.39 19.93,13H17.91C17.77,13.87 17.43,14.72 16.89,15.5M13,17.9V19.92C14.39,19.75 15.74,19.21 16.9,18.31L15.46,16.87C14.71,17.41 13.87,17.76 13,17.9M19.93,11C19.76,9.61 19.21,8.27 18.31,7.11L16.89,8.53C17.43,9.28 17.77,10.13 17.91,11M15.55,5.55L11,1V4.07C7.06,4.56 4,7.92 4,12C4,16.08 7.05,19.44 11,19.93V17.91C8.16,17.43 6,14.97 6,12C6,9.03 8.16,6.57 11,6.09V10L15.55,5.55Z'/%3E%3C/svg%3E%0A");
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M16.89,15.5L18.31,16.89C19.21,15.73 19.76,14.39 19.93,13H17.91C17.77,13.87 17.43,14.72 16.89,15.5M13,17.9V19.92C14.39,19.75 15.74,19.21 16.9,18.31L15.46,16.87C14.71,17.41 13.87,17.76 13,17.9M19.93,11C19.76,9.61 19.21,8.27 18.31,7.11L16.89,8.53C17.43,9.28 17.77,10.13 17.91,11M15.55,5.55L11,1V4.07C7.06,4.56 4,7.92 4,12C4,16.08 7.05,19.44 11,19.93V17.91C8.16,17.43 6,14.97 6,12C6,9.03 8.16,6.57 11,6.09V10L15.55,5.55Z'/%3E%3C/svg%3E%0A");
-  -webkit-mask-size: 100%;
-  mask-size: 100%;
-  display: block;
 }
 :host {
@@ -118,7 +118,7 @@
   font: normal normal normal 24px/1 "Material Design Icons";
   font-size: inherit;
   text-rendering: auto;
-  line-height: inherit;
+  line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   content: "\f026";

package/dist/collection/components/wm-menuitem/wm-menuitem.css CHANGED Viewed

@@ -31,12 +31,18 @@
    -------------------------------------- */
 .svg-icon {
   display: inline-block;
+  width: var(--icon-size, 14px);
+  height: var(--icon-size, 14px);
+  vertical-align: bottom;
 }
 .svg-icon:before {
   content: "";
+  display: inline-block;
   background-color: var(--icon-fill, currentColor);
-  width: var(--icon-size, 14px);
-  height: var(--icon-size, 14px);
+  width: 100%;
+  height: 100%;
+  -webkit-mask-size: 100%;
+  mask-size: 100%;
 }
 .svg-icon.horizontal {
   transform: scaleX(-1);
@@ -47,16 +53,10 @@
 .svg-icon.svg-pencil:before {
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z'/%3E%3C/svg%3E%0A");
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z'/%3E%3C/svg%3E%0A");
-  -webkit-mask-size: 100%;
-  mask-size: 100%;
-  display: block;
 }
 .svg-icon.svg-rotate-right:before {
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M16.89,15.5L18.31,16.89C19.21,15.73 19.76,14.39 19.93,13H17.91C17.77,13.87 17.43,14.72 16.89,15.5M13,17.9V19.92C14.39,19.75 15.74,19.21 16.9,18.31L15.46,16.87C14.71,17.41 13.87,17.76 13,17.9M19.93,11C19.76,9.61 19.21,8.27 18.31,7.11L16.89,8.53C17.43,9.28 17.77,10.13 17.91,11M15.55,5.55L11,1V4.07C7.06,4.56 4,7.92 4,12C4,16.08 7.05,19.44 11,19.93V17.91C8.16,17.43 6,14.97 6,12C6,9.03 8.16,6.57 11,6.09V10L15.55,5.55Z'/%3E%3C/svg%3E%0A");
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M16.89,15.5L18.31,16.89C19.21,15.73 19.76,14.39 19.93,13H17.91C17.77,13.87 17.43,14.72 16.89,15.5M13,17.9V19.92C14.39,19.75 15.74,19.21 16.9,18.31L15.46,16.87C14.71,17.41 13.87,17.76 13,17.9M19.93,11C19.76,9.61 19.21,8.27 18.31,7.11L16.89,8.53C17.43,9.28 17.77,10.13 17.91,11M15.55,5.55L11,1V4.07C7.06,4.56 4,7.92 4,12C4,16.08 7.05,19.44 11,19.93V17.91C8.16,17.43 6,14.97 6,12C6,9.03 8.16,6.57 11,6.09V10L15.55,5.55Z'/%3E%3C/svg%3E%0A");
-  -webkit-mask-size: 100%;
-  mask-size: 100%;
-  display: block;
 }
 :host {
@@ -112,7 +112,7 @@
   font: normal normal normal 24px/1 "Material Design Icons";
   font-size: inherit;
   text-rendering: auto;
-  line-height: inherit;
+  line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   font-size: 1.12rem;