fix: update styling for icons in toolbar buttons

This is necessary for compatibility issues with flow integration.

Author: paodb

theme/lumo/vcf-pdf-viewer-styles.js

@@ -70,15 +70,14 @@ registerStyles(
         text-overflow: ellipsis;
       }
 
-      ::slotted(.toolbar-button){
+      ::slotted(.toolbar-button) {
         height: var(--lumo-size-m);
         border-radius: var(--lumo-border-radius, var(--lumo-border-radius-m));
         color: var(--lumo-contrast-80pct);
         transition: background-color 100ms, color 100ms;
         margin: var(--lumo-space-xs);
         background: transparent;
         border: none;
-        padding-top: 0.3em;
       }
 
       ::slotted(.toolbar-button[disabled]) {
@@ -100,11 +99,6 @@ registerStyles(
         box-shadow: 0 0 0 2px var(--lumo-primary-color-50pct);
       }
 
-      ::slotted(.toolbar-button) {
-        font-family: 'lumo-icons';
-        font-size: var(--lumo-icon-size-m);
-      }
-
       .page {
         padding: var(--lumo-space-m);
         padding-bottom: 0;

theme/lumo/vcf-pdf-viewer-toolbar-icons-styles.js

@@ -7,6 +7,12 @@ import '@vaadin/vaadin-lumo-styles/font-icons.js';
 registerStyles(
     'vaadin-icon',
     css`
+      :host::before {
+        font-size: var(--lumo-icon-size-m);
+        font-family: 'lumo-icons';
+        line-height: 1;        
+      }
+
       :host(.previous-page-button-icon)::before {
         content: var(--pdf-viewer-previous-page-button-icon, var(--lumo-icons-angle-up));
       }