diff --git a/packages/icon/src/vaadin-icon-svg.js b/packages/icon/src/vaadin-icon-svg.js
index c29498eb94..ffeba76106 100644
--- a/packages/icon/src/vaadin-icon-svg.js
+++ b/packages/icon/src/vaadin-icon-svg.js
@@ -17,7 +17,7 @@ export function cloneSvgNode(source) {
if (source) {
const content = source.cloneNode(true);
content.removeAttribute('id');
- result = svg`${unsafeSVG(content.innerHTML)}`;
+ result = svg`${unsafeSVG(content.outerHTML)}`;
}
return result;
diff --git a/packages/icon/test/icon.test.js b/packages/icon/test/icon.test.js
index 49c4b3ab98..9639a1a36d 100644
--- a/packages/icon/test/icon.test.js
+++ b/packages/icon/test/icon.test.js
@@ -7,6 +7,7 @@ import { unsafeSvgLiteral } from '../src/vaadin-icon-svg.js';
const ANGLE_DOWN = '';
const ANGLE_UP = '';
const PLUS = '';
+const MINUS = '';
describe('vaadin-icon', () => {
let icon, svgElement;
@@ -126,6 +127,7 @@ describe('vaadin-icon', () => {
${ANGLE_DOWN}
${ANGLE_UP}
${PLUS}
+
@@ -142,20 +144,20 @@ describe('vaadin-icon', () => {
it('should render icon from the iconset', () => {
icons.forEach((svgIcon) => {
icon.icon = svgIcon.getAttribute('id');
- expectIcon(svgIcon.innerHTML);
+ expectIcon(svgIcon.outerHTML.replace(/ id="[^\s]+"/, ''));
});
});
it('should clear icon when the value is set to null', () => {
icon.icon = 'vaadin:angle-up';
- expectIcon(ANGLE_UP);
+ expectIcon(`${ANGLE_UP}`);
icon.icon = null;
expectIcon('');
});
it('should clear icon when the value is set to undefined', () => {
icon.icon = 'vaadin:angle-up';
- expectIcon(ANGLE_UP);
+ expectIcon(`${ANGLE_UP}`);
icon.icon = undefined;
expectIcon('');
});
@@ -171,6 +173,12 @@ describe('vaadin-icon', () => {
expect(getComputedStyle(icon).fill).to.equal('rgb(0, 255, 0)');
});
+ it('should support rendering custom svg element inside the icon', () => {
+ icon.icon = 'vaadin:minus';
+ const child = svgElement.firstElementChild;
+ expect(child.getAttribute('fill')).to.equal('red');
+ });
+
it('should preserve the viewBox attribute set on the icon', () => {
icon.icon = 'vaadin:plus';
expect(svgElement.getAttribute('viewBox')).to.equal('0 0 7 7');
@@ -188,7 +196,7 @@ describe('vaadin-icon', () => {
`);
- expectIcon(ANGLE_UP);
+ expectIcon(`${ANGLE_UP}`);
});
});
@@ -205,7 +213,7 @@ describe('vaadin-icon', () => {
icon.icon = 'vaadin:angle-up';
document.body.appendChild(icon);
svgElement = icon.shadowRoot.querySelector('svg');
- expectIcon(ANGLE_UP);
+ expectIcon(`${ANGLE_UP}`);
});
});