fix: use iron-icon specific styles for vaadin-icon (#2117)

Author: tomivirkki

packages/vaadin-app-layout/README.md

@@ -20,13 +20,13 @@
   <vaadin-tabs orientation="vertical" slot="drawer">
     <vaadin-tab>
       <a href="/profile">
-        <iron-icon icon="lumo:user"></iron-icon>
+        <vaadin-icon icon="lumo:user"></vaadin-icon>
         Profile
       </a>
     </vaadin-tab>
     <vaadin-tab>
       <a href="/contact">
-        <iron-icon icon="lumo:phone"></iron-icon>
+        <vaadin-icon icon="lumo:phone"></vaadin-icon>
         Contact
       </a>
     </vaadin-tab>

packages/vaadin-button/package.json

@@ -34,7 +34,7 @@
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.1.5",
-    "@polymer/iron-icon": "^3.0.0",
+    "@vaadin/vaadin-icon": "^21.0.0-alpha6",
     "@vaadin/testing-helpers": "^0.2.1",
     "sinon": "^9.2.4"
   },

packages/vaadin-button/test/visual/lumo/button.test.js

@@ -1,7 +1,7 @@
 import { fixtureSync } from '@vaadin/testing-helpers/dist/fixture.js';
 import { visualDiff } from '@web/test-runner-visual-regression';
-import '@polymer/iron-icon/iron-icon.js';
-import '@vaadin/vaadin-lumo-styles/icons.js';
+import '@vaadin/vaadin-icon/theme/lumo/vaadin-icon.js';
+import '@vaadin/vaadin-lumo-styles/vaadin-iconset.js';
 import '../../../theme/lumo/vaadin-button.js';
 
 describe('button', () => {
@@ -118,7 +118,7 @@ describe('button', () => {
       let icon;
 
       beforeEach(() => {
-        icon = document.createElement('iron-icon');
+        icon = document.createElement('vaadin-icon');
         icon.setAttribute('icon', 'lumo:edit');
         icon.setAttribute('slot', 'prefix');
         element.appendChild(icon);
@@ -143,7 +143,7 @@ describe('button', () => {
       let icon;
 
       beforeEach(() => {
-        icon = document.createElement('iron-icon');
+        icon = document.createElement('vaadin-icon');
         icon.setAttribute('icon', 'lumo:arrow-right');
         icon.setAttribute('slot', 'suffix');
         element.appendChild(icon);
@@ -169,7 +169,7 @@ describe('button', () => {
 
       beforeEach(() => {
         element.textContent = '';
-        icon = document.createElement('iron-icon');
+        icon = document.createElement('vaadin-icon');
         icon.setAttribute('icon', 'lumo:plus');
         icon.setAttribute('slot', 'prefix');
         element.appendChild(icon);

packages/vaadin-button/test/visual/material/button.test.js

@@ -1,7 +1,7 @@
 import { fixtureSync } from '@vaadin/testing-helpers/dist/fixture.js';
 import { visualDiff } from '@web/test-runner-visual-regression';
-import '@polymer/iron-icon/iron-icon.js';
-import '@vaadin/vaadin-lumo-styles/icons.js';
+import '@vaadin/vaadin-icon/theme/material/vaadin-icon.js';
+import '@vaadin/vaadin-lumo-styles/vaadin-iconset.js';
 import '../../../theme/material/vaadin-button.js';
 
 describe('button', () => {
@@ -49,7 +49,7 @@ describe('button', () => {
     let icon;
 
     beforeEach(() => {
-      icon = document.createElement('iron-icon');
+      icon = document.createElement('vaadin-icon');
       icon.setAttribute('icon', 'lumo:plus');
     });
 

packages/vaadin-button/theme/lumo/vaadin-button-styles.js

@@ -233,13 +233,15 @@ registerStyles(
 
     /* Icons */
 
+    [part] ::slotted(vaadin-icon),
     [part] ::slotted(iron-icon) {
       display: inline-block;
       width: var(--lumo-icon-size-m);
       height: var(--lumo-icon-size-m);
     }
 
     /* Vaadin icons are based on a 16x16 grid (unlike Lumo and Material icons with 24x24), so they look too big by default */
+    [part] ::slotted(vaadin-icon[icon^='vaadin:']),
     [part] ::slotted(iron-icon[icon^='vaadin:']) {
       padding: 0.25em;
       box-sizing: border-box !important;

packages/vaadin-button/theme/material/vaadin-button-styles.js

@@ -124,17 +124,20 @@ registerStyles(
 
     /* Icon alignment */
 
+    [part] ::slotted(vaadin-icon),
     [part] ::slotted(iron-icon) {
       display: block;
       width: 18px;
       height: 18px;
     }
 
+    [part='prefix'] ::slotted(vaadin-icon),
     [part='prefix'] ::slotted(iron-icon) {
       margin-right: 8px;
       margin-left: -4px;
     }
 
+    [part='suffix'] ::slotted(vaadin-icon),
     [part='suffix'] ::slotted(iron-icon) {
       margin-left: 8px;
       margin-right: -4px;
@@ -161,11 +164,13 @@ registerStyles(
       transform: translate(50%, -50%) scale(1);
     }
 
+    :host([dir='rtl']) [part='prefix'] ::slotted(vaadin-icon),
     :host([dir='rtl']) [part='prefix'] ::slotted(iron-icon) {
       margin-right: -4px;
       margin-left: 8px;
     }
 
+    :host([dir='rtl']) [part='suffix'] ::slotted(vaadin-icon),
     :host([dir='rtl']) [part='suffix'] ::slotted(iron-icon) {
       margin-left: -4px;
       margin-right: 8px;

packages/vaadin-icon/theme/material/vaadin-icon-styles.js

@@ -4,8 +4,8 @@ registerStyles(
   'vaadin-icon',
   css`
     :host {
-      width: 18px;
-      height: 18px;
+      width: 24px;
+      height: 24px;
     }
   `,
   { moduleId: 'material-icon' }