@justeattakeaway/pie-icons-webc 0.3.0 → 0.4.0

package/dist/IconEuro.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--euro"><path d="M11.885 11.815a3.928 3.928 0 0 1-3.063 1.339 4.078 4.078 0 0 1-3.98-2.748h4.033V9.094H4.5a5.765 5.765 0 0 1 0-.656 5.765 5.765 0 0 1 0-.657h4.375V6.47H4.841A4.078 4.078 0 0 1 8.822 3.72a4.016 4.016 0 0 1 3.072 1.348l.962-.875a5.25 5.25 0 0 0-4.034-1.75 5.451 5.451 0 0 0-5.39 4.025H1.876V7.78h1.304a6.17 6.17 0 0 0 0 1.313H1.875v1.312h1.558a5.451 5.451 0 0 0 5.39 4.06 5.252 5.252 0 0 0 4.042-1.75l-.98-.901Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--euro"><path d="M11.885 11.815a3.928 3.928 0 0 1-3.063 1.339 4.078 4.078 0 0 1-3.98-2.748h4.033V9.094H4.5a5.765 5.765 0 0 1 0-.656 5.765 5.765 0 0 1 0-.657h4.375V6.47H4.841A4.078 4.078 0 0 1 8.822 3.72a4.016 4.016 0 0 1 3.072 1.348l.962-.875a5.25 5.25 0 0 0-4.034-1.75 5.451 5.451 0 0 0-5.39 4.025H1.876V7.78h1.304a6.17 6.17 0 0 0 0 1.313H1.875v1.312h1.558a5.451 5.451 0 0 0 5.39 4.06 5.252 5.252 0 0 0 4.042-1.75l-.98-.901Z"></path></svg>';
 
 class IconEuro extends HTMLElement {
     constructor () {

package/dist/IconEuroLarge.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--euroLarge"><path d="m19.894 19.5 1.356 1.12a5.73 5.73 0 0 1-4.419 1.951 5.95 5.95 0 0 1-5.748-3.946H9v-1.75h1.636a7.338 7.338 0 0 1-.061-.875c.003-.293.023-.585.061-.875H9v-1.75h2.056a5.906 5.906 0 0 1 5.732-3.946 5.845 5.845 0 0 1 4.375 1.942l-1.296 1.181a4.068 4.068 0 0 0-3.114-1.373 4.103 4.103 0 0 0-3.745 2.196h3.867v1.75h-4.471a4.896 4.896 0 0 0 0 1.75h4.471v1.75h-3.867a4.104 4.104 0 0 0 3.78 2.196 3.974 3.974 0 0 0 3.106-1.321ZM28.25 16a12.25 12.25 0 1 1-24.499 0 12.25 12.25 0 0 1 24.499 0Zm-1.75 0a10.5 10.5 0 1 0-21 0 10.5 10.5 0 0 0 21 0Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--euroLarge"><path d="m19.894 19.5 1.356 1.12a5.73 5.73 0 0 1-4.419 1.951 5.95 5.95 0 0 1-5.748-3.946H9v-1.75h1.636a7.338 7.338 0 0 1-.061-.875c.003-.293.023-.585.061-.875H9v-1.75h2.056a5.906 5.906 0 0 1 5.732-3.946 5.845 5.845 0 0 1 4.375 1.942l-1.296 1.181a4.068 4.068 0 0 0-3.114-1.373 4.103 4.103 0 0 0-3.745 2.196h3.867v1.75h-4.471a4.896 4.896 0 0 0 0 1.75h4.471v1.75h-3.867a4.104 4.104 0 0 0 3.78 2.196 3.974 3.974 0 0 0 3.106-1.321ZM28.25 16a12.25 12.25 0 1 1-24.499 0 12.25 12.25 0 0 1 24.499 0Zm-1.75 0a10.5 10.5 0 1 0-21 0 10.5 10.5 0 0 0 21 0Z"></path></svg>';
 
 class IconEuroLarge extends HTMLElement {
     constructor () {

package/dist/IconEyeOff.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--eyeOff"><path d="m11.64 4.412 2.485-2.537h-1.803l-1.75 1.75a5.329 5.329 0 0 0-4.774-.175c-.692.314-1.31.77-1.814 1.339L1.06 8l2.45 2.686L1 13.25h1.803l1.61-1.61a5.33 5.33 0 0 0 7.603-.429L14.94 8l-2.923-3.211c-.122-.131-.245-.289-.376-.377ZM2.837 8l2.118-2.327A4.095 4.095 0 0 1 8 4.28c.543.002 1.08.118 1.575.341L8.534 5.664A2.406 2.406 0 0 0 5.594 8c0 .18.024.36.07.534L4.439 9.75 2.837 8Zm6.257 0a1.067 1.067 0 0 1-.324.77 1.094 1.094 0 0 1-1.514 0l1.54-1.514c.188.203.294.468.298.744Zm1.951 2.328A4.095 4.095 0 0 1 8 11.718a4.07 4.07 0 0 1-2.625-1.023l.954-.945A2.42 2.42 0 1 0 9.75 6.329l.945-.954c.114.105.236.192.35.315L13.162 8l-2.117 2.328Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--eyeOff"><path d="m11.64 4.412 2.485-2.537h-1.803l-1.75 1.75a5.329 5.329 0 0 0-4.774-.175c-.692.314-1.31.77-1.814 1.339L1.06 8l2.45 2.686L1 13.25h1.803l1.61-1.61a5.33 5.33 0 0 0 7.603-.429L14.94 8l-2.923-3.211c-.122-.131-.245-.289-.376-.377ZM2.837 8l2.118-2.327A4.095 4.095 0 0 1 8 4.28c.543.002 1.08.118 1.575.341L8.534 5.664A2.406 2.406 0 0 0 5.594 8c0 .18.024.36.07.534L4.439 9.75 2.837 8Zm6.257 0a1.067 1.067 0 0 1-.324.77 1.094 1.094 0 0 1-1.514 0l1.54-1.514c.188.203.294.468.298.744Zm1.951 2.328A4.095 4.095 0 0 1 8 11.718a4.07 4.07 0 0 1-2.625-1.023l.954-.945A2.42 2.42 0 1 0 9.75 6.329l.945-.954c.114.105.236.192.35.315L13.162 8l-2.117 2.328Z"></path></svg>';
 
 class IconEyeOff extends HTMLElement {
     constructor () {

package/dist/IconEyeOffFilled.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--eyeOffFilled"><path d="m12.542 5.375-.928.928-1.251 1.242c.028.15.042.302.044.455A2.424 2.424 0 0 1 8 10.406a2.621 2.621 0 0 1-.455-.043L5.997 11.91l-.49.464A5.25 5.25 0 0 0 8 13.031a5.398 5.398 0 0 0 4.017-1.82L14.939 8l-2.397-2.625Z"></path><path d="m6.793 9.26.463-.464a1.111 1.111 0 0 0 1.514 0A1.068 1.068 0 0 0 9.094 8a1.111 1.111 0 0 0-.298-.744l.464-.463.49-.464.945-.954.945-.945 2.485-2.555h-1.803l-1.75 1.75a5.329 5.329 0 0 0-4.774-.175c-.692.314-1.31.77-1.814 1.339L1.07 8l2.441 2.686L1 13.25h1.803l2.082-2.082.49-.473.954-.945.464-.49ZM5.593 8a2.38 2.38 0 0 1 .71-1.697 2.45 2.45 0 0 1 2.222-.63l-.586.577-2.284 2.284A2.179 2.179 0 0 1 5.594 8Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--eyeOffFilled"><path d="m12.542 5.375-.928.928-1.251 1.242c.028.15.042.302.044.455A2.424 2.424 0 0 1 8 10.406a2.621 2.621 0 0 1-.455-.043L5.997 11.91l-.49.464A5.25 5.25 0 0 0 8 13.031a5.398 5.398 0 0 0 4.017-1.82L14.939 8l-2.397-2.625Z"></path><path d="m6.793 9.26.463-.464a1.111 1.111 0 0 0 1.514 0A1.068 1.068 0 0 0 9.094 8a1.111 1.111 0 0 0-.298-.744l.464-.463.49-.464.945-.954.945-.945 2.485-2.555h-1.803l-1.75 1.75a5.329 5.329 0 0 0-4.774-.175c-.692.314-1.31.77-1.814 1.339L1.07 8l2.441 2.686L1 13.25h1.803l2.082-2.082.49-.473.954-.945.464-.49ZM5.593 8a2.38 2.38 0 0 1 .71-1.697 2.45 2.45 0 0 1 2.222-.63l-.586.577-2.284 2.284A2.179 2.179 0 0 1 5.594 8Z"></path></svg>';
 
 class IconEyeOffFilled extends HTMLElement {
     constructor () {

package/dist/IconEyeOffFilledLarge.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--eyeOffFilledLarge"><path d="m24.82 10.899-.621.612-3.491 3.492c.07.327.105.662.105.997A4.821 4.821 0 0 1 16 20.813a4.71 4.71 0 0 1-.997-.105l-2.205 2.213-.692.683-.665.665a11.323 11.323 0 0 0 12.583-2.363L29.92 16l-5.1-5.101Z"></path><path d="m18.958 16.753-2.205 2.204a3.064 3.064 0 0 0 2.205-2.204Z"></path><path d="m13.909 19.325.647-.639 4.13-4.13.64-.647.638-.63 2.362-2.363.613-.621.621-.613L27.743 5.5h-2.477L22.17 8.598a11.375 11.375 0 0 0-14.193 1.496L2.08 16l5.897 5.906c.15.149.307.28.464.42L4.266 26.5h2.468l3.141-3.098 1.278-1.277 2.17-2.161.586-.639ZM11.188 16A4.821 4.821 0 0 1 16 11.187a4.76 4.76 0 0 1 2.721.876l-.63.638-.647.639a3.046 3.046 0 0 0-4.13 4.13l-.639.648-.639.638A4.803 4.803 0 0 1 11.188 16Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--eyeOffFilledLarge"><path d="m24.82 10.899-.621.612-3.491 3.492c.07.327.105.662.105.997A4.821 4.821 0 0 1 16 20.813a4.71 4.71 0 0 1-.997-.105l-2.205 2.213-.692.683-.665.665a11.323 11.323 0 0 0 12.583-2.363L29.92 16l-5.1-5.101Z"></path><path d="m18.958 16.753-2.205 2.204a3.064 3.064 0 0 0 2.205-2.204Z"></path><path d="m13.909 19.325.647-.639 4.13-4.13.64-.647.638-.63 2.362-2.363.613-.621.621-.613L27.743 5.5h-2.477L22.17 8.598a11.375 11.375 0 0 0-14.193 1.496L2.08 16l5.897 5.906c.15.149.307.28.464.42L4.266 26.5h2.468l3.141-3.098 1.278-1.277 2.17-2.161.586-.639ZM11.188 16A4.821 4.821 0 0 1 16 11.187a4.76 4.76 0 0 1 2.721.876l-.63.638-.647.639a3.046 3.046 0 0 0-4.13 4.13l-.639.648-.639.638A4.803 4.803 0 0 1 11.188 16Z"></path></svg>';
 
 class IconEyeOffFilledLarge extends HTMLElement {
     constructor () {

package/dist/IconEyeOffLarge.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--eyeOffLarge"><path d="M23.56 9.674 27.734 5.5h-2.468L22.17 8.598a11.375 11.375 0 0 0-14.193 1.496L2.08 16l5.897 5.906c.15.149.307.28.464.42L4.266 26.5h2.468l3.141-3.098a11.375 11.375 0 0 0 14.193-1.496L29.92 16l-5.897-5.906c-.149-.149-.306-.28-.464-.42ZM9.674 21.049a9.936 9.936 0 0 1-.455-.42L4.546 16l4.673-4.664A9.572 9.572 0 0 1 20.89 9.875l-2.17 2.161a4.76 4.76 0 0 0-2.72-.875A4.82 4.82 0 0 0 11.187 16a4.76 4.76 0 0 0 .875 2.721l-2.39 2.328Zm9.012-6.528a3.045 3.045 0 0 1-4.13 4.13l4.13-4.13Zm-5.372 2.888a3.045 3.045 0 0 1 4.13-4.13l-4.13 4.13Zm9.467 3.22a9.573 9.573 0 0 1-11.672 1.496l2.17-2.161a4.76 4.76 0 0 0 2.721.875A4.822 4.822 0 0 0 20.813 16a4.76 4.76 0 0 0-.875-2.721l2.362-2.363c.149.131.306.271.455.42L27.454 16l-4.673 4.629Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--eyeOffLarge"><path d="M23.56 9.674 27.734 5.5h-2.468L22.17 8.598a11.375 11.375 0 0 0-14.193 1.496L2.08 16l5.897 5.906c.15.149.307.28.464.42L4.266 26.5h2.468l3.141-3.098a11.375 11.375 0 0 0 14.193-1.496L29.92 16l-5.897-5.906c-.149-.149-.306-.28-.464-.42ZM9.674 21.049a9.936 9.936 0 0 1-.455-.42L4.546 16l4.673-4.664A9.572 9.572 0 0 1 20.89 9.875l-2.17 2.161a4.76 4.76 0 0 0-2.72-.875A4.82 4.82 0 0 0 11.187 16a4.76 4.76 0 0 0 .875 2.721l-2.39 2.328Zm9.012-6.528a3.045 3.045 0 0 1-4.13 4.13l4.13-4.13Zm-5.372 2.888a3.045 3.045 0 0 1 4.13-4.13l-4.13 4.13Zm9.467 3.22a9.573 9.573 0 0 1-11.672 1.496l2.17-2.161a4.76 4.76 0 0 0 2.721.875A4.822 4.822 0 0 0 20.813 16a4.76 4.76 0 0 0-.875-2.721l2.362-2.363c.149.131.306.271.455.42L27.454 16l-4.673 4.629Z"></path></svg>';
 
 class IconEyeOffLarge extends HTMLElement {
     constructor () {

package/dist/IconEyeOn.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--eyeOn"><path d="M12.016 4.789a5.338 5.338 0 0 0-8.032 0L1.06 8l2.923 3.211a5.337 5.337 0 0 0 8.032 0l2.923-3.21-2.923-3.212Zm-.971 5.539a4.025 4.025 0 0 1-6.125 0L2.838 8l2.117-2.327a4.025 4.025 0 0 1 6.125 0L13.162 8l-2.117 2.328ZM6.303 6.303a2.406 2.406 0 1 0 3.395 0 2.38 2.38 0 0 0-3.395 0ZM8.77 8.77a1.085 1.085 0 0 1-1.54 0 1.094 1.094 0 1 1 1.54 0Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--eyeOn"><path d="M12.016 4.789a5.338 5.338 0 0 0-8.032 0L1.06 8l2.923 3.211a5.337 5.337 0 0 0 8.032 0l2.923-3.21-2.923-3.212Zm-.971 5.539a4.025 4.025 0 0 1-6.125 0L2.838 8l2.117-2.327a4.025 4.025 0 0 1 6.125 0L13.162 8l-2.117 2.328ZM6.303 6.303a2.406 2.406 0 1 0 3.395 0 2.38 2.38 0 0 0-3.395 0ZM8.77 8.77a1.085 1.085 0 0 1-1.54 0 1.094 1.094 0 1 1 1.54 0Z"></path></svg>';
 
 class IconEyeOn extends HTMLElement {
     constructor () {

package/dist/IconEyeOnFilled.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--eyeOnFilled"><path d="M12.017 4.789a5.337 5.337 0 0 0-8.033 0L1.062 8l2.922 3.211a5.337 5.337 0 0 0 8.032 0l2.923-3.21-2.922-3.212Zm-2.32 4.909a2.398 2.398 0 1 1 0-3.395 2.38 2.38 0 0 1 0 3.395Z"></path><path d="M8 6.906a1.059 1.059 0 0 0-.77.324 1.085 1.085 0 1 0 1.54 0A1.059 1.059 0 0 0 8 6.906Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--eyeOnFilled"><path d="M12.017 4.789a5.337 5.337 0 0 0-8.033 0L1.062 8l2.922 3.211a5.337 5.337 0 0 0 8.032 0l2.923-3.21-2.922-3.212Zm-2.32 4.909a2.398 2.398 0 1 1 0-3.395 2.38 2.38 0 0 1 0 3.395Z"></path><path d="M8 6.906a1.059 1.059 0 0 0-.77.324 1.085 1.085 0 1 0 1.54 0A1.059 1.059 0 0 0 8 6.906Z"></path></svg>';
 
 class IconEyeOnFilled extends HTMLElement {
     constructor () {

package/dist/IconEyeOnFilledLarge.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--eyeOnFilledLarge"><path d="M24.024 10.094a11.375 11.375 0 0 0-16.048 0L2.08 16l5.897 5.906a11.375 11.375 0 0 0 16.048 0L29.92 16l-5.897-5.906ZM16 20.813A4.813 4.813 0 1 1 20.813 16 4.821 4.821 0 0 1 16 20.813Z"></path><path d="M16 19.063a3.062 3.062 0 1 0 0-6.125 3.062 3.062 0 0 0 0 6.124Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--eyeOnFilledLarge"><path d="M24.024 10.094a11.375 11.375 0 0 0-16.048 0L2.08 16l5.897 5.906a11.375 11.375 0 0 0 16.048 0L29.92 16l-5.897-5.906ZM16 20.813A4.813 4.813 0 1 1 20.813 16 4.821 4.821 0 0 1 16 20.813Z"></path><path d="M16 19.063a3.062 3.062 0 1 0 0-6.125 3.062 3.062 0 0 0 0 6.124Z"></path></svg>';
 
 class IconEyeOnFilledLarge extends HTMLElement {
     constructor () {

package/dist/IconEyeOnLarge.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--eyeOnLarge"><path d="M24.024 10.094a11.375 11.375 0 0 0-16.048 0L2.08 16l5.897 5.906a11.375 11.375 0 0 0 16.048 0L29.92 16l-5.897-5.906Zm-1.243 10.57a9.625 9.625 0 0 1-13.562 0L4.546 16l4.673-4.664a9.625 9.625 0 0 1 13.562 0L27.454 16l-4.673 4.664Zm-6.78-9.477A4.813 4.813 0 1 0 20.812 16 4.821 4.821 0 0 0 16 11.187Zm0 7.876A3.062 3.062 0 1 1 16 12.938a3.062 3.062 0 0 1 0 6.124Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--eyeOnLarge"><path d="M24.024 10.094a11.375 11.375 0 0 0-16.048 0L2.08 16l5.897 5.906a11.375 11.375 0 0 0 16.048 0L29.92 16l-5.897-5.906Zm-1.243 10.57a9.625 9.625 0 0 1-13.562 0L4.546 16l4.673-4.664a9.625 9.625 0 0 1 13.562 0L27.454 16l-4.673 4.664Zm-6.78-9.477A4.813 4.813 0 1 0 20.812 16 4.821 4.821 0 0 0 16 11.187Zm0 7.876A3.062 3.062 0 1 1 16 12.938a3.062 3.062 0 0 1 0 6.124Z"></path></svg>';
 
 class IconEyeOnLarge extends HTMLElement {
     constructor () {

package/dist/IconFaceHappy.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--faceHappy"><path d="M8 1.219A6.781 6.781 0 1 0 14.781 8 6.79 6.79 0 0 0 8 1.219Zm0 12.25A5.469 5.469 0 1 1 8 2.53a5.469 5.469 0 0 1 0 10.938Z"></path><path d="M5 6.75a.75.75 0 1 1 1.5 0 .75.75 0 0 1-1.5 0Z"></path><path d="M9.5 6.75a.75.75 0 1 1 1.5 0 .75.75 0 0 1-1.5 0Z"></path><path d="M11.125 9H9.751a1.846 1.846 0 0 1-3.377 0H5a3.168 3.168 0 0 0 6.125 0Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--faceHappy"><path d="M8 1.219A6.781 6.781 0 1 0 14.781 8 6.79 6.79 0 0 0 8 1.219Zm0 12.25A5.469 5.469 0 1 1 8 2.53a5.469 5.469 0 0 1 0 10.938Z"></path><path d="M5 6.75a.75.75 0 1 1 1.5 0 .75.75 0 0 1-1.5 0Z"></path><path d="M9.5 6.75a.75.75 0 1 1 1.5 0 .75.75 0 0 1-1.5 0Z"></path><path d="M11.125 9H9.751a1.846 1.846 0 0 1-3.377 0H5a3.168 3.168 0 0 0 6.125 0Z"></path></svg>';
 
 class IconFaceHappy extends HTMLElement {
     constructor () {

package/dist/IconFaceHappyLarge.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--faceHappyLarge"><path d="M16 3.75a12.25 12.25 0 1 0 0 24.5 12.25 12.25 0 0 0 0-24.5Zm0 22.75a10.5 10.5 0 1 1 0-21 10.5 10.5 0 0 1 0 21Zm-4.375-11.813a1.313 1.313 0 1 1-2.626 0 1.313 1.313 0 0 1 2.626 0Zm11.375 0a1.313 1.313 0 1 1-2.626 0 1.313 1.313 0 0 1 2.626 0Zm-4.288 3.938h1.847a4.717 4.717 0 0 1-9.118 0h1.846a2.975 2.975 0 0 0 5.425 0Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--faceHappyLarge"><path d="M16 3.75a12.25 12.25 0 1 0 0 24.5 12.25 12.25 0 0 0 0-24.5Zm0 22.75a10.5 10.5 0 1 1 0-21 10.5 10.5 0 0 1 0 21Zm-4.375-11.813a1.313 1.313 0 1 1-2.626 0 1.313 1.313 0 0 1 2.626 0Zm11.375 0a1.313 1.313 0 1 1-2.626 0 1.313 1.313 0 0 1 2.626 0Zm-4.288 3.938h1.847a4.717 4.717 0 0 1-9.118 0h1.846a2.975 2.975 0 0 0 5.425 0Z"></path></svg>';
 
 class IconFaceHappyLarge extends HTMLElement {
     constructor () {

package/dist/IconFilters.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--filters"><path d="M15 3.844v1.312H6.031v1.532H4.72V5.155H1V3.844h3.719V2.313H6.03v1.53H15Zm-3.719 5.469H9.97v1.53H1v1.313h8.969v1.531h1.312v-1.53H15v-1.313h-3.719V9.313Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--filters"><path d="M15 3.844v1.312H6.031v1.532H4.72V5.155H1V3.844h3.719V2.313H6.03v1.53H15Zm-3.719 5.469H9.97v1.53H1v1.313h8.969v1.531h1.312v-1.53H15v-1.313h-3.719V9.313Z"></path></svg>';
 
 class IconFilters extends HTMLElement {
     constructor () {

package/dist/IconFiltersFilled.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--filtersFilled"><path d="M15 3.844v1.312H6.031v1.532H4.72V5.155H1V3.844h3.719V2.313H6.03v1.53H15Zm-3.719 5.469H9.97v1.53H1v1.313h8.969v1.531h1.312v-1.53H15v-1.313h-3.719V9.313Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--filtersFilled"><path d="M15 3.844v1.312H6.031v1.532H4.72V5.155H1V3.844h3.719V2.313H6.03v1.53H15Zm-3.719 5.469H9.97v1.53H1v1.313h8.969v1.531h1.312v-1.53H15v-1.313h-3.719V9.313Z"></path></svg>';
 
 class IconFiltersFilled extends HTMLElement {
     constructor () {

package/dist/IconFiltersFilledLarge.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--filtersFilledLarge"><path d="M14.25 9v-.875A2.625 2.625 0 0 0 11.625 5.5h-.875a2.625 2.625 0 0 0-2.625 2.625V9h-5.25v1.75h5.25v.875a2.625 2.625 0 0 0 2.625 2.625h.875a2.625 2.625 0 0 0 2.625-2.625v-.875h14.875V9H14.25Z"></path><path d="M23.875 20.375a2.625 2.625 0 0 0-2.625-2.625h-.875a2.625 2.625 0 0 0-2.625 2.625v.875H2.875V23H17.75v.875a2.625 2.625 0 0 0 2.625 2.625h.875a2.625 2.625 0 0 0 2.625-2.625V23h5.25v-1.75h-5.25v-.875Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--filtersFilledLarge"><path d="M14.25 9v-.875A2.625 2.625 0 0 0 11.625 5.5h-.875a2.625 2.625 0 0 0-2.625 2.625V9h-5.25v1.75h5.25v.875a2.625 2.625 0 0 0 2.625 2.625h.875a2.625 2.625 0 0 0 2.625-2.625v-.875h14.875V9H14.25Z"></path><path d="M23.875 20.375a2.625 2.625 0 0 0-2.625-2.625h-.875a2.625 2.625 0 0 0-2.625 2.625v.875H2.875V23H17.75v.875a2.625 2.625 0 0 0 2.625 2.625h.875a2.625 2.625 0 0 0 2.625-2.625V23h5.25v-1.75h-5.25v-.875Z"></path></svg>';
 
 class IconFiltersFilledLarge extends HTMLElement {
     constructor () {

package/dist/IconFiltersLarge.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--filtersLarge"><path d="M14.25 9v-.875A2.625 2.625 0 0 0 11.625 5.5h-.875a2.625 2.625 0 0 0-2.625 2.625V9h-5.25v1.75h5.25v.875a2.625 2.625 0 0 0 2.625 2.625h.875a2.625 2.625 0 0 0 2.625-2.625v-.875h14.875V9H14.25Zm-1.75 2.625a.875.875 0 0 1-.875.875h-.875a.875.875 0 0 1-.875-.875v-3.5a.875.875 0 0 1 .875-.875h.875a.875.875 0 0 1 .875.875v3.5Zm11.375 8.75a2.625 2.625 0 0 0-2.625-2.625h-.875a2.625 2.625 0 0 0-2.625 2.625v.875H2.875V23H17.75v.875a2.625 2.625 0 0 0 2.625 2.625h.875a2.625 2.625 0 0 0 2.625-2.625V23h5.25v-1.75h-5.25v-.875Zm-1.75 3.5a.875.875 0 0 1-.875.875h-.875a.875.875 0 0 1-.875-.875v-3.5a.875.875 0 0 1 .875-.875h.875a.875.875 0 0 1 .875.875v3.5Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--filtersLarge"><path d="M14.25 9v-.875A2.625 2.625 0 0 0 11.625 5.5h-.875a2.625 2.625 0 0 0-2.625 2.625V9h-5.25v1.75h5.25v.875a2.625 2.625 0 0 0 2.625 2.625h.875a2.625 2.625 0 0 0 2.625-2.625v-.875h14.875V9H14.25Zm-1.75 2.625a.875.875 0 0 1-.875.875h-.875a.875.875 0 0 1-.875-.875v-3.5a.875.875 0 0 1 .875-.875h.875a.875.875 0 0 1 .875.875v3.5Zm11.375 8.75a2.625 2.625 0 0 0-2.625-2.625h-.875a2.625 2.625 0 0 0-2.625 2.625v.875H2.875V23H17.75v.875a2.625 2.625 0 0 0 2.625 2.625h.875a2.625 2.625 0 0 0 2.625-2.625V23h5.25v-1.75h-5.25v-.875Zm-1.75 3.5a.875.875 0 0 1-.875.875h-.875a.875.875 0 0 1-.875-.875v-3.5a.875.875 0 0 1 .875-.875h.875a.875.875 0 0 1 .875.875v3.5Z"></path></svg>';
 
 class IconFiltersLarge extends HTMLElement {
     constructor () {

package/dist/IconFingerprint.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--fingerprint"><path d="M11.841 4.036A6.02 6.02 0 0 0 7.66 2.348a5.801 5.801 0 0 0-2.013.35L5.21 1.454a7.359 7.359 0 0 1 7.542 1.627l-.91.954Zm1.75 2.949a7.201 7.201 0 0 0-6.545-3.736A7.875 7.875 0 0 0 3.118 4.28l.656 1.138a6.519 6.519 0 0 1 3.272-.875 5.88 5.88 0 0 1 5.329 3.027l1.216-.586ZM6.828 5.471a6.274 6.274 0 0 0-3.85 1.287L3.79 7.79a4.891 4.891 0 0 1 3.037-1.006c2.485 0 4.506 1.75 4.506 3.85h1.312c0-2.853-2.616-5.163-5.818-5.163Zm3.797 6.239A3.824 3.824 0 0 0 6.714 8a3.964 3.964 0 0 0-3.439 1.934l1.138.691a2.625 2.625 0 0 1 2.3-1.313A2.503 2.503 0 0 1 9.34 11.71c0 1.129-.105 2.222-.105 2.231l1.303.131c-.017-.052.088-1.163.088-2.362Zm-2.266 1.225a2.117 2.117 0 0 0-.254-1.514 1.889 1.889 0 0 0-1.251-.875A2.02 2.02 0 0 0 4.5 12.165l1.295.263a.7.7 0 0 1 .77-.613.579.579 0 0 1 .376.28.796.796 0 0 1 .097.586c-.122.432-.34.83-.64 1.164l.99.875c.459-.51.792-1.122.97-1.785Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--fingerprint"><path d="M11.841 4.036A6.02 6.02 0 0 0 7.66 2.348a5.801 5.801 0 0 0-2.013.35L5.21 1.454a7.359 7.359 0 0 1 7.542 1.627l-.91.954Zm1.75 2.949a7.201 7.201 0 0 0-6.545-3.736A7.875 7.875 0 0 0 3.118 4.28l.656 1.138a6.519 6.519 0 0 1 3.272-.875 5.88 5.88 0 0 1 5.329 3.027l1.216-.586ZM6.828 5.471a6.274 6.274 0 0 0-3.85 1.287L3.79 7.79a4.891 4.891 0 0 1 3.037-1.006c2.485 0 4.506 1.75 4.506 3.85h1.312c0-2.853-2.616-5.163-5.818-5.163Zm3.797 6.239A3.824 3.824 0 0 0 6.714 8a3.964 3.964 0 0 0-3.439 1.934l1.138.691a2.625 2.625 0 0 1 2.3-1.313A2.503 2.503 0 0 1 9.34 11.71c0 1.129-.105 2.222-.105 2.231l1.303.131c-.017-.052.088-1.163.088-2.362Zm-2.266 1.225a2.117 2.117 0 0 0-.254-1.514 1.889 1.889 0 0 0-1.251-.875A2.02 2.02 0 0 0 4.5 12.165l1.295.263a.7.7 0 0 1 .77-.613.579.579 0 0 1 .376.28.796.796 0 0 1 .097.586c-.122.432-.34.83-.64 1.164l.99.875c.459-.51.792-1.122.97-1.785Z"></path></svg>';
 
 class IconFingerprint extends HTMLElement {
     constructor () {

package/dist/IconFingerprintLarge.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--fingerprintLarge"><path d="m11.1 5.343-.586-1.646A13.842 13.842 0 0 1 24.697 6.76L23.49 8.02A12.128 12.128 0 0 0 11.1 5.343Zm3.08 1.697a13.842 13.842 0 0 0-7.744 2.362l.98 1.453a12.092 12.092 0 0 1 17.894 5.32l1.61-.683A13.807 13.807 0 0 0 14.18 7.04Zm-.613 3.964a11.611 11.611 0 0 0-7.673 2.879l1.155 1.312a9.86 9.86 0 0 1 6.518-2.441 9.695 9.695 0 0 1 9.774 9.625h1.75a11.445 11.445 0 0 0-11.524-11.375Zm-.28 3.955a7.936 7.936 0 0 0-7 4.165l1.54.831a6.195 6.195 0 0 1 11.673 2.94 16.87 16.87 0 0 1-.875 5.031l1.645.604c.62-1.815.95-3.717.98-5.635a7.944 7.944 0 0 0-7.963-7.936Zm.71 3.92a4.76 4.76 0 0 0-5.452 3.902l1.75.35a3.01 3.01 0 0 1 3.386-2.537 2.625 2.625 0 0 1 1.75 1.268c.423.717.563 1.566.394 2.38a9.834 9.834 0 0 1-2.048 3.807l1.313 1.163a11.647 11.647 0 0 0 2.45-4.62 5.066 5.066 0 0 0-.613-3.63 4.376 4.376 0 0 0-2.93-2.083Zm-1.75 4.235a8.112 8.112 0 0 1-1.34 2.695l1.234 1.242a9.994 9.994 0 0 0 1.75-3.421l-1.645-.516Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--fingerprintLarge"><path d="m11.1 5.343-.586-1.646A13.842 13.842 0 0 1 24.697 6.76L23.49 8.02A12.128 12.128 0 0 0 11.1 5.343Zm3.08 1.697a13.842 13.842 0 0 0-7.744 2.362l.98 1.453a12.092 12.092 0 0 1 17.894 5.32l1.61-.683A13.807 13.807 0 0 0 14.18 7.04Zm-.613 3.964a11.611 11.611 0 0 0-7.673 2.879l1.155 1.312a9.86 9.86 0 0 1 6.518-2.441 9.695 9.695 0 0 1 9.774 9.625h1.75a11.445 11.445 0 0 0-11.524-11.375Zm-.28 3.955a7.936 7.936 0 0 0-7 4.165l1.54.831a6.195 6.195 0 0 1 11.673 2.94 16.87 16.87 0 0 1-.875 5.031l1.645.604c.62-1.815.95-3.717.98-5.635a7.944 7.944 0 0 0-7.963-7.936Zm.71 3.92a4.76 4.76 0 0 0-5.452 3.902l1.75.35a3.01 3.01 0 0 1 3.386-2.537 2.625 2.625 0 0 1 1.75 1.268c.423.717.563 1.566.394 2.38a9.834 9.834 0 0 1-2.048 3.807l1.313 1.163a11.647 11.647 0 0 0 2.45-4.62 5.066 5.066 0 0 0-.613-3.63 4.376 4.376 0 0 0-2.93-2.083Zm-1.75 4.235a8.112 8.112 0 0 1-1.34 2.695l1.234 1.242a9.994 9.994 0 0 0 1.75-3.421l-1.645-.516Z"></path></svg>';
 
 class IconFingerprintLarge extends HTMLElement {
     constructor () {

package/dist/IconFire.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--fire"><path fill-rule="evenodd" d="M8.24 2.56 5.082 5.72l-.002.002a4.477 4.477 0 0 0-.004 6.302 4.364 4.364 0 0 0 6.278.002 4.459 4.459 0 0 0-.003-6.304L8.24 2.56Zm-2.518 8.833-.11.107.109-.108.001.001Zm.666-.194a2.864 2.864 0 0 0 3.669-.013 256.57 256.57 0 0 0-1.833-1.817L6.388 11.2Zm4.366.24.064.061-.063-.062v.001Zm.197-1.481a256.172 256.172 0 0 0-2.208-2.18l-.53-.516-2.722 2.713a2.977 2.977 0 0 1 .652-3.196L8.233 4.69l2.05 2.086.006.005a2.961 2.961 0 0 1 .663 3.177Z" clip-rule="evenodd"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--fire"><path fill-rule="evenodd" d="M8.24 2.56 5.082 5.72l-.002.002a4.477 4.477 0 0 0-.004 6.302 4.364 4.364 0 0 0 6.278.002 4.459 4.459 0 0 0-.003-6.304L8.24 2.56Zm-2.518 8.833-.11.107.109-.108.001.001Zm.666-.194a2.864 2.864 0 0 0 3.669-.013 256.57 256.57 0 0 0-1.833-1.817L6.388 11.2Zm4.366.24.064.061-.063-.062v.001Zm.197-1.481a256.172 256.172 0 0 0-2.208-2.18l-.53-.516-2.722 2.713a2.977 2.977 0 0 1 .652-3.196L8.233 4.69l2.05 2.086.006.005a2.961 2.961 0 0 1 .663 3.177Z" clip-rule="evenodd"></path></svg>';
 
 class IconFire extends HTMLElement {
     constructor () {

package/dist/IconFireLarge.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--fireLarge"><path d="M22.125 11.625 16 5.5l-6.125 6.125a8.75 8.75 0 0 0 0 12.32 8.574 8.574 0 0 0 12.198 0 8.75 8.75 0 0 0 .052-12.32ZM11.18 12.85 16 7.968l4.848 4.9a7 7 0 0 1 1.128 8.33c-1.75-1.75-3.5-3.544-5.31-5.25l-.622-.604-.613.612-5.355 5.338a7 7 0 0 1 1.077-8.427l.026-.017ZM16 24.75a6.764 6.764 0 0 1-4.847-2.03l4.908-4.97a506.56 506.56 0 0 1 4.874 4.839l-.087.087A6.763 6.763 0 0 1 16 24.75Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--fireLarge"><path d="M22.125 11.625 16 5.5l-6.125 6.125a8.75 8.75 0 0 0 0 12.32 8.574 8.574 0 0 0 12.198 0 8.75 8.75 0 0 0 .052-12.32ZM11.18 12.85 16 7.968l4.848 4.9a7 7 0 0 1 1.128 8.33c-1.75-1.75-3.5-3.544-5.31-5.25l-.622-.604-.613.612-5.355 5.338a7 7 0 0 1 1.077-8.427l.026-.017ZM16 24.75a6.764 6.764 0 0 1-4.847-2.03l4.908-4.97a506.56 506.56 0 0 1 4.874 4.839l-.087.087A6.763 6.763 0 0 1 16 24.75Z"></path></svg>';
 
 class IconFireLarge extends HTMLElement {
     constructor () {

package/dist/IconFlagAustralia.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--australia"><path fill="#0052B4" d="M15 8A7 7 0 1 1 1 8l7-7a7 7 0 0 1 7 7Z"></path><path fill="#EEE" d="M7.981 8h.02v-.02L7.98 8Z"></path><path fill="#EEE" d="M8 4.653V1a7 7 0 0 0-7 7h3.653V5.944L6.71 8h1.272l.02-.02L8 6.71 5.944 4.652H8Z"></path><path fill="#D80027" d="M4.54 1.913a7.033 7.033 0 0 0-2.627 2.628V8H3.74V3.74H8V1.913H4.54Z"></path><path fill="#D80027" d="M8 7.139 5.51 4.65h-.858L8 8v-.861Z"></path><path fill="#EEE" d="m5.222 9.217.382.804.87-.2-.388.801.697.553-.87.196.003.89-.694-.556-.695.555v-.889l-.864-.2.697-.551-.388-.802.867.2.383-.801Zm6.259 1.523.191.402.435-.101-.194.399.347.279-.435.095v.446l-.344-.279-.348.28v-.447l-.434-.095.35-.28-.195-.398.435.1.192-.401ZM9.692 6.477l.192.402.437-.099-.197.4.35.276-.437.098.003.446-.348-.279L9.345 8v-.446l-.432-.098.347-.274-.191-.402.432.099.191-.402Zm1.789-2.434.191.402.435-.1-.197.401.347.273-.435.102v.445l-.344-.279-.347.28V5.12l-.435-.099.35-.276-.194-.402.434.101.195-.402Zm1.558 1.827.192.402.437-.101-.194.402.347.273-.434.101v.443l-.345-.276-.347.276v-.443l-.435-.098.35-.276-.194-.402.432.1.191-.401ZM11.926 8l.153.465h.487l-.396.287.15.465-.396-.287-.394.287.15-.465-.396-.287h.492l.15-.465Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--australia"><path fill="#0052B4" d="M15 8A7 7 0 1 1 1 8l7-7a7 7 0 0 1 7 7Z"></path><path fill="#EEE" d="M7.981 8h.02v-.02L7.98 8Z"></path><path fill="#EEE" d="M8 4.653V1a7 7 0 0 0-7 7h3.653V5.944L6.71 8h1.272l.02-.02L8 6.71 5.944 4.652H8Z"></path><path fill="#D80027" d="M4.54 1.913a7.033 7.033 0 0 0-2.627 2.628V8H3.74V3.74H8V1.913H4.54Z"></path><path fill="#D80027" d="M8 7.139 5.51 4.65h-.858L8 8v-.861Z"></path><path fill="#EEE" d="m5.222 9.217.382.804.87-.2-.388.801.697.553-.87.196.003.89-.694-.556-.695.555v-.889l-.864-.2.697-.551-.388-.802.867.2.383-.801Zm6.259 1.523.191.402.435-.101-.194.399.347.279-.435.095v.446l-.344-.279-.348.28v-.447l-.434-.095.35-.28-.195-.398.435.1.192-.401ZM9.692 6.477l.192.402.437-.099-.197.4.35.276-.437.098.003.446-.348-.279L9.345 8v-.446l-.432-.098.347-.274-.191-.402.432.099.191-.402Zm1.789-2.434.191.402.435-.1-.197.401.347.273-.435.102v.445l-.344-.279-.347.28V5.12l-.435-.099.35-.276-.194-.402.434.101.195-.402Zm1.558 1.827.192.402.437-.101-.194.402.347.273-.434.101v.443l-.345-.276-.347.276v-.443l-.435-.098.35-.276-.194-.402.432.1.191-.401ZM11.926 8l.153.465h.487l-.396.287.15.465-.396-.287-.394.287.15-.465-.396-.287h.492l.15-.465Z"></path></svg>';
 
 class IconFlagAustralia extends HTMLElement {
     constructor () {

package/dist/IconFlagAustria.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--austria"><path fill="#EEE" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Z"></path><path fill="#D80027" d="M8 1a7 7 0 0 0-6.563 4.566h13.126A7 7 0 0 0 8 1Z"></path><path fill="#D80027" d="M8 15a7 7 0 0 0 6.563-4.566H1.437A7 7 0 0 0 8 15Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--austria"><path fill="#EEE" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Z"></path><path fill="#D80027" d="M8 1a7 7 0 0 0-6.563 4.566h13.126A7 7 0 0 0 8 1Z"></path><path fill="#D80027" d="M8 15a7 7 0 0 0 6.563-4.566H1.437A7 7 0 0 0 8 15Z"></path></svg>';
 
 class IconFlagAustria extends HTMLElement {
     constructor () {

package/dist/IconFlagBelgium.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--belgium"><path fill="#FFDA44" d="M10.433 1.438a6.986 6.986 0 0 0-4.867 0L4.956 8l.61 6.562a6.984 6.984 0 0 0 4.867 0L11.043 8l-.61-6.562Z"></path><path fill="#D80027" d="M15 8a7 7 0 0 0-4.567-6.562v13.124A7.001 7.001 0 0 0 15 8Z"></path><path fill="#333" d="M1 8a7 7 0 0 0 4.566 6.562V1.438A6.999 6.999 0 0 0 1 8Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--belgium"><path fill="#FFDA44" d="M10.433 1.438a6.986 6.986 0 0 0-4.867 0L4.956 8l.61 6.562a6.984 6.984 0 0 0 4.867 0L11.043 8l-.61-6.562Z"></path><path fill="#D80027" d="M15 8a7 7 0 0 0-4.567-6.562v13.124A7.001 7.001 0 0 0 15 8Z"></path><path fill="#333" d="M1 8a7 7 0 0 0 4.566 6.562V1.438A6.999 6.999 0 0 0 1 8Z"></path></svg>';
 
 class IconFlagBelgium extends HTMLElement {
     constructor () {

package/dist/IconFlagBulgaria.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--bulgaria"><path fill="#496E2D" d="M15.002 7.999a6.91 6.91 0 0 0-.437-2.434L8 5.259l-6.563.306a6.987 6.987 0 0 0 0 4.868L8 10.739l6.564-.306a6.91 6.91 0 0 0 .437-2.434Z"></path><path fill="#D80027" d="M8.001 15a7 7 0 0 0 6.564-4.567H1.438A7 7 0 0 0 8 15Z"></path><path fill="#EEE" d="M1.438 5.565h13.127a7.002 7.002 0 0 0-13.127 0Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--bulgaria"><path fill="#496E2D" d="M15.002 7.999a6.91 6.91 0 0 0-.437-2.434L8 5.259l-6.563.306a6.987 6.987 0 0 0 0 4.868L8 10.739l6.564-.306a6.91 6.91 0 0 0 .437-2.434Z"></path><path fill="#D80027" d="M8.001 15a7 7 0 0 0 6.564-4.567H1.438A7 7 0 0 0 8 15Z"></path><path fill="#EEE" d="M1.438 5.565h13.127a7.002 7.002 0 0 0-13.127 0Z"></path></svg>';
 
 class IconFlagBulgaria extends HTMLElement {
     constructor () {

package/dist/IconFlagCanada.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--canada"><path fill="#EEE" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Z"></path><path fill="#D80027" d="M15 8a7 7 0 0 0-3.957-6.305v12.61A7 7 0 0 0 15 8ZM1 8a7 7 0 0 0 3.957 6.306V1.694A7 7 0 0 0 1 8Zm8.217.913 1.217-.612L9.827 8v-.61L8.61 8l.607-1.217H8.61L8 5.867l-.61.914h-.607l.607 1.216-1.217-.61V8l-.607.304 1.217.61-.306.61h1.222v.91h.602v-.91h1.22l-.304-.61Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--canada"><path fill="#EEE" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Z"></path><path fill="#D80027" d="M15 8a7 7 0 0 0-3.957-6.305v12.61A7 7 0 0 0 15 8ZM1 8a7 7 0 0 0 3.957 6.306V1.694A7 7 0 0 0 1 8Zm8.217.913 1.217-.612L9.827 8v-.61L8.61 8l.607-1.217H8.61L8 5.867l-.61.914h-.607l.607 1.216-1.217-.61V8l-.607.304 1.217.61-.306.61h1.222v.91h.602v-.91h1.22l-.304-.61Z"></path></svg>';
 
 class IconFlagCanada extends HTMLElement {
     constructor () {

package/dist/IconFlagDenmark.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--denmark"><path fill="#EEE" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Z"></path><path fill="#D80027" d="M6.476 7.087h8.463A7 7 0 0 0 8 1a7.027 7.027 0 0 0-1.523.164v5.923Zm-1.823 0V1.85A7.005 7.005 0 0 0 1.06 7.087h3.593Zm0 1.826H1.06a7.005 7.005 0 0 0 3.593 5.236V8.913Zm1.823 0v5.92a7 7 0 0 0 8.463-5.92H6.476Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--denmark"><path fill="#EEE" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Z"></path><path fill="#D80027" d="M6.476 7.087h8.463A7 7 0 0 0 8 1a7.027 7.027 0 0 0-1.523.164v5.923Zm-1.823 0V1.85A7.005 7.005 0 0 0 1.06 7.087h3.593Zm0 1.826H1.06a7.005 7.005 0 0 0 3.593 5.236V8.913Zm1.823 0v5.92a7 7 0 0 0 8.463-5.92H6.476Z"></path></svg>';
 
 class IconFlagDenmark extends HTMLElement {
     constructor () {

package/dist/IconFlagFrance.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--france"><path fill="#EEE" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Z"></path><path fill="#D80027" d="M15 8a7 7 0 0 0-4.566-6.563v13.126A7 7 0 0 0 15 8Z"></path><path fill="#0052B4" d="M1 8a7 7 0 0 0 4.566 6.563V1.437A7 7 0 0 0 1 8Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--france"><path fill="#EEE" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Z"></path><path fill="#D80027" d="M15 8a7 7 0 0 0-4.566-6.563v13.126A7 7 0 0 0 15 8Z"></path><path fill="#0052B4" d="M1 8a7 7 0 0 0 4.566 6.563V1.437A7 7 0 0 0 1 8Z"></path></svg>';
 
 class IconFlagFrance extends HTMLElement {
     constructor () {

package/dist/IconFlagGermany.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--germany"><path fill="#FFDA44" d="M1.438 10.435a7.001 7.001 0 0 0 13.127 0L8 9.828l-6.563.607Z"></path><path fill="#333" d="M8.001 1a7.001 7.001 0 0 0-6.563 4.567L8 6.174l6.564-.607A7.001 7.001 0 0 0 8 1Z"></path><path fill="#D80027" d="M1.438 5.567a6.987 6.987 0 0 0 0 4.868h13.127a6.984 6.984 0 0 0 0-4.868H1.438Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--germany"><path fill="#FFDA44" d="M1.438 10.435a7.001 7.001 0 0 0 13.127 0L8 9.828l-6.563.607Z"></path><path fill="#333" d="M8.001 1a7.001 7.001 0 0 0-6.563 4.567L8 6.174l6.564-.607A7.001 7.001 0 0 0 8 1Z"></path><path fill="#D80027" d="M1.438 5.567a6.987 6.987 0 0 0 0 4.868h13.127a6.984 6.984 0 0 0 0-4.868H1.438Z"></path></svg>';
 
 class IconFlagGermany extends HTMLElement {
     constructor () {

package/dist/IconFlagIreland.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--ireland"><path fill="#EEE" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Z"></path><path fill="#FF9811" d="M15 8a7 7 0 0 0-4.566-6.563v13.126A7 7 0 0 0 15 8Z"></path><path fill="#6DA544" d="M1 8a7 7 0 0 0 4.566 6.563V1.437A7 7 0 0 0 1 8Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--ireland"><path fill="#EEE" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Z"></path><path fill="#FF9811" d="M15 8a7 7 0 0 0-4.566-6.563v13.126A7 7 0 0 0 15 8Z"></path><path fill="#6DA544" d="M1 8a7 7 0 0 0 4.566 6.563V1.437A7 7 0 0 0 1 8Z"></path></svg>';
 
 class IconFlagIreland extends HTMLElement {
     constructor () {

package/dist/IconFlagIsrael.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--israel"><path fill="#EEE" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Z"></path><path fill="#0052B4" d="M10.636 6.477h-1.76L8 4.957l-.877 1.52H5.364L6.242 8l-.875 1.523h1.756L8 11.043l.878-1.52h1.758L9.758 8l.876-1.523h.002ZM9.078 8l-.54.935H7.463L6.92 8l.542-.935h1.077L9.08 8h-.002ZM8 6.13l.2.347h-.4L8 6.13Zm-1.618.935h.401l-.202.347-.2-.347Zm0 1.87.2-.347.201.347h-.401ZM8 9.87l-.2-.347h.4L8 9.87Zm1.619-.935h-.402l.202-.347.2.347Zm-.402-1.87h.402l-.2.347-.202-.347Zm3.142-4.542H3.642a7.036 7.036 0 0 0-1.614 1.824h11.944a7.034 7.034 0 0 0-1.613-1.824ZM3.642 13.477h8.717a7.033 7.033 0 0 0 1.613-1.824H2.028a7.034 7.034 0 0 0 1.614 1.824Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--israel"><path fill="#EEE" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Z"></path><path fill="#0052B4" d="M10.636 6.477h-1.76L8 4.957l-.877 1.52H5.364L6.242 8l-.875 1.523h1.756L8 11.043l.878-1.52h1.758L9.758 8l.876-1.523h.002ZM9.078 8l-.54.935H7.463L6.92 8l.542-.935h1.077L9.08 8h-.002ZM8 6.13l.2.347h-.4L8 6.13Zm-1.618.935h.401l-.202.347-.2-.347Zm0 1.87.2-.347.201.347h-.401ZM8 9.87l-.2-.347h.4L8 9.87Zm1.619-.935h-.402l.202-.347.2.347Zm-.402-1.87h.402l-.2.347-.202-.347Zm3.142-4.542H3.642a7.036 7.036 0 0 0-1.614 1.824h11.944a7.034 7.034 0 0 0-1.613-1.824ZM3.642 13.477h8.717a7.033 7.033 0 0 0 1.613-1.824H2.028a7.034 7.034 0 0 0 1.614 1.824Z"></path></svg>';
 
 class IconFlagIsrael extends HTMLElement {
     constructor () {

package/dist/IconFlagItaly.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--italy"><path fill="#EEE" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Z"></path><path fill="#D80027" d="M15 8a7 7 0 0 0-4.566-6.563v13.126A7 7 0 0 0 15 8Z"></path><path fill="#6DA544" d="M1 8a7 7 0 0 0 4.566 6.563V1.437A7 7 0 0 0 1 8Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--italy"><path fill="#EEE" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Z"></path><path fill="#D80027" d="M15 8a7 7 0 0 0-4.566-6.563v13.126A7 7 0 0 0 15 8Z"></path><path fill="#6DA544" d="M1 8a7 7 0 0 0 4.566 6.563V1.437A7 7 0 0 0 1 8Z"></path></svg>';
 
 class IconFlagItaly extends HTMLElement {
     constructor () {

package/dist/IconFlagLuxembourg.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--luxembourg"><path fill="#EEE" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Z"></path><path fill="#D80027" d="M8 1a7 7 0 0 0-6.563 4.566h13.126A7 7 0 0 0 8 1Z"></path><path fill="#338AF3" d="M8 15a7 7 0 0 0 6.563-4.566H1.437A7 7 0 0 0 8 15Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--luxembourg"><path fill="#EEE" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Z"></path><path fill="#D80027" d="M8 1a7 7 0 0 0-6.563 4.566h13.126A7 7 0 0 0 8 1Z"></path><path fill="#338AF3" d="M8 15a7 7 0 0 0 6.563-4.566H1.437A7 7 0 0 0 8 15Z"></path></svg>';
 
 class IconFlagLuxembourg extends HTMLElement {
     constructor () {

package/dist/IconFlagNetherlands.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--netherlands"><path fill="#EEE" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Z"></path><path fill="#A2001D" d="M8 1a7 7 0 0 0-6.563 4.566h13.126A7 7 0 0 0 8 1Z"></path><path fill="#0052B4" d="M8 15a7 7 0 0 0 6.563-4.566H1.437A7 7 0 0 0 8 15Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--netherlands"><path fill="#EEE" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Z"></path><path fill="#A2001D" d="M8 1a7 7 0 0 0-6.563 4.566h13.126A7 7 0 0 0 8 1Z"></path><path fill="#0052B4" d="M8 15a7 7 0 0 0 6.563-4.566H1.437A7 7 0 0 0 8 15Z"></path></svg>';
 
 class IconFlagNetherlands extends HTMLElement {
     constructor () {

package/dist/IconFlagNewZealand.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--newZealand"><path fill="#0052B4" d="M15 8A7 7 0 1 1 1 8l7-7a7 7 0 0 1 7 7Z"></path><path fill="#EEE" d="M8 1a7 7 0 0 0-7 7h3.653V5.944L6.71 8H8V6.71L5.944 4.652H8V1Zm3.44 2.502-.31.957h-1.003l.813.585-.31.957.81-.593.812.59-.315-.951.813-.588h-1.004l-.309-.954.003-.003Zm1.676 1.982-.309.957h-1.004l.813.586-.31.957.81-.594.812.59-.312-.953.813-.588h-1.004l-.309-.955Zm-3.358.282-.309.954H8.446l.812.588-.31.954.81-.59.812.59-.311-.957.812-.587h-1.004l-.309-.952Zm1.616 3.546-.309.955h-1.003l.812.588-.31.954.81-.59.812.59-.311-.957.812-.588h-1.004l-.309-.951Z"></path><path fill="#D80027" d="M4.54 1.913a7.033 7.033 0 0 0-2.627 2.628V8H3.74V3.74H8V1.913H4.54Zm6.9 2.28-.153.476h-.504l.408.296-.156.476.405-.296.407.296-.156-.476.405-.296h-.5l-.156-.475Zm-6.787.46L8 8v-.861L5.51 4.65h-.858v.003Zm8.46 1.523-.153.476h-.503l.407.295-.156.476.405-.295.41.298-.156-.476.405-.295h-.5l-.156-.476-.003-.003Zm-3.358.279-.153.479H9.1l.407.292-.155.479.404-.296.408.296-.156-.479.405-.292h-.498l-.156-.479h-.003Zm1.616 3.546-.153.479h-.503l.407.293-.155.478.404-.295.405.295-.153-.478.405-.293h-.5l-.157-.479Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--newZealand"><path fill="#0052B4" d="M15 8A7 7 0 1 1 1 8l7-7a7 7 0 0 1 7 7Z"></path><path fill="#EEE" d="M8 1a7 7 0 0 0-7 7h3.653V5.944L6.71 8H8V6.71L5.944 4.652H8V1Zm3.44 2.502-.31.957h-1.003l.813.585-.31.957.81-.593.812.59-.315-.951.813-.588h-1.004l-.309-.954.003-.003Zm1.676 1.982-.309.957h-1.004l.813.586-.31.957.81-.594.812.59-.312-.953.813-.588h-1.004l-.309-.955Zm-3.358.282-.309.954H8.446l.812.588-.31.954.81-.59.812.59-.311-.957.812-.587h-1.004l-.309-.952Zm1.616 3.546-.309.955h-1.003l.812.588-.31.954.81-.59.812.59-.311-.957.812-.588h-1.004l-.309-.951Z"></path><path fill="#D80027" d="M4.54 1.913a7.033 7.033 0 0 0-2.627 2.628V8H3.74V3.74H8V1.913H4.54Zm6.9 2.28-.153.476h-.504l.408.296-.156.476.405-.296.407.296-.156-.476.405-.296h-.5l-.156-.475Zm-6.787.46L8 8v-.861L5.51 4.65h-.858v.003Zm8.46 1.523-.153.476h-.503l.407.295-.156.476.405-.295.41.298-.156-.476.405-.295h-.5l-.156-.476-.003-.003Zm-3.358.279-.153.479H9.1l.407.292-.155.479.404-.296.408.296-.156-.479.405-.292h-.498l-.156-.479h-.003Zm1.616 3.546-.153.479h-.503l.407.293-.155.478.404-.295.405.295-.153-.478.405-.293h-.5l-.157-.479Z"></path></svg>';
 
 class IconFlagNewZealand extends HTMLElement {
     constructor () {

package/dist/IconFlagNorway.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--norway"><path fill="#EEE" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Z"></path><path fill="#D80027" d="M1.241 9.827a7.006 7.006 0 0 0 2.5 3.724V9.827h-2.5Zm6.152 5.146a7 7 0 0 0 7.366-5.146H7.392v5.146h.002Zm7.367-8.8a7 7 0 0 0-7.37-5.146v5.146h7.37ZM3.74 2.45a7.005 7.005 0 0 0-2.499 3.724h2.5V2.45Z"></path><path fill="#0052B4" d="M14.94 7.087H6.477v-5.92a6.954 6.954 0 0 0-1.823.683v5.237H1.06a7.06 7.06 0 0 0 0 1.826h3.593v5.237a6.951 6.951 0 0 0 1.823.683v-5.92h8.463a7.077 7.077 0 0 0 0-1.826Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--norway"><path fill="#EEE" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Z"></path><path fill="#D80027" d="M1.241 9.827a7.006 7.006 0 0 0 2.5 3.724V9.827h-2.5Zm6.152 5.146a7 7 0 0 0 7.366-5.146H7.392v5.146h.002Zm7.367-8.8a7 7 0 0 0-7.37-5.146v5.146h7.37ZM3.74 2.45a7.005 7.005 0 0 0-2.499 3.724h2.5V2.45Z"></path><path fill="#0052B4" d="M14.94 7.087H6.477v-5.92a6.954 6.954 0 0 0-1.823.683v5.237H1.06a7.06 7.06 0 0 0 0 1.826h3.593v5.237a6.951 6.951 0 0 0 1.823.683v-5.92h8.463a7.077 7.077 0 0 0 0-1.826Z"></path></svg>';
 
 class IconFlagNorway extends HTMLElement {
     constructor () {

package/dist/IconFlagPoland.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--poland"><path fill="#EEE" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Z"></path><path fill="#D80027" d="M15 8A7 7 0 1 1 1 8"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--poland"><path fill="#EEE" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Z"></path><path fill="#D80027" d="M15 8A7 7 0 1 1 1 8"></path></svg>';
 
 class IconFlagPoland extends HTMLElement {
     constructor () {

package/dist/IconFlagPortugal.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--portugal"><path fill="#6DA544" d="M1 8a7 7 0 0 0 4.567 6.563L6.174 8l-.607-6.563A7 7 0 0 0 1 8Z"></path><path fill="#D80027" d="M15.002 8a7 7 0 0 0-9.435-6.563v13.126A7.002 7.002 0 0 0 15.002 8Z"></path><path fill="#FFDA44" d="M5.567 10.434a2.434 2.434 0 1 0 0-4.868 2.434 2.434 0 0 0 0 4.868Z"></path><path fill="#D80027" d="M4.197 6.783v1.518a1.369 1.369 0 1 0 2.737 0V6.78H4.199l-.002.002Z"></path><path fill="#EEE" d="M5.567 8.76a.458.458 0 0 1-.456-.456v-.605h.913v.602a.458.458 0 0 1-.457.457v.002Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--portugal"><path fill="#6DA544" d="M1 8a7 7 0 0 0 4.567 6.563L6.174 8l-.607-6.563A7 7 0 0 0 1 8Z"></path><path fill="#D80027" d="M15.002 8a7 7 0 0 0-9.435-6.563v13.126A7.002 7.002 0 0 0 15.002 8Z"></path><path fill="#FFDA44" d="M5.567 10.434a2.434 2.434 0 1 0 0-4.868 2.434 2.434 0 0 0 0 4.868Z"></path><path fill="#D80027" d="M4.197 6.783v1.518a1.369 1.369 0 1 0 2.737 0V6.78H4.199l-.002.002Z"></path><path fill="#EEE" d="M5.567 8.76a.458.458 0 0 1-.456-.456v-.605h.913v.602a.458.458 0 0 1-.457.457v.002Z"></path></svg>';
 
 class IconFlagPortugal extends HTMLElement {
     constructor () {

package/dist/IconFlagRomania.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--romania"><path fill="#FFDA44" d="M7.997 1a6.91 6.91 0 0 0-2.433.438L1.244 8l4.32 6.563a6.984 6.984 0 0 0 4.867 0L14.751 8l-4.32-6.563A6.986 6.986 0 0 0 7.997 1Z"></path><path fill="#D80027" d="M14.997 8a7 7 0 0 0-4.566-6.563v13.126A7 7 0 0 0 14.997 8Z"></path><path fill="#0052B4" d="M5.564 14.563V1.437a7 7 0 0 0 0 13.126Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--romania"><path fill="#FFDA44" d="M7.997 1a6.91 6.91 0 0 0-2.433.438L1.244 8l4.32 6.563a6.984 6.984 0 0 0 4.867 0L14.751 8l-4.32-6.563A6.986 6.986 0 0 0 7.997 1Z"></path><path fill="#D80027" d="M14.997 8a7 7 0 0 0-4.566-6.563v13.126A7 7 0 0 0 14.997 8Z"></path><path fill="#0052B4" d="M5.564 14.563V1.437a7 7 0 0 0 0 13.126Z"></path></svg>';
 
 class IconFlagRomania extends HTMLElement {
     constructor () {

package/dist/IconFlagSlovakia.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--slovakia"><path fill="#fff" d="M2.745 5.602v.444c-.007.575-.028 1.15-.017 1.725.018.98.36 1.84 1.006 2.577l.03.04c.105.105.207.213.316.314.449.418.962.744 1.508 1.018.058.029.117.055.173.086.036.02.066.018.103 0 .737-.352 1.416-.787 1.972-1.395a.13.13 0 0 1 .013-.012l.012-.01.104-.127a3.902 3.902 0 0 0 .898-2.03c.023-.172.035-.345.036-.52-.002-.577-.012-1.155-.02-1.733 0-.101-.007-.202-.01-.303v-.074h5.71a7.003 7.003 0 0 0-13.157 0h1.323Zm.202 1.111c.002-.309.01-.617.024-.926.019-.443.046-.885.07-1.328a.459.459 0 0 1 .009-.05h5.529c.011.146.025.288.033.43.055.93.071 1.861.073 2.793a3.81 3.81 0 0 1-.377 1.71c-.058.118-.13.228-.195.343-.024.04-.047.083-.073.122A4.565 4.565 0 0 1 7 10.878a7.024 7.024 0 0 1-1.135.689c-.035.017-.064.021-.102.003-.577-.284-1.116-.624-1.585-1.068a4.176 4.176 0 0 1-.641-.77 1.783 1.783 0 0 1-.015-.025l-.012-.023a2.601 2.601 0 0 1-.242-.442 5.232 5.232 0 0 1-.065-.155 3.326 3.326 0 0 1-.25-1.12c-.013-.418-.01-.836-.007-1.254Z"></path><path fill="#D80027" d="m7.861 10.389-.012.01a.13.13 0 0 0-.013.012c-.556.608-1.235 1.043-1.972 1.396-.037.017-.067.018-.103-.001-.056-.03-.115-.057-.173-.086a6.379 6.379 0 0 1-1.508-1.018c-.109-.101-.211-.209-.317-.313l-.084.002h-2.26a7.003 7.003 0 0 0 13.162 0H7.98l-.118-.002Z"></path><path fill="#0052B4" d="M3.763 10.389c-.01-.014-.018-.028-.03-.04A3.913 3.913 0 0 1 2.729 7.77c-.011-.575.01-1.15.017-1.725v-.444H1.422a7.03 7.03 0 0 0-.003 4.79h2.26l.084-.003Z"></path><path fill="#0052B4" d="M14.58 5.602H8.867v.074c.004.1.01.202.011.303.008.578.018 1.156.02 1.734 0 .174-.013.347-.036.52a3.876 3.876 0 0 1-.898 2.03c-.034.041-.07.083-.104.126l.118.002h6.602a7.03 7.03 0 0 0-.002-4.789Z"></path><path fill="#D80027" d="M3.204 9.087a5.232 5.232 0 0 0 .094.22c.06.13.132.257.213.377.04-.062.08-.125.124-.184.044-.06.093-.117.147-.168a.659.659 0 0 1 .339-.19.713.713 0 0 1 .722.29c.019.024.035.05.056.078a2.755 2.755 0 0 1 .19-.344 1.658 1.658 0 0 1 .182-.22 1.12 1.12 0 0 1 .292-.207V7.594c-.51-.01-1.005.015-1.494.164v-.853c.485.152.981.176 1.487.163v-.771a3.44 3.44 0 0 0-1.176.164v-.856c.336.11.682.162 1.034.167h.14a3.202 3.202 0 0 0-.052-.557c-.03-.182-.063-.363-.094-.541h.812c-.07.359-.142.72-.151 1.098.406.008.795-.044 1.175-.166v.854a3.493 3.493 0 0 0-1.171-.164v.772c.502.014.998-.01 1.486-.164v.854c-.484-.149-.98-.172-1.49-.165L6.064 8.74c.324.16.506.446.66.768.024-.033.04-.058.059-.081a.715.715 0 0 1 .726-.284.645.645 0 0 1 .32.177c.115.105.202.233.283.365.065-.115.137-.225.195-.343a3.81 3.81 0 0 0 .377-1.71 48.631 48.631 0 0 0-.073-2.793c-.008-.142-.022-.284-.033-.43h-5.53a.459.459 0 0 0-.008.05c-.024.443-.051.885-.07 1.328-.014.309-.022.617-.024.926-.003.418-.006.836.008 1.253.013.388.106.762.25 1.121Z"></path><path fill="#0052B4" d="M7.83 9.32a.645.645 0 0 0-.32-.177.715.715 0 0 0-.726.284l-.06.08c-.153-.321-.335-.606-.659-.767a.734.734 0 0 0-.355-.036c-.05.01-.098.023-.147.035a1.12 1.12 0 0 0-.357.276 1.465 1.465 0 0 0-.152.205c-.057.093-.11.19-.155.29-.02-.029-.037-.054-.056-.078a.713.713 0 0 0-.722-.29.659.659 0 0 0-.34.19 1.184 1.184 0 0 0-.146.168c-.043.059-.084.122-.124.184l.012.023a1.783 1.783 0 0 0 .033.056c.178.27.387.518.623.739.469.444 1.008.784 1.585 1.068.038.018.067.014.102-.003.399-.197.78-.42 1.135-.689A4.565 4.565 0 0 0 8.04 9.807c.026-.04.049-.082.073-.122a1.643 1.643 0 0 0-.283-.365Z"></path><path fill="#FFFDFD" d="M5.71 8.704a.734.734 0 0 1 .355.036l.003-1.147c.51-.007 1.007.016 1.49.165v-.854c-.487.154-.983.178-1.485.164v-.772c.396-.012.792.043 1.17.164v-.854c-.379.122-.768.174-1.174.166.01-.378.081-.74.15-1.098h-.81c.03.178.063.36.093.541.029.182.053.365.051.557h-.139a3.484 3.484 0 0 1-1.034-.167v.856a3.44 3.44 0 0 1 1.176-.164v.771c-.506.013-1.002-.01-1.487-.163v.853c.49-.149.985-.173 1.494-.164V8.74c.049-.012.097-.025.147-.035Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--slovakia"><path fill="#fff" d="M2.745 5.602v.444c-.007.575-.028 1.15-.017 1.725.018.98.36 1.84 1.006 2.577l.03.04c.105.105.207.213.316.314.449.418.962.744 1.508 1.018.058.029.117.055.173.086.036.02.066.018.103 0 .737-.352 1.416-.787 1.972-1.395a.13.13 0 0 1 .013-.012l.012-.01.104-.127a3.902 3.902 0 0 0 .898-2.03c.023-.172.035-.345.036-.52-.002-.577-.012-1.155-.02-1.733 0-.101-.007-.202-.01-.303v-.074h5.71a7.003 7.003 0 0 0-13.157 0h1.323Zm.202 1.111c.002-.309.01-.617.024-.926.019-.443.046-.885.07-1.328a.459.459 0 0 1 .009-.05h5.529c.011.146.025.288.033.43.055.93.071 1.861.073 2.793a3.81 3.81 0 0 1-.377 1.71c-.058.118-.13.228-.195.343-.024.04-.047.083-.073.122A4.565 4.565 0 0 1 7 10.878a7.024 7.024 0 0 1-1.135.689c-.035.017-.064.021-.102.003-.577-.284-1.116-.624-1.585-1.068a4.176 4.176 0 0 1-.641-.77 1.783 1.783 0 0 1-.015-.025l-.012-.023a2.601 2.601 0 0 1-.242-.442 5.232 5.232 0 0 1-.065-.155 3.326 3.326 0 0 1-.25-1.12c-.013-.418-.01-.836-.007-1.254Z"></path><path fill="#D80027" d="m7.861 10.389-.012.01a.13.13 0 0 0-.013.012c-.556.608-1.235 1.043-1.972 1.396-.037.017-.067.018-.103-.001-.056-.03-.115-.057-.173-.086a6.379 6.379 0 0 1-1.508-1.018c-.109-.101-.211-.209-.317-.313l-.084.002h-2.26a7.003 7.003 0 0 0 13.162 0H7.98l-.118-.002Z"></path><path fill="#0052B4" d="M3.763 10.389c-.01-.014-.018-.028-.03-.04A3.913 3.913 0 0 1 2.729 7.77c-.011-.575.01-1.15.017-1.725v-.444H1.422a7.03 7.03 0 0 0-.003 4.79h2.26l.084-.003Z"></path><path fill="#0052B4" d="M14.58 5.602H8.867v.074c.004.1.01.202.011.303.008.578.018 1.156.02 1.734 0 .174-.013.347-.036.52a3.876 3.876 0 0 1-.898 2.03c-.034.041-.07.083-.104.126l.118.002h6.602a7.03 7.03 0 0 0-.002-4.789Z"></path><path fill="#D80027" d="M3.204 9.087a5.232 5.232 0 0 0 .094.22c.06.13.132.257.213.377.04-.062.08-.125.124-.184.044-.06.093-.117.147-.168a.659.659 0 0 1 .339-.19.713.713 0 0 1 .722.29c.019.024.035.05.056.078a2.755 2.755 0 0 1 .19-.344 1.658 1.658 0 0 1 .182-.22 1.12 1.12 0 0 1 .292-.207V7.594c-.51-.01-1.005.015-1.494.164v-.853c.485.152.981.176 1.487.163v-.771a3.44 3.44 0 0 0-1.176.164v-.856c.336.11.682.162 1.034.167h.14a3.202 3.202 0 0 0-.052-.557c-.03-.182-.063-.363-.094-.541h.812c-.07.359-.142.72-.151 1.098.406.008.795-.044 1.175-.166v.854a3.493 3.493 0 0 0-1.171-.164v.772c.502.014.998-.01 1.486-.164v.854c-.484-.149-.98-.172-1.49-.165L6.064 8.74c.324.16.506.446.66.768.024-.033.04-.058.059-.081a.715.715 0 0 1 .726-.284.645.645 0 0 1 .32.177c.115.105.202.233.283.365.065-.115.137-.225.195-.343a3.81 3.81 0 0 0 .377-1.71 48.631 48.631 0 0 0-.073-2.793c-.008-.142-.022-.284-.033-.43h-5.53a.459.459 0 0 0-.008.05c-.024.443-.051.885-.07 1.328-.014.309-.022.617-.024.926-.003.418-.006.836.008 1.253.013.388.106.762.25 1.121Z"></path><path fill="#0052B4" d="M7.83 9.32a.645.645 0 0 0-.32-.177.715.715 0 0 0-.726.284l-.06.08c-.153-.321-.335-.606-.659-.767a.734.734 0 0 0-.355-.036c-.05.01-.098.023-.147.035a1.12 1.12 0 0 0-.357.276 1.465 1.465 0 0 0-.152.205c-.057.093-.11.19-.155.29-.02-.029-.037-.054-.056-.078a.713.713 0 0 0-.722-.29.659.659 0 0 0-.34.19 1.184 1.184 0 0 0-.146.168c-.043.059-.084.122-.124.184l.012.023a1.783 1.783 0 0 0 .033.056c.178.27.387.518.623.739.469.444 1.008.784 1.585 1.068.038.018.067.014.102-.003.399-.197.78-.42 1.135-.689A4.565 4.565 0 0 0 8.04 9.807c.026-.04.049-.082.073-.122a1.643 1.643 0 0 0-.283-.365Z"></path><path fill="#FFFDFD" d="M5.71 8.704a.734.734 0 0 1 .355.036l.003-1.147c.51-.007 1.007.016 1.49.165v-.854c-.487.154-.983.178-1.485.164v-.772c.396-.012.792.043 1.17.164v-.854c-.379.122-.768.174-1.174.166.01-.378.081-.74.15-1.098h-.81c.03.178.063.36.093.541.029.182.053.365.051.557h-.139a3.484 3.484 0 0 1-1.034-.167v.856a3.44 3.44 0 0 1 1.176-.164v.771c-.506.013-1.002-.01-1.487-.163v.853c.49-.149.985-.173 1.494-.164V8.74c.049-.012.097-.025.147-.035Z"></path></svg>';
 
 class IconFlagSlovakia extends HTMLElement {
     constructor () {

package/dist/IconFlagSpain.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--spain"><path fill="#FFDA44" d="M1 8c0 .856.153 1.677.438 2.434l6.562.61 6.562-.61a6.99 6.99 0 0 0 0-4.868L8 4.956l-6.563.61A6.99 6.99 0 0 0 1 8Z"></path><path fill="#D80027" d="M14.562 5.566A7.001 7.001 0 0 0 4.003 2.254a7.002 7.002 0 0 0-2.566 3.312h13.125ZM1.438 10.434A7.002 7.002 0 0 0 8 15a6.999 6.999 0 0 0 6.562-4.566H1.438Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--spain"><path fill="#FFDA44" d="M1 8c0 .856.153 1.677.438 2.434l6.562.61 6.562-.61a6.99 6.99 0 0 0 0-4.868L8 4.956l-6.563.61A6.99 6.99 0 0 0 1 8Z"></path><path fill="#D80027" d="M14.562 5.566A7.001 7.001 0 0 0 4.003 2.254a7.002 7.002 0 0 0-2.566 3.312h13.125ZM1.438 10.434A7.002 7.002 0 0 0 8 15a6.999 6.999 0 0 0 6.562-4.566H1.438Z"></path></svg>';
 
 class IconFlagSpain extends HTMLElement {
     constructor () {

package/dist/IconFlagSwitzerland.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--switzerland"><path fill="#D80027" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Z"></path><path fill="#EEE" d="M11.653 6.783H9.22V4.35H6.783v2.433H4.35v2.434h2.433v2.433h2.434V9.217h2.433l.003-2.434Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--switzerland"><path fill="#D80027" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Z"></path><path fill="#EEE" d="M11.653 6.783H9.22V4.35H6.783v2.433H4.35v2.434h2.433v2.433h2.434V9.217h2.433l.003-2.434Z"></path></svg>';
 
 class IconFlagSwitzerland extends HTMLElement {
     constructor () {

package/dist/IconFlagUnitedKingdom.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--unitedKingdom"><path fill="#EEE" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Z"></path><path fill="#0052B4" d="M2.45 3.737A6.973 6.973 0 0 0 1.24 6.173h3.642L2.45 3.74v-.003Zm12.31 2.436a6.973 6.973 0 0 0-1.206-2.433L11.12 6.173h3.64ZM1.24 9.827c.239.882.648 1.709 1.206 2.433L4.88 9.827H1.241Zm11.02-7.38a6.972 6.972 0 0 0-2.434-1.204v3.64l2.434-2.434v-.003ZM3.74 13.553a6.973 6.973 0 0 0 2.436 1.203v-3.64L3.74 13.553ZM6.173 1.24A6.973 6.973 0 0 0 3.74 2.446l2.434 2.437V1.24Zm3.653 13.518a6.971 6.971 0 0 0 2.434-1.206L9.826 11.12v3.64Zm1.29-4.932 2.434 2.433a6.972 6.972 0 0 0 1.209-2.433h-3.643Z"></path><path fill="#D80027" d="M14.94 7.087H8.913V1.06a7.07 7.07 0 0 0-1.826 0v6.027H1.06a7.07 7.07 0 0 0 0 1.826h6.027v6.027c.606.079 1.22.079 1.826 0V8.913h6.027a7.061 7.061 0 0 0 0-1.826Z"></path><path fill="#D80027" d="m9.827 9.827 3.122 3.122c.143-.143.28-.293.41-.448l-2.671-2.674h-.861Zm-3.654 0-3.122 3.122c.143.143.293.28.448.41l2.674-2.671v-.861Zm0-3.654L3.051 3.051a7.02 7.02 0 0 0-.41.448l2.671 2.674h.861Zm3.654 0 3.122-3.122a7.027 7.027 0 0 0-.448-.41L9.827 5.312v.861Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--unitedKingdom"><path fill="#EEE" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Z"></path><path fill="#0052B4" d="M2.45 3.737A6.973 6.973 0 0 0 1.24 6.173h3.642L2.45 3.74v-.003Zm12.31 2.436a6.973 6.973 0 0 0-1.206-2.433L11.12 6.173h3.64ZM1.24 9.827c.239.882.648 1.709 1.206 2.433L4.88 9.827H1.241Zm11.02-7.38a6.972 6.972 0 0 0-2.434-1.204v3.64l2.434-2.434v-.003ZM3.74 13.553a6.973 6.973 0 0 0 2.436 1.203v-3.64L3.74 13.553ZM6.173 1.24A6.973 6.973 0 0 0 3.74 2.446l2.434 2.437V1.24Zm3.653 13.518a6.971 6.971 0 0 0 2.434-1.206L9.826 11.12v3.64Zm1.29-4.932 2.434 2.433a6.972 6.972 0 0 0 1.209-2.433h-3.643Z"></path><path fill="#D80027" d="M14.94 7.087H8.913V1.06a7.07 7.07 0 0 0-1.826 0v6.027H1.06a7.07 7.07 0 0 0 0 1.826h6.027v6.027c.606.079 1.22.079 1.826 0V8.913h6.027a7.061 7.061 0 0 0 0-1.826Z"></path><path fill="#D80027" d="m9.827 9.827 3.122 3.122c.143-.143.28-.293.41-.448l-2.671-2.674h-.861Zm-3.654 0-3.122 3.122c.143.143.293.28.448.41l2.674-2.671v-.861Zm0-3.654L3.051 3.051a7.02 7.02 0 0 0-.41.448l2.671 2.674h.861Zm3.654 0 3.122-3.122a7.027 7.027 0 0 0-.448-.41L9.827 5.312v.861Z"></path></svg>';
 
 class IconFlagUnitedKingdom extends HTMLElement {
     constructor () {