@justeattakeaway/pie-icons-webc 0.3.0 → 0.4.0

package/dist/IconAlcohol.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--alcohol"><path d="M6.4 5.28V2.576c0-.419-.17-.82-.472-1.115A1.624 1.624 0 0 0 4.791 1h-.68c-.426 0-.835.166-1.137.462a1.561 1.561 0 0 0-.47 1.115v2.702a2.11 2.11 0 0 1-.534 1.45 4.613 4.613 0 0 0-.964 3.055v3.603c-.015.401.132.792.409 1.087.277.295.661.471 1.07.49h3.933a1.566 1.566 0 0 0 1.07-.49c.277-.295.424-.686.41-1.087V9.784a4.611 4.611 0 0 0-.92-3.054A2.112 2.112 0 0 1 6.4 5.28ZM3.881 2.576c0-.06.024-.117.067-.16a.232.232 0 0 1 .162-.066h.68c.061 0 .12.024.163.066.043.043.067.1.067.16v1.126h-1.14V2.577Zm1.14 2.477v.225a3.426 3.426 0 0 0 .77 2.19c.168.222.313.46.433.711H2.678c.12-.25.265-.489.432-.712a3.426 3.426 0 0 0 .772-2.189v-.225h1.14Zm1.497 8.333a.257.257 0 0 1-.101.226H2.485a.262.262 0 0 1-.101-.226V9.56H6.51v.225l.009 3.603ZM8.605 3.081v4c0 .713.249 1.405.705 1.96a3.198 3.198 0 0 0 1.803 1.094v3.514h-1.46V15h4.3v-1.351h-1.461v-3.514a3.198 3.198 0 0 0 1.803-1.093A3.088 3.088 0 0 0 15 7.082v-4H8.605Zm5.035 4c0 .478-.194.936-.538 1.274a1.856 1.856 0 0 1-1.3.528c-.487 0-.954-.19-1.3-.528a1.784 1.784 0 0 1-.537-1.274V4.432h3.675v2.65Z"></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--alcohol"><path d="M6.4 5.28V2.576c0-.419-.17-.82-.472-1.115A1.624 1.624 0 0 0 4.791 1h-.68c-.426 0-.835.166-1.137.462a1.561 1.561 0 0 0-.47 1.115v2.702a2.11 2.11 0 0 1-.534 1.45 4.613 4.613 0 0 0-.964 3.055v3.603c-.015.401.132.792.409 1.087.277.295.661.471 1.07.49h3.933a1.566 1.566 0 0 0 1.07-.49c.277-.295.424-.686.41-1.087V9.784a4.611 4.611 0 0 0-.92-3.054A2.112 2.112 0 0 1 6.4 5.28ZM3.881 2.576c0-.06.024-.117.067-.16a.232.232 0 0 1 .162-.066h.68c.061 0 .12.024.163.066.043.043.067.1.067.16v1.126h-1.14V2.577Zm1.14 2.477v.225a3.426 3.426 0 0 0 .77 2.19c.168.222.313.46.433.711H2.678c.12-.25.265-.489.432-.712a3.426 3.426 0 0 0 .772-2.189v-.225h1.14Zm1.497 8.333a.257.257 0 0 1-.101.226H2.485a.262.262 0 0 1-.101-.226V9.56H6.51v.225l.009 3.603ZM8.605 3.081v4c0 .713.249 1.405.705 1.96a3.198 3.198 0 0 0 1.803 1.094v3.514h-1.46V15h4.3v-1.351h-1.461v-3.514a3.198 3.198 0 0 0 1.803-1.093A3.088 3.088 0 0 0 15 7.082v-4H8.605Zm5.035 4c0 .478-.194.936-.538 1.274a1.856 1.856 0 0 1-1.3.528c-.487 0-.954-.19-1.3-.528a1.784 1.784 0 0 1-.537-1.274V4.432h3.675v2.65Z"></path></svg>';
 
 class IconAlcohol extends HTMLElement {
     constructor () {

package/dist/IconAlcoholFilled.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--alcoholFilled"><path d="M6.396 5.28V2.576c0-.419-.17-.82-.47-1.115A1.623 1.623 0 0 0 4.788 1h-.68c-.426 0-.834.166-1.136.462-.301.295-.47.696-.47 1.115v2.702a2.111 2.111 0 0 1-.533 1.424 4.668 4.668 0 0 0-.964 3.08v3.604c-.015.401.132.792.409 1.087.277.295.66.471 1.07.49h3.93a1.565 1.565 0 0 0 1.069-.49c.277-.295.424-.686.409-1.087V9.784a4.613 4.613 0 0 0-.918-3.054 2.113 2.113 0 0 1-.579-1.45ZM5.02 5.026v.252c-.008.797.268 1.571.78 2.19.161.225.302.463.423.711H2.677c.124-.248.268-.487.432-.712A3.427 3.427 0 0 0 3.88 5.28v-.225l1.139-.027Z"></path><path d="M8.6 3.081v4c0 .713.249 1.405.705 1.96a3.196 3.196 0 0 0 1.802 1.094v3.514h-1.46V15h4.297v-1.351h-1.46v-3.514a3.205 3.205 0 0 0 1.806-1.093 3.098 3.098 0 0 0 .71-1.96v-4H8.6Z"></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--alcoholFilled"><path d="M6.396 5.28V2.576c0-.419-.17-.82-.47-1.115A1.623 1.623 0 0 0 4.788 1h-.68c-.426 0-.834.166-1.136.462-.301.295-.47.696-.47 1.115v2.702a2.111 2.111 0 0 1-.533 1.424 4.668 4.668 0 0 0-.964 3.08v3.604c-.015.401.132.792.409 1.087.277.295.66.471 1.07.49h3.93a1.565 1.565 0 0 0 1.069-.49c.277-.295.424-.686.409-1.087V9.784a4.613 4.613 0 0 0-.918-3.054 2.113 2.113 0 0 1-.579-1.45ZM5.02 5.026v.252c-.008.797.268 1.571.78 2.19.161.225.302.463.423.711H2.677c.124-.248.268-.487.432-.712A3.427 3.427 0 0 0 3.88 5.28v-.225l1.139-.027Z"></path><path d="M8.6 3.081v4c0 .713.249 1.405.705 1.96a3.196 3.196 0 0 0 1.802 1.094v3.514h-1.46V15h4.297v-1.351h-1.46v-3.514a3.205 3.205 0 0 0 1.806-1.093 3.098 3.098 0 0 0 .71-1.96v-4H8.6Z"></path></svg>';
 
 class IconAlcoholFilled extends HTMLElement {
     constructor () {

package/dist/IconAlcoholFilledLarge.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--alcoholFilledLarge"><path d="M17.444 6.918v7.253a5.67 5.67 0 0 0 4.786 5.583v7.621h-3.22v1.75h8.199v-1.75H23.98v-7.621a5.662 5.662 0 0 0 4.786-5.583V6.918H17.444Zm9.572 4.278c-2.406.691-3.325.394-4.375 0a7 7 0 0 0-3.5-.411V8.668h7.823l.052 2.528Z"></path><path d="M14.679 16a10.049 10.049 0 0 0-1.208-2.188 5.005 5.005 0 0 1-1.024-2.187 5.82 5.82 0 0 1-.06-.822V5.5A2.625 2.625 0 0 0 9.76 2.875H8.466A2.625 2.625 0 0 0 5.841 5.5v5.303c.001.275-.022.55-.07.822a5.005 5.005 0 0 1-1.024 2.188A9.696 9.696 0 0 0 3.55 16a8.751 8.751 0 0 0-.438 1.75c-.08.58-.122 1.165-.122 1.75v7a2.511 2.511 0 0 0 2.371 2.625h7.499a2.52 2.52 0 0 0 2.38-2.625v-7c.007-.585-.031-1.17-.114-1.75a8.262 8.262 0 0 0-.446-1.75ZM6.19 14.81a6.484 6.484 0 0 0 1.4-4.008v-.927h3.045v.928c0 .274.015.549.044.822a6.484 6.484 0 0 0 1.356 3.185c.271.38.517.777.735 1.19H5.5a9.41 9.41 0 0 1 .691-1.19Z"></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--alcoholFilledLarge"><path d="M17.444 6.918v7.253a5.67 5.67 0 0 0 4.786 5.583v7.621h-3.22v1.75h8.199v-1.75H23.98v-7.621a5.662 5.662 0 0 0 4.786-5.583V6.918H17.444Zm9.572 4.278c-2.406.691-3.325.394-4.375 0a7 7 0 0 0-3.5-.411V8.668h7.823l.052 2.528Z"></path><path d="M14.679 16a10.049 10.049 0 0 0-1.208-2.188 5.005 5.005 0 0 1-1.024-2.187 5.82 5.82 0 0 1-.06-.822V5.5A2.625 2.625 0 0 0 9.76 2.875H8.466A2.625 2.625 0 0 0 5.841 5.5v5.303c.001.275-.022.55-.07.822a5.005 5.005 0 0 1-1.024 2.188A9.696 9.696 0 0 0 3.55 16a8.751 8.751 0 0 0-.438 1.75c-.08.58-.122 1.165-.122 1.75v7a2.511 2.511 0 0 0 2.371 2.625h7.499a2.52 2.52 0 0 0 2.38-2.625v-7c.007-.585-.031-1.17-.114-1.75a8.262 8.262 0 0 0-.446-1.75ZM6.19 14.81a6.484 6.484 0 0 0 1.4-4.008v-.927h3.045v.928c0 .274.015.549.044.822a6.484 6.484 0 0 0 1.356 3.185c.271.38.517.777.735 1.19H5.5a9.41 9.41 0 0 1 .691-1.19Z"></path></svg>';
 
 class IconAlcoholFilledLarge extends HTMLElement {
     constructor () {

package/dist/IconAlcoholLarge.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--alcoholLarge"><path d="M12.386 10.811V5.5a2.625 2.625 0 0 0-2.625-2.625H8.466A2.625 2.625 0 0 0 5.841 5.5v5.311a4.655 4.655 0 0 1-1.085 3.01 8.671 8.671 0 0 0-1.75 5.679v7a2.52 2.52 0 0 0 2.38 2.625h7.499a2.511 2.511 0 0 0 2.371-2.625v-7a8.75 8.75 0 0 0-1.75-5.679 4.612 4.612 0 0 1-1.12-3.01ZM7.591 5.5a.875.875 0 0 1 .875-.875H9.77a.875.875 0 0 1 .875.875v2.625H7.591V5.5Zm-1.4 9.31a6.248 6.248 0 0 0 1.4-3.999v-.936h3.045v.936a6.248 6.248 0 0 0 1.4 3.999c.27.38.516.778.735 1.19H5.5c.184-.429.438-.805.691-1.19ZM13.49 26.5c0 .473-.28.875-.622.875H5.37c-.341 0-.63-.402-.63-.875v-7c-.005-.586.042-1.172.14-1.75h8.496c.098.578.145 1.164.14 1.75l-.026 7Zm15.286-12.329V6.918H17.453v7.253a5.679 5.679 0 0 0 4.786 5.591v7.613h-3.22v1.75h8.199v-1.75h-3.23v-7.613a5.67 5.67 0 0 0 4.787-5.59Zm-1.75-5.503v2.528c-2.406.7-3.325.403-4.375.044a6.825 6.825 0 0 0-3.5-.42V8.668h7.875Zm-7.822 5.503V12.58a5.127 5.127 0 0 1 2.896.315 6.93 6.93 0 0 0 2.45.481 10.232 10.232 0 0 0 2.476-.359v1.155a3.911 3.911 0 1 1-7.822 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--alcoholLarge"><path d="M12.386 10.811V5.5a2.625 2.625 0 0 0-2.625-2.625H8.466A2.625 2.625 0 0 0 5.841 5.5v5.311a4.655 4.655 0 0 1-1.085 3.01 8.671 8.671 0 0 0-1.75 5.679v7a2.52 2.52 0 0 0 2.38 2.625h7.499a2.511 2.511 0 0 0 2.371-2.625v-7a8.75 8.75 0 0 0-1.75-5.679 4.612 4.612 0 0 1-1.12-3.01ZM7.591 5.5a.875.875 0 0 1 .875-.875H9.77a.875.875 0 0 1 .875.875v2.625H7.591V5.5Zm-1.4 9.31a6.248 6.248 0 0 0 1.4-3.999v-.936h3.045v.936a6.248 6.248 0 0 0 1.4 3.999c.27.38.516.778.735 1.19H5.5c.184-.429.438-.805.691-1.19ZM13.49 26.5c0 .473-.28.875-.622.875H5.37c-.341 0-.63-.402-.63-.875v-7c-.005-.586.042-1.172.14-1.75h8.496c.098.578.145 1.164.14 1.75l-.026 7Zm15.286-12.329V6.918H17.453v7.253a5.679 5.679 0 0 0 4.786 5.591v7.613h-3.22v1.75h8.199v-1.75h-3.23v-7.613a5.67 5.67 0 0 0 4.787-5.59Zm-1.75-5.503v2.528c-2.406.7-3.325.403-4.375.044a6.825 6.825 0 0 0-3.5-.42V8.668h7.875Zm-7.822 5.503V12.58a5.127 5.127 0 0 1 2.896.315 6.93 6.93 0 0 0 2.45.481 10.232 10.232 0 0 0 2.476-.359v1.155a3.911 3.911 0 1 1-7.822 0Z"></path></svg>';
 
 class IconAlcoholLarge extends HTMLElement {
     constructor () {

package/dist/IconAlertCircle.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--alertCircle"><path d="M8 14.781A6.782 6.782 0 1 1 14.781 8 6.79 6.79 0 0 1 8 14.781Zm0-12.25A5.469 5.469 0 1 0 8 13.47 5.469 5.469 0 0 0 8 2.53Z"></path><path d="M7.055 4.631a3.5 3.5 0 0 1 1.89 0l-.481 4.244h-.928l-.481-4.244Zm1.82 5.994a.875.875 0 1 1-1.75 0 .875.875 0 0 1 1.75 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--alertCircle"><path d="M8 14.781A6.782 6.782 0 1 1 14.781 8 6.79 6.79 0 0 1 8 14.781Zm0-12.25A5.469 5.469 0 1 0 8 13.47 5.469 5.469 0 0 0 8 2.53Z"></path><path d="M7.055 4.631a3.5 3.5 0 0 1 1.89 0l-.481 4.244h-.928l-.481-4.244Zm1.82 5.994a.875.875 0 1 1-1.75 0 .875.875 0 0 1 1.75 0Z"></path></svg>';
 
 class IconAlertCircle extends HTMLElement {
     constructor () {

package/dist/IconAlertCircleFilled.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--alertCircleFilled"><path d="M8 1.219A6.781 6.781 0 1 0 14.781 8 6.79 6.79 0 0 0 8 1.219ZM8 11.5a.875.875 0 1 1 0-1.75.875.875 0 0 1 0 1.75Zm.464-2.625h-.928l-.481-4.244a3.5 3.5 0 0 1 1.89 0l-.481 4.244Z"></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--alertCircleFilled"><path d="M8 1.219A6.781 6.781 0 1 0 14.781 8 6.79 6.79 0 0 0 8 1.219ZM8 11.5a.875.875 0 1 1 0-1.75.875.875 0 0 1 0 1.75Zm.464-2.625h-.928l-.481-4.244a3.5 3.5 0 0 1 1.89 0l-.481 4.244Z"></path></svg>';
 
 class IconAlertCircleFilled extends HTMLElement {
     constructor () {

package/dist/IconAlertCircleFilledLarge.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--alertCircleFilledLarge"><path d="M16 3.75a12.25 12.25 0 1 0 0 24.5 12.25 12.25 0 0 0 0-24.5Zm-1.313 17.063a1.313 1.313 0 1 1 2.626 0 1.313 1.313 0 0 1-2.625 0Zm2.022-3.063H15.29l-.744-7.639a4.586 4.586 0 0 1 2.905 0l-.743 7.639Z"></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--alertCircleFilledLarge"><path d="M16 3.75a12.25 12.25 0 1 0 0 24.5 12.25 12.25 0 0 0 0-24.5Zm-1.313 17.063a1.313 1.313 0 1 1 2.626 0 1.313 1.313 0 0 1-2.625 0Zm2.022-3.063H15.29l-.744-7.639a4.586 4.586 0 0 1 2.905 0l-.743 7.639Z"></path></svg>';
 
 class IconAlertCircleFilledLarge extends HTMLElement {
     constructor () {

package/dist/IconAlertCircleLarge.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--alertCircleLarge"><path d="M16 28.25a12.25 12.25 0 1 1 0-24.5 12.25 12.25 0 0 1 0 24.5ZM16 5.5a10.5 10.5 0 1 0 0 21 10.5 10.5 0 0 0 0-21Z"></path><path d="M14.547 10.111a4.584 4.584 0 0 1 2.905 0l-.743 7.639H15.29l-.744-7.639Zm2.765 10.701a1.313 1.313 0 1 1-2.625 0 1.313 1.313 0 0 1 2.626 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--alertCircleLarge"><path d="M16 28.25a12.25 12.25 0 1 1 0-24.5 12.25 12.25 0 0 1 0 24.5ZM16 5.5a10.5 10.5 0 1 0 0 21 10.5 10.5 0 0 0 0-21Z"></path><path d="M14.547 10.111a4.584 4.584 0 0 1 2.905 0l-.743 7.639H15.29l-.744-7.639Zm2.765 10.701a1.313 1.313 0 1 1-2.625 0 1.313 1.313 0 0 1 2.626 0Z"></path></svg>';
 
 class IconAlertCircleLarge extends HTMLElement {
     constructor () {

package/dist/IconAlertTriangle.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--alertTriangle"><path d="M8.656 5.375H7.344V8h1.312V5.375Z"></path><path d="M8 10.625a.875.875 0 1 0 0-1.75.875.875 0 0 0 0 1.75Z"></path><path d="M13.408 13.031H2.591a1.496 1.496 0 0 1-1.33-.796 1.593 1.593 0 0 1 .044-1.61l5.408-8.662A1.505 1.505 0 0 1 8 1.219a1.505 1.505 0 0 1 1.286.726l5.408 8.68a1.593 1.593 0 0 1 0 1.627 1.496 1.496 0 0 1-1.287.78ZM8 2.531a.192.192 0 0 0-.175.105l-5.408 8.671a.297.297 0 0 0 0 .298.2.2 0 0 0 .184.114h10.806a.2.2 0 0 0 .184-.114.297.297 0 0 0 0-.298l-5.416-8.67A.192.192 0 0 0 8 2.53Z"></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--alertTriangle"><path d="M8.656 5.375H7.344V8h1.312V5.375Z"></path><path d="M8 10.625a.875.875 0 1 0 0-1.75.875.875 0 0 0 0 1.75Z"></path><path d="M13.408 13.031H2.591a1.496 1.496 0 0 1-1.33-.796 1.593 1.593 0 0 1 .044-1.61l5.408-8.662A1.505 1.505 0 0 1 8 1.219a1.505 1.505 0 0 1 1.286.726l5.408 8.68a1.593 1.593 0 0 1 0 1.627 1.496 1.496 0 0 1-1.287.78ZM8 2.531a.192.192 0 0 0-.175.105l-5.408 8.671a.297.297 0 0 0 0 .298.2.2 0 0 0 .184.114h10.806a.2.2 0 0 0 .184-.114.297.297 0 0 0 0-.298l-5.416-8.67A.192.192 0 0 0 8 2.53Z"></path></svg>';
 
 class IconAlertTriangle extends HTMLElement {
     constructor () {

package/dist/IconAlertTriangleFilled.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--alertTriangleFilled"><path d="m14.694 10.625-5.408-8.68a1.505 1.505 0 0 0-2.572 0l-5.408 8.68a1.592 1.592 0 0 0 0 1.627 1.497 1.497 0 0 0 1.33.797h10.771a1.497 1.497 0 0 0 1.33-.796 1.592 1.592 0 0 0-.043-1.628Zm-6.694 0a.875.875 0 1 1 0-1.75.875.875 0 0 1 0 1.75ZM7.344 8V5.375h1.312V8H7.344Z"></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--alertTriangleFilled"><path d="m14.694 10.625-5.408-8.68a1.505 1.505 0 0 0-2.572 0l-5.408 8.68a1.592 1.592 0 0 0 0 1.627 1.497 1.497 0 0 0 1.33.797h10.771a1.497 1.497 0 0 0 1.33-.796 1.592 1.592 0 0 0-.043-1.628Zm-6.694 0a.875.875 0 1 1 0-1.75.875.875 0 0 1 0 1.75ZM7.344 8V5.375h1.312V8H7.344Z"></path></svg>';
 
 class IconAlertTriangleFilled extends HTMLElement {
     constructor () {

package/dist/IconAlertTriangleFilledLarge.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--alertTriangleFilledLarge"><path d="m28.582 21.731-10.5-16.817a2.432 2.432 0 0 0-4.147 0L3.435 21.73a2.573 2.573 0 0 0-.07 2.625A2.415 2.415 0 0 0 5.5 25.625h21a2.415 2.415 0 0 0 2.135-1.277 2.573 2.573 0 0 0-.053-2.617ZM16 21.906a1.53 1.53 0 1 1 0-3.061 1.53 1.53 0 0 1 0 3.061Zm.875-11.156v6.125h-1.75V10.75h1.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--alertTriangleFilledLarge"><path d="m28.582 21.731-10.5-16.817a2.432 2.432 0 0 0-4.147 0L3.435 21.73a2.573 2.573 0 0 0-.07 2.625A2.415 2.415 0 0 0 5.5 25.625h21a2.415 2.415 0 0 0 2.135-1.277 2.573 2.573 0 0 0-.053-2.617ZM16 21.906a1.53 1.53 0 1 1 0-3.061 1.53 1.53 0 0 1 0 3.061Zm.875-11.156v6.125h-1.75V10.75h1.75Z"></path></svg>';
 
 class IconAlertTriangleFilledLarge extends HTMLElement {
     constructor () {

package/dist/IconAlertTriangleLarge.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--alertTriangleLarge"><path d="M16.875 10.75h-1.75v6.125h1.75V10.75Z"></path><path d="M16 21.906a1.531 1.531 0 1 0 0-3.062 1.531 1.531 0 0 0 0 3.062Z"></path><path d="M26.5 25.625h-21a2.415 2.415 0 0 1-2.135-1.277 2.572 2.572 0 0 1 .07-2.625l10.5-16.818A2.433 2.433 0 0 1 16 3.75a2.433 2.433 0 0 1 2.065 1.164l10.5 16.817a2.574 2.574 0 0 1 .07 2.625 2.415 2.415 0 0 1-2.135 1.269ZM15.414 5.841 4.914 22.66a.822.822 0 0 0 0 .875.691.691 0 0 0 .586.341h21a.691.691 0 0 0 .604-.376.822.822 0 0 0 0-.875l-10.5-16.818A.691.691 0 0 0 16 5.5a.691.691 0 0 0-.586.341Z"></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--alertTriangleLarge"><path d="M16.875 10.75h-1.75v6.125h1.75V10.75Z"></path><path d="M16 21.906a1.531 1.531 0 1 0 0-3.062 1.531 1.531 0 0 0 0 3.062Z"></path><path d="M26.5 25.625h-21a2.415 2.415 0 0 1-2.135-1.277 2.572 2.572 0 0 1 .07-2.625l10.5-16.818A2.433 2.433 0 0 1 16 3.75a2.433 2.433 0 0 1 2.065 1.164l10.5 16.817a2.574 2.574 0 0 1 .07 2.625 2.415 2.415 0 0 1-2.135 1.269ZM15.414 5.841 4.914 22.66a.822.822 0 0 0 0 .875.691.691 0 0 0 .586.341h21a.691.691 0 0 0 .604-.376.822.822 0 0 0 0-.875l-10.5-16.818A.691.691 0 0 0 16 5.5a.691.691 0 0 0-.586.341Z"></path></svg>';
 
 class IconAlertTriangleLarge extends HTMLElement {
     constructor () {

package/dist/IconAppOrder.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--appOrder"><path d="M3.406 2.75v10.5a.219.219 0 0 0 .219.219h1.75v1.312h-1.75a1.54 1.54 0 0 1-1.531-1.531V2.75a1.54 1.54 0 0 1 1.531-1.531h7a1.54 1.54 0 0 1 1.531 1.531V4.5h-1.312V2.75a.219.219 0 0 0-.219-.219h-1.75l-.402.954H5.777l-.402-.954h-1.75a.219.219 0 0 0-.219.219Zm10.5 10.5a1.54 1.54 0 0 1-.411 1.137 1.172 1.172 0 0 1-.875.386H7.746a1.171 1.171 0 0 1-.875-.386 1.532 1.532 0 0 1-.402-1.137l.324-5.049H8V6.906l1.304-1.303h1.75l1.321 1.303V8.22h1.207l.324 5.031ZM9.312 8.219h1.75V6.906h-1.75V8.22Zm3.282 5.101-.219-3.789H8l-.219 3.806a.263.263 0 0 0 0 .158h4.743a.457.457 0 0 0 .07-.175Z"></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--appOrder"><path d="M3.406 2.75v10.5a.219.219 0 0 0 .219.219h1.75v1.312h-1.75a1.54 1.54 0 0 1-1.531-1.531V2.75a1.54 1.54 0 0 1 1.531-1.531h7a1.54 1.54 0 0 1 1.531 1.531V4.5h-1.312V2.75a.219.219 0 0 0-.219-.219h-1.75l-.402.954H5.777l-.402-.954h-1.75a.219.219 0 0 0-.219.219Zm10.5 10.5a1.54 1.54 0 0 1-.411 1.137 1.172 1.172 0 0 1-.875.386H7.746a1.171 1.171 0 0 1-.875-.386 1.532 1.532 0 0 1-.402-1.137l.324-5.049H8V6.906l1.304-1.303h1.75l1.321 1.303V8.22h1.207l.324 5.031ZM9.312 8.219h1.75V6.906h-1.75V8.22Zm3.282 5.101-.219-3.789H8l-.219 3.806a.263.263 0 0 0 0 .158h4.743a.457.457 0 0 0 .07-.175Z"></path></svg>';
 
 class IconAppOrder extends HTMLElement {
     constructor () {

package/dist/IconAppOrderLarge.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--appOrderLarge"><path d="M9 4.625h3.22l.56 1.418h4.69l.56-1.418h3.22a.875.875 0 0 1 .875.875v1.75h1.75V5.5a2.625 2.625 0 0 0-2.625-2.625H9A2.625 2.625 0 0 0 6.375 5.5v21A2.625 2.625 0 0 0 9 29.125h1.75v-1.75H9a.875.875 0 0 1-.875-.875v-21A.875.875 0 0 1 9 4.625Z"></path><path d="M18.205 21.25h4.34l1.33-1.251v-3.124h-1.75V19.5h-3.5v-2.625h-1.75v3.124l1.33 1.251Z"></path><path d="M27.576 13.375h-3.701V10.75L22.204 9h-3.658l-1.671 1.75v2.625h-3.701L12.56 26.85a2.179 2.179 0 0 0 2.17 2.275H26.02a2.178 2.178 0 0 0 2.17-2.275l-.613-13.475Zm-8.951-2.625h3.5v2.625h-3.5V10.75Zm7.7 16.494a.418.418 0 0 1-.306.131H14.73a.42.42 0 0 1-.42-.446l.534-11.804h11.06l.534 11.804a.446.446 0 0 1-.114.315Z"></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--appOrderLarge"><path d="M9 4.625h3.22l.56 1.418h4.69l.56-1.418h3.22a.875.875 0 0 1 .875.875v1.75h1.75V5.5a2.625 2.625 0 0 0-2.625-2.625H9A2.625 2.625 0 0 0 6.375 5.5v21A2.625 2.625 0 0 0 9 29.125h1.75v-1.75H9a.875.875 0 0 1-.875-.875v-21A.875.875 0 0 1 9 4.625Z"></path><path d="M18.205 21.25h4.34l1.33-1.251v-3.124h-1.75V19.5h-3.5v-2.625h-1.75v3.124l1.33 1.251Z"></path><path d="M27.576 13.375h-3.701V10.75L22.204 9h-3.658l-1.671 1.75v2.625h-3.701L12.56 26.85a2.179 2.179 0 0 0 2.17 2.275H26.02a2.178 2.178 0 0 0 2.17-2.275l-.613-13.475Zm-8.951-2.625h3.5v2.625h-3.5V10.75Zm7.7 16.494a.418.418 0 0 1-.306.131H14.73a.42.42 0 0 1-.42-.446l.534-11.804h11.06l.534 11.804a.446.446 0 0 1-.114.315Z"></path></svg>';
 
 class IconAppOrderLarge extends HTMLElement {
     constructor () {

package/dist/IconAppRestaurant.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--appRestaurant"><path d="M13.906 4.395a2.519 2.519 0 0 0-.796-1.829l-1.015-.971a1.374 1.374 0 0 0-.945-.376H4.867c-.346 0-.679.135-.927.376l-1.032.963a2.537 2.537 0 0 0-.814 1.846 2.529 2.529 0 0 0 .875 1.89v6.519a1.969 1.969 0 0 0 1.969 1.968h6.125a1.969 1.969 0 0 0 1.968-1.969V6.295a2.545 2.545 0 0 0 .875-1.899ZM3.8 3.52l1.067-.989h6.318l1.024.963a1.244 1.244 0 0 1 .385.875 1.19 1.19 0 0 1-.945 1.155 1.295 1.295 0 0 1-1.409-.578H9.102a1.295 1.295 0 0 1-2.205 0H5.76a1.295 1.295 0 0 1-1.409.578 1.19 1.19 0 0 1-.945-1.12A1.199 1.199 0 0 1 3.8 3.52Zm7.263 9.949H4.936a.665.665 0 0 1-.656-.656v-5.95A2.625 2.625 0 0 0 6.33 6.31a2.625 2.625 0 0 0 3.342 0 2.625 2.625 0 0 0 2.048.551v5.95a.665.665 0 0 1-.656.657ZM8.874 11.5a.875.875 0 1 1-1.75 0 .875.875 0 0 1 1.75 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--appRestaurant"><path d="M13.906 4.395a2.519 2.519 0 0 0-.796-1.829l-1.015-.971a1.374 1.374 0 0 0-.945-.376H4.867c-.346 0-.679.135-.927.376l-1.032.963a2.537 2.537 0 0 0-.814 1.846 2.529 2.529 0 0 0 .875 1.89v6.519a1.969 1.969 0 0 0 1.969 1.968h6.125a1.969 1.969 0 0 0 1.968-1.969V6.295a2.545 2.545 0 0 0 .875-1.899ZM3.8 3.52l1.067-.989h6.318l1.024.963a1.244 1.244 0 0 1 .385.875 1.19 1.19 0 0 1-.945 1.155 1.295 1.295 0 0 1-1.409-.578H9.102a1.295 1.295 0 0 1-2.205 0H5.76a1.295 1.295 0 0 1-1.409.578 1.19 1.19 0 0 1-.945-1.12A1.199 1.199 0 0 1 3.8 3.52Zm7.263 9.949H4.936a.665.665 0 0 1-.656-.656v-5.95A2.625 2.625 0 0 0 6.33 6.31a2.625 2.625 0 0 0 3.342 0 2.625 2.625 0 0 0 2.048.551v5.95a.665.665 0 0 1-.656.657ZM8.874 11.5a.875.875 0 1 1-1.75 0 .875.875 0 0 1 1.75 0Z"></path></svg>';
 
 class IconAppRestaurant extends HTMLElement {
     constructor () {

package/dist/IconAppRestaurantLarge.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--appRestaurantLarge"><path d="M27.375 8.781a4.567 4.567 0 0 0-1.461-3.342l-2.039-1.925a2.31 2.31 0 0 0-1.575-.639H9.744c-.586 0-1.15.226-1.575.63L6.112 5.43a4.637 4.637 0 0 0-1.487 3.369 4.541 4.541 0 0 0 1.75 3.561v13.265a3.5 3.5 0 0 0 3.5 3.5h12.25a3.5 3.5 0 0 0 3.5-3.5V12.36a4.576 4.576 0 0 0 1.75-3.579Zm-3.5 16.844a1.75 1.75 0 0 1-1.75 1.75H9.875a1.75 1.75 0 0 1-1.75-1.75V13.226h.114a4.856 4.856 0 0 0 4.418-1.225 4.84 4.84 0 0 0 6.686 0 4.857 4.857 0 0 0 4.418 1.225h.114v12.399Zm-.481-14.079a3.027 3.027 0 0 1-3.299-1.365h-1.47a3.027 3.027 0 0 1-5.162 0h-1.558a3.027 3.027 0 0 1-3.299 1.365 2.809 2.809 0 0 1-1.303-4.83l2.064-1.934c.1-.1.235-.156.377-.157H22.3a.56.56 0 0 1 .376.157l2.074 1.925a2.86 2.86 0 0 1 .24 3.856c-.405.5-.968.846-1.596.983ZM17.53 23.875a1.531 1.531 0 1 1-3.063 0 1.531 1.531 0 0 1 3.063 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--appRestaurantLarge"><path d="M27.375 8.781a4.567 4.567 0 0 0-1.461-3.342l-2.039-1.925a2.31 2.31 0 0 0-1.575-.639H9.744c-.586 0-1.15.226-1.575.63L6.112 5.43a4.637 4.637 0 0 0-1.487 3.369 4.541 4.541 0 0 0 1.75 3.561v13.265a3.5 3.5 0 0 0 3.5 3.5h12.25a3.5 3.5 0 0 0 3.5-3.5V12.36a4.576 4.576 0 0 0 1.75-3.579Zm-3.5 16.844a1.75 1.75 0 0 1-1.75 1.75H9.875a1.75 1.75 0 0 1-1.75-1.75V13.226h.114a4.856 4.856 0 0 0 4.418-1.225 4.84 4.84 0 0 0 6.686 0 4.857 4.857 0 0 0 4.418 1.225h.114v12.399Zm-.481-14.079a3.027 3.027 0 0 1-3.299-1.365h-1.47a3.027 3.027 0 0 1-5.162 0h-1.558a3.027 3.027 0 0 1-3.299 1.365 2.809 2.809 0 0 1-1.303-4.83l2.064-1.934c.1-.1.235-.156.377-.157H22.3a.56.56 0 0 1 .376.157l2.074 1.925a2.86 2.86 0 0 1 .24 3.856c-.405.5-.968.846-1.596.983ZM17.53 23.875a1.531 1.531 0 1 1-3.063 0 1.531 1.531 0 0 1 3.063 0Z"></path></svg>';
 
 class IconAppRestaurantLarge extends HTMLElement {
     constructor () {

package/dist/IconAppSuccess.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--appSuccess"><path d="M11.5 1.219h-7A1.54 1.54 0 0 0 2.969 2.75v10.5A1.54 1.54 0 0 0 4.5 14.781h7a1.54 1.54 0 0 0 1.531-1.531V2.75A1.54 1.54 0 0 0 11.5 1.219Zm.219 12.031a.219.219 0 0 1-.219.219h-7a.219.219 0 0 1-.219-.219V2.75a.219.219 0 0 1 .219-.219h1.75l.429.954h2.668l.403-.954h1.75a.219.219 0 0 1 .219.219v10.5ZM9.75 5.786l.875.928L8 9.339a.656.656 0 0 1-.875 0L5.603 7.842l.927-.927 1.032 1.032 2.188-2.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 16 16" class="c-pieIcon c-pieIcon--appSuccess"><path d="M11.5 1.219h-7A1.54 1.54 0 0 0 2.969 2.75v10.5A1.54 1.54 0 0 0 4.5 14.781h7a1.54 1.54 0 0 0 1.531-1.531V2.75A1.54 1.54 0 0 0 11.5 1.219Zm.219 12.031a.219.219 0 0 1-.219.219h-7a.219.219 0 0 1-.219-.219V2.75a.219.219 0 0 1 .219-.219h1.75l.429.954h2.668l.403-.954h1.75a.219.219 0 0 1 .219.219v10.5ZM9.75 5.786l.875.928L8 9.339a.656.656 0 0 1-.875 0L5.603 7.842l.927-.927 1.032 1.032 2.188-2.16Z"></path></svg>';
 
 class IconAppSuccess extends HTMLElement {
     constructor () {

package/dist/IconAppSuccessLarge.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--appSuccessLarge"><path d="M22.125 2.875H9.875A2.625 2.625 0 0 0 7.25 5.5v21a2.625 2.625 0 0 0 2.625 2.625h12.25A2.625 2.625 0 0 0 24.75 26.5v-21a2.625 2.625 0 0 0-2.625-2.625ZM23 26.5a.875.875 0 0 1-.875.875H9.875A.875.875 0 0 1 9 26.5v-21a.875.875 0 0 1 .875-.875h2.739l.691 1.75h5.39l.691-1.75h2.739A.875.875 0 0 1 23 5.5v21Zm-3.684-14.621 1.243 1.242-5.25 5.25a.875.875 0 0 1-1.243 0l-2.625-2.625 1.243-1.242 2.004 2.012 4.628-4.637Z"></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--appSuccessLarge"><path d="M22.125 2.875H9.875A2.625 2.625 0 0 0 7.25 5.5v21a2.625 2.625 0 0 0 2.625 2.625h12.25A2.625 2.625 0 0 0 24.75 26.5v-21a2.625 2.625 0 0 0-2.625-2.625ZM23 26.5a.875.875 0 0 1-.875.875H9.875A.875.875 0 0 1 9 26.5v-21a.875.875 0 0 1 .875-.875h2.739l.691 1.75h5.39l.691-1.75h2.739A.875.875 0 0 1 23 5.5v21Zm-3.684-14.621 1.243 1.242-5.25 5.25a.875.875 0 0 1-1.243 0l-2.625-2.625 1.243-1.242 2.004 2.012 4.628-4.637Z"></path></svg>';
 
 class IconAppSuccessLarge extends HTMLElement {
     constructor () {

package/dist/IconAppUsers.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--appUsers"><path d="m2.426 12.375.49-1.601A1.645 1.645 0 0 1 4.447 9.53H6.25c.319.012.625.126.875.324-.1.19-.182.39-.245.595l-.508 1.925h1.365l.464-1.557A1.662 1.662 0 0 1 9.75 9.53h1.838a1.663 1.663 0 0 1 1.522 1.287l.429 1.557h1.365l-.56-1.925a3.053 3.053 0 0 0-2.083-2.126 2.387 2.387 0 0 0 .499-3.771 2.45 2.45 0 0 0-3.395 0 2.362 2.362 0 0 0-.709 1.697 2.389 2.389 0 0 0 .709 1.698c.097.102.206.193.324.27A2.756 2.756 0 0 0 8 8.876a2.756 2.756 0 0 0-1.689-.612c.118-.079.226-.17.324-.272a2.389 2.389 0 0 0 .709-1.741 2.362 2.362 0 0 0-.709-1.697 2.45 2.45 0 0 0-3.395 0 2.362 2.362 0 0 0-.709 1.697 2.389 2.389 0 0 0 .709 1.698c.145.147.31.274.49.376a3.001 3.001 0 0 0-2.074 2.065l-.604 1.986h1.374Zm7.875-6.895a1.103 1.103 0 0 1 1.78.352 1.076 1.076 0 0 1-.24 1.188 1.085 1.085 0 0 1-1.54 0 1.077 1.077 0 0 1 0-1.54Zm-6.125 0a1.103 1.103 0 0 1 1.78.352 1.076 1.076 0 0 1-.24 1.188 1.085 1.085 0 0 1-1.54 0 1.076 1.076 0 0 1 0-1.54Z"></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--appUsers"><path d="m2.426 12.375.49-1.601A1.645 1.645 0 0 1 4.447 9.53H6.25c.319.012.625.126.875.324-.1.19-.182.39-.245.595l-.508 1.925h1.365l.464-1.557A1.662 1.662 0 0 1 9.75 9.53h1.838a1.663 1.663 0 0 1 1.522 1.287l.429 1.557h1.365l-.56-1.925a3.053 3.053 0 0 0-2.083-2.126 2.387 2.387 0 0 0 .499-3.771 2.45 2.45 0 0 0-3.395 0 2.362 2.362 0 0 0-.709 1.697 2.389 2.389 0 0 0 .709 1.698c.097.102.206.193.324.27A2.756 2.756 0 0 0 8 8.876a2.756 2.756 0 0 0-1.689-.612c.118-.079.226-.17.324-.272a2.389 2.389 0 0 0 .709-1.741 2.362 2.362 0 0 0-.709-1.697 2.45 2.45 0 0 0-3.395 0 2.362 2.362 0 0 0-.709 1.697 2.389 2.389 0 0 0 .709 1.698c.145.147.31.274.49.376a3.001 3.001 0 0 0-2.074 2.065l-.604 1.986h1.374Zm7.875-6.895a1.103 1.103 0 0 1 1.78.352 1.076 1.076 0 0 1-.24 1.188 1.085 1.085 0 0 1-1.54 0 1.077 1.077 0 0 1 0-1.54Zm-6.125 0a1.103 1.103 0 0 1 1.78.352 1.076 1.076 0 0 1-.24 1.188 1.085 1.085 0 0 1-1.54 0 1.076 1.076 0 0 1 0-1.54Z"></path></svg>';
 
 class IconAppUsers extends HTMLElement {
     constructor () {

package/dist/IconAppUsersLarge.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--appUsersLarge"><path d="M17.75 18.695a4.463 4.463 0 0 0-2.328-.875 3.5 3.5 0 1 0-4.952 0c.063.06.13.116.201.166a4.506 4.506 0 0 0-2.931 2.835L6.996 23h1.847l.56-1.636a2.774 2.774 0 0 1 2.624-1.864h2.94a2.721 2.721 0 0 1 1.61.516 4.513 4.513 0 0 0-.358.779L15.475 23h1.855l.551-1.645a2.765 2.765 0 0 1 2.625-1.855h2.949a2.765 2.765 0 0 1 2.625 1.855L26.658 23h1.846l-.744-2.205a4.49 4.49 0 0 0-2.931-2.835c.07-.05.138-.106.201-.166a3.5 3.5 0 0 0 0-4.935 3.57 3.57 0 0 0-4.935 0 3.5 3.5 0 0 0 0 4.926 4.524 4.524 0 0 0-2.345.91Zm-3.579-2.135a1.75 1.75 0 1 1-2.49-2.459 1.75 1.75 0 0 1 2.49 2.459Zm7.158-2.459a1.75 1.75 0 0 1 2.975 1.225c0 .462-.182.906-.508 1.234a1.75 1.75 0 0 1-2.467 0 1.75 1.75 0 0 1-.508-1.234c.002-.459.184-.899.508-1.225Z"></path><path d="M5.5 26.5a.875.875 0 0 1-.875-.796V7.189a.875.875 0 0 1 .971-.814H7.53l.665 1.505h5.11l.665-1.505h1.934a.875.875 0 0 1 .971.814v2.686h1.75V7.189a2.626 2.626 0 0 0-2.721-2.564H5.596a2.625 2.625 0 0 0-2.721 2.564v18.497a2.625 2.625 0 0 0 2.721 2.564H16a2.625 2.625 0 0 0 2.468-1.75H5.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--appUsersLarge"><path d="M17.75 18.695a4.463 4.463 0 0 0-2.328-.875 3.5 3.5 0 1 0-4.952 0c.063.06.13.116.201.166a4.506 4.506 0 0 0-2.931 2.835L6.996 23h1.847l.56-1.636a2.774 2.774 0 0 1 2.624-1.864h2.94a2.721 2.721 0 0 1 1.61.516 4.513 4.513 0 0 0-.358.779L15.475 23h1.855l.551-1.645a2.765 2.765 0 0 1 2.625-1.855h2.949a2.765 2.765 0 0 1 2.625 1.855L26.658 23h1.846l-.744-2.205a4.49 4.49 0 0 0-2.931-2.835c.07-.05.138-.106.201-.166a3.5 3.5 0 0 0 0-4.935 3.57 3.57 0 0 0-4.935 0 3.5 3.5 0 0 0 0 4.926 4.524 4.524 0 0 0-2.345.91Zm-3.579-2.135a1.75 1.75 0 1 1-2.49-2.459 1.75 1.75 0 0 1 2.49 2.459Zm7.158-2.459a1.75 1.75 0 0 1 2.975 1.225c0 .462-.182.906-.508 1.234a1.75 1.75 0 0 1-2.467 0 1.75 1.75 0 0 1-.508-1.234c.002-.459.184-.899.508-1.225Z"></path><path d="M5.5 26.5a.875.875 0 0 1-.875-.796V7.189a.875.875 0 0 1 .971-.814H7.53l.665 1.505h5.11l.665-1.505h1.934a.875.875 0 0 1 .971.814v2.686h1.75V7.189a2.626 2.626 0 0 0-2.721-2.564H5.596a2.625 2.625 0 0 0-2.721 2.564v18.497a2.625 2.625 0 0 0 2.721 2.564H16a2.625 2.625 0 0 0 2.468-1.75H5.5Z"></path></svg>';
 
 class IconAppUsersLarge extends HTMLElement {
     constructor () {

package/dist/IconArrowDown.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--arrowDown"><path d="M7.25 1v11.65L3.49 8.89 2.43 10l4.69 4.68a1.239 1.239 0 0 0 1.76 0L13.57 10l-1.06-1.11-3.76 3.76V1h-1.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 16 16" class="c-pieIcon c-pieIcon--arrowDown"><path d="M7.25 1v11.65L3.49 8.89 2.43 10l4.69 4.68a1.239 1.239 0 0 0 1.76 0L13.57 10l-1.06-1.11-3.76 3.76V1h-1.5Z"></path></svg>';
 
 class IconArrowDown extends HTMLElement {
     constructor () {

package/dist/IconArrowDownCircle.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--arrowDownCircle"><path d="M7.344 1.577v7.167L5.445 6.845l-.945.928 2.713 2.712a1.084 1.084 0 0 0 1.54 0L11.5 7.773l-.945-.928-1.899 1.899V1.577H7.344Z"></path><path d="M9.969 1.315V2.75a5.46 5.46 0 1 1-3.938 0V1.315a6.781 6.781 0 1 0 3.938 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--arrowDownCircle"><path d="M7.344 1.577v7.167L5.445 6.845l-.945.928 2.713 2.712a1.084 1.084 0 0 0 1.54 0L11.5 7.773l-.945-.928-1.899 1.899V1.577H7.344Z"></path><path d="M9.969 1.315V2.75a5.46 5.46 0 1 1-3.938 0V1.315a6.781 6.781 0 1 0 3.938 0Z"></path></svg>';
 
 class IconArrowDownCircle extends HTMLElement {
     constructor () {

package/dist/IconArrowDownCircleFilled.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--arrowDownCircleFilled"><path d="M8.656 1.254v7.49l1.899-1.899.945.927-2.712 2.713a1.084 1.084 0 0 1-1.54 0L4.5 7.772l.945-.927 1.899 1.899v-7.49a6.781 6.781 0 1 0 1.312 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--arrowDownCircleFilled"><path d="M8.656 1.254v7.49l1.899-1.899.945.927-2.712 2.713a1.084 1.084 0 0 1-1.54 0L4.5 7.772l.945-.927 1.899 1.899v-7.49a6.781 6.781 0 1 0 1.312 0Z"></path></svg>';
 
 class IconArrowDownCircleFilled extends HTMLElement {
     constructor () {

package/dist/IconArrowDownCircleFilledLarge.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--arrowDownCircleFilledLarge"><path d="M16.875 3.75v15.367l4.165-4.17 1.234 1.235-5.04 5.047a1.749 1.749 0 0 1-2.468 0l-5.04-5.047 1.234-1.235 4.165 4.17V3.75a12.244 12.244 0 0 0-8.239 4.038 12.275 12.275 0 0 0 .608 17.023 12.242 12.242 0 0 0 17.012 0 12.273 12.273 0 0 0 .608-17.023 12.244 12.244 0 0 0-8.239-4.038Z"></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--arrowDownCircleFilledLarge"><path d="M16.875 3.75v15.367l4.165-4.17 1.234 1.235-5.04 5.047a1.749 1.749 0 0 1-2.468 0l-5.04-5.047 1.234-1.235 4.165 4.17V3.75a12.244 12.244 0 0 0-8.239 4.038 12.275 12.275 0 0 0 .608 17.023 12.242 12.242 0 0 0 17.012 0 12.273 12.273 0 0 0 .608-17.023 12.244 12.244 0 0 0-8.239-4.038Z"></path></svg>';
 
 class IconArrowDownCircleFilledLarge extends HTMLElement {
     constructor () {

package/dist/IconArrowDownCircleLarge.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--arrowDownCircleLarge"><path d="M18.625 4.873v1.74c2.474.617 4.631 2.084 6.065 4.126a9.864 9.864 0 0 1 1.726 6.966c-.322 2.448-1.557 4.698-3.475 6.329A10.72 10.72 0 0 1 16 26.564c-2.556 0-5.024-.9-6.941-2.53-1.918-1.631-3.153-3.881-3.475-6.329A9.864 9.864 0 0 1 7.31 10.74c1.434-2.042 3.59-3.509 6.065-4.126v-1.74c-2.95.625-5.557 2.28-7.32 4.647A11.521 11.521 0 0 0 3.82 17.7c.326 2.898 1.75 5.579 3.997 7.526C10.066 27.173 12.98 28.25 16 28.25c3.02 0 5.934-1.077 8.182-3.025 2.248-1.947 3.671-4.628 3.997-7.526a11.52 11.52 0 0 0-2.233-8.179c-1.764-2.367-4.37-4.022-7.321-4.647Z"></path><path d="m9.726 16.623 5.04 4.865c.328.315.772.492 1.234.492.462 0 .906-.177 1.234-.492l5.04-4.865-1.234-1.191-4.165 4.02V3.75h-1.75v15.703l-4.165-4.021-1.234 1.191Z"></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--arrowDownCircleLarge"><path d="M18.625 4.873v1.74c2.474.617 4.631 2.084 6.065 4.126a9.864 9.864 0 0 1 1.726 6.966c-.322 2.448-1.557 4.698-3.475 6.329A10.72 10.72 0 0 1 16 26.564c-2.556 0-5.024-.9-6.941-2.53-1.918-1.631-3.153-3.881-3.475-6.329A9.864 9.864 0 0 1 7.31 10.74c1.434-2.042 3.59-3.509 6.065-4.126v-1.74c-2.95.625-5.557 2.28-7.32 4.647A11.521 11.521 0 0 0 3.82 17.7c.326 2.898 1.75 5.579 3.997 7.526C10.066 27.173 12.98 28.25 16 28.25c3.02 0 5.934-1.077 8.182-3.025 2.248-1.947 3.671-4.628 3.997-7.526a11.52 11.52 0 0 0-2.233-8.179c-1.764-2.367-4.37-4.022-7.321-4.647Z"></path><path d="m9.726 16.623 5.04 4.865c.328.315.772.492 1.234.492.462 0 .906-.177 1.234-.492l5.04-4.865-1.234-1.191-4.165 4.02V3.75h-1.75v15.703l-4.165-4.021-1.234 1.191Z"></path></svg>';
 
 class IconArrowDownCircleLarge extends HTMLElement {
     constructor () {

package/dist/IconArrowDownLarge.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--arrowDownLarge"><path d="M15.125 3.75v21.875l-7-7-1.242 1.207 7.875 7.875a1.75 1.75 0 0 0 2.476 0l7.875-7.875-1.234-1.207-7 7V3.75h-1.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--arrowDownLarge"><path d="M15.125 3.75v21.875l-7-7-1.242 1.207 7.875 7.875a1.75 1.75 0 0 0 2.476 0l7.875-7.875-1.234-1.207-7 7V3.75h-1.75Z"></path></svg>';
 
 class IconArrowDownLarge extends HTMLElement {
     constructor () {

package/dist/IconArrowInCircle.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--arrowInCircle"><path d="M1.639 8.595h7.166l-1.899 1.907.928.928 2.712-2.713a1.11 1.11 0 0 0 0-1.548L7.834 4.5l-.928.875 1.899 1.907H1.639v1.313Z"></path><path d="M7.851 1.157A6.799 6.799 0 0 0 1.367 5.97H2.75a5.469 5.469 0 1 1 0 3.937H1.376a6.773 6.773 0 1 0 6.475-8.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 16 16" class="c-pieIcon c-pieIcon--arrowInCircle"><path d="M1.639 8.595h7.166l-1.899 1.907.928.928 2.712-2.713a1.11 1.11 0 0 0 0-1.548L7.834 4.5l-.928.875 1.899 1.907H1.639v1.313Z"></path><path d="M7.851 1.157A6.799 6.799 0 0 0 1.367 5.97H2.75a5.469 5.469 0 1 1 0 3.937H1.376a6.773 6.773 0 1 0 6.475-8.75Z"></path></svg>';
 
 class IconArrowInCircle extends HTMLElement {
     constructor () {

package/dist/IconArrowInCircleLarge.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--arrowInCircleLarge"><path d="M16 3.75a12.25 12.25 0 0 0-11.961 9.625H5.84a10.5 10.5 0 1 1 0 5.25H4.04A12.25 12.25 0 1 0 16 3.75Z"></path><path d="m19.141 16.875-4.165 4.165 1.234 1.234 5.04-5.04c.085-.083.161-.173.227-.272a1.75 1.75 0 0 0 0-1.925 1.7 1.7 0 0 0-.227-.27l-5.04-5.04-1.234 1.233 4.165 4.165H2.875v1.75h16.266Z"></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--arrowInCircleLarge"><path d="M16 3.75a12.25 12.25 0 0 0-11.961 9.625H5.84a10.5 10.5 0 1 1 0 5.25H4.04A12.25 12.25 0 1 0 16 3.75Z"></path><path d="m19.141 16.875-4.165 4.165 1.234 1.234 5.04-5.04c.085-.083.161-.173.227-.272a1.75 1.75 0 0 0 0-1.925 1.7 1.7 0 0 0-.227-.27l-5.04-5.04-1.234 1.233 4.165 4.165H2.875v1.75h16.266Z"></path></svg>';
 
 class IconArrowInCircleLarge extends HTMLElement {
     constructor () {

package/dist/IconArrowLeft.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--arrowLeft"><path d="M15 7.25H3.35l3.76-3.76-1.06-1.06-4.68 4.69a1.24 1.24 0 0 0 0 1.76l4.68 4.69 1.06-1.06-3.76-3.76H15v-1.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 16 16" class="c-pieIcon c-pieIcon--arrowLeft"><path d="M15 7.25H3.35l3.76-3.76-1.06-1.06-4.68 4.69a1.24 1.24 0 0 0 0 1.76l4.68 4.69 1.06-1.06-3.76-3.76H15v-1.5Z"></path></svg>';
 
 class IconArrowLeft extends HTMLElement {
     constructor () {

package/dist/IconArrowLeftLarge.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--arrowLeftLarge"><path d="M28.25 15.125H6.375l7-7-1.207-1.243-7.875 7.875a1.751 1.751 0 0 0 0 2.477l7.875 7.875 1.207-1.234-7-7H28.25v-1.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--arrowLeftLarge"><path d="M28.25 15.125H6.375l7-7-1.207-1.243-7.875 7.875a1.751 1.751 0 0 0 0 2.477l7.875 7.875 1.207-1.234-7-7H28.25v-1.75Z"></path></svg>';
 
 class IconArrowLeftLarge extends HTMLElement {
     constructor () {

package/dist/IconArrowOutCircle.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--arrowOutCircle"><path d="M14.046 7.169 11.334 4.5l-.928.875 1.899 1.899H5.139v1.312h7.166l-1.899 1.908.928.927 2.712-2.712a1.111 1.111 0 0 0 0-1.54Z"></path><path d="M8.149 13.408a5.469 5.469 0 0 1 0-10.938 5.25 5.25 0 0 1 2.87.875h2.056a6.695 6.695 0 0 0-4.926-2.188 6.781 6.781 0 1 0 0 13.563 6.659 6.659 0 0 0 4.926-2.188h-2.056a5.25 5.25 0 0 1-2.87.876Z"></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--arrowOutCircle"><path d="M14.046 7.169 11.334 4.5l-.928.875 1.899 1.899H5.139v1.312h7.166l-1.899 1.908.928.927 2.712-2.712a1.111 1.111 0 0 0 0-1.54Z"></path><path d="M8.149 13.408a5.469 5.469 0 0 1 0-10.938 5.25 5.25 0 0 1 2.87.875h2.056a6.695 6.695 0 0 0-4.926-2.188 6.781 6.781 0 1 0 0 13.563 6.659 6.659 0 0 0 4.926-2.188h-2.056a5.25 5.25 0 0 1-2.87.876Z"></path></svg>';
 
 class IconArrowOutCircle extends HTMLElement {
     constructor () {

package/dist/IconArrowOutCircleLarge.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--arrowOutCircleLarge"><path d="M28.512 15.037a1.696 1.696 0 0 0-.227-.27l-5.04-5.04-1.234 1.233 4.165 4.165H9.875v1.75h16.301l-4.165 4.165 1.234 1.234 5.005-5.04a1.75 1.75 0 0 0 .262-2.196Z"></path><path d="M16 26.5a10.5 10.5 0 1 1 6.921-18.375h2.442a12.25 12.25 0 1 0 0 15.75H22.92A10.5 10.5 0 0 1 16 26.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--arrowOutCircleLarge"><path d="M28.512 15.037a1.696 1.696 0 0 0-.227-.27l-5.04-5.04-1.234 1.233 4.165 4.165H9.875v1.75h16.301l-4.165 4.165 1.234 1.234 5.005-5.04a1.75 1.75 0 0 0 .262-2.196Z"></path><path d="M16 26.5a10.5 10.5 0 1 1 6.921-18.375h2.442a12.25 12.25 0 1 0 0 15.75H22.92A10.5 10.5 0 0 1 16 26.5Z"></path></svg>';
 
 class IconArrowOutCircleLarge extends HTMLElement {
     constructor () {

package/dist/IconArrowRight.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--arrowRight"><path d="M1 8.75h11.65l-3.76 3.76L10 13.57l4.68-4.69a1.239 1.239 0 0 0 0-1.76L10 2.43 8.89 3.49l3.76 3.76H1v1.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 16 16" class="c-pieIcon c-pieIcon--arrowRight"><path d="M1 8.75h11.65l-3.76 3.76L10 13.57l4.68-4.69a1.239 1.239 0 0 0 0-1.76L10 2.43 8.89 3.49l3.76 3.76H1v1.5Z"></path></svg>';
 
 class IconArrowRight extends HTMLElement {
     constructor () {

package/dist/IconArrowRightLarge.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--arrowRightLarge"><path d="M3.75 16.875h21.875l-7 7 1.234 1.234 7.875-7.875a1.748 1.748 0 0 0 0-2.477l-7.875-7.875-1.234 1.243 7 7H3.75v1.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--arrowRightLarge"><path d="M3.75 16.875h21.875l-7 7 1.234 1.234 7.875-7.875a1.748 1.748 0 0 0 0-2.477l-7.875-7.875-1.234 1.243 7 7H3.75v1.75Z"></path></svg>';
 
 class IconArrowRightLarge extends HTMLElement {
     constructor () {

package/dist/IconArrowUp.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--arrowUp"><path d="M8.656 14.125V3.931l3.29 3.29.928-.927L8.77 2.199a1.085 1.085 0 0 0-1.54 0L3.126 6.294l.928.927 3.29-3.29v10.194h1.312Z"></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--arrowUp"><path d="M8.656 14.125V3.931l3.29 3.29.928-.927L8.77 2.199a1.085 1.085 0 0 0-1.54 0L3.126 6.294l.928.927 3.29-3.29v10.194h1.312Z"></path></svg>';
 
 class IconArrowUp extends HTMLElement {
     constructor () {

package/dist/IconArrowUpLarge.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--arrowUpLarge"><path d="M16.875 28.25V6.375l7 7 1.234-1.234-7.875-7.875a1.751 1.751 0 0 0-2.477 0l-7.874 7.875 1.242 1.234 7-7V28.25h1.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--arrowUpLarge"><path d="M16.875 28.25V6.375l7 7 1.234-1.234-7.875-7.875a1.751 1.751 0 0 0-2.477 0l-7.874 7.875 1.242 1.234 7-7V28.25h1.75Z"></path></svg>';
 
 class IconArrowUpLarge extends HTMLElement {
     constructor () {

package/dist/IconArrowUpLeft.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--arrowUpLeft"><path d="m12.795 11.867-7.21-7.21h4.655V3.345H4.439a1.094 1.094 0 0 0-1.094 1.094v5.801h1.313V5.585l7.21 7.21.927-.928Z"></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--arrowUpLeft"><path d="m12.795 11.867-7.21-7.21h4.655V3.345H4.439a1.094 1.094 0 0 0-1.094 1.094v5.801h1.313V5.585l7.21 7.21.927-.928Z"></path></svg>';
 
 class IconArrowUpLeft extends HTMLElement {
     constructor () {

package/dist/IconArrowUpLeftLarge.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--arrowUpLeftLarge"><path d="M25.284 24.041 9.814 8.571h9.922v-1.75H8.58a1.75 1.75 0 0 0-1.75 1.75v11.165h1.75V9.805l15.47 15.47 1.234-1.234Z"></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--arrowUpLeftLarge"><path d="M25.284 24.041 9.814 8.571h9.922v-1.75H8.58a1.75 1.75 0 0 0-1.75 1.75v11.165h1.75V9.805l15.47 15.47 1.234-1.234Z"></path></svg>';
 
 class IconArrowUpLeftLarge extends HTMLElement {
     constructor () {

package/dist/IconAtSymbol.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--atSymbol"><path d="M13.74 4.832a5.348 5.348 0 0 0-1.365-1.855 5.706 5.706 0 0 0-1.951-1.102 7.56 7.56 0 0 0-2.371-.385 6.422 6.422 0 0 0-2.53.49c-.748.309-1.425.77-1.985 1.356a6.011 6.011 0 0 0-1.304 2.091 7.35 7.35 0 0 0-.464 2.695 6.816 6.816 0 0 0 .464 2.564 5.879 5.879 0 0 0 3.255 3.343 6.29 6.29 0 0 0 2.441.481 6.056 6.056 0 0 0 2.625-.595h.096l-.402-1.085-.105.053a4.75 4.75 0 0 1-.998.34 5.859 5.859 0 0 1-1.198.123 4.76 4.76 0 0 1-1.908-.385A4.629 4.629 0 0 1 4.5 11.86a4.97 4.97 0 0 1-1.015-1.645 5.915 5.915 0 0 1-.367-2.118c-.01-.767.11-1.53.358-2.257.222-.63.57-1.208 1.024-1.698A4.375 4.375 0 0 1 6.05 3.074a5.145 5.145 0 0 1 2.004-.377 6.352 6.352 0 0 1 1.88.272 4.375 4.375 0 0 1 1.567.822c.461.394.826.888 1.068 1.444.278.67.412 1.392.393 2.117a4.7 4.7 0 0 1-.148 1.26 3.08 3.08 0 0 1-.438.954c-.15.24-.354.44-.595.586-.186.111-.396.177-.612.193V4.561H9.873V5.62a2.03 2.03 0 0 0-.753-.814 2.573 2.573 0 0 0-1.409-.394 2.887 2.887 0 0 0-1.233.263c-.373.18-.706.433-.98.744-.282.334-.501.717-.648 1.128A4.235 4.235 0 0 0 4.614 8c-.006.5.074.997.236 1.47.142.422.361.814.648 1.155.272.31.605.56.98.735.388.17.809.257 1.233.254.5.01.99-.137 1.4-.42.317-.209.578-.491.762-.823v1.085h1.04c.454.004.903-.094 1.313-.288.397-.2.746-.484 1.024-.832.311-.381.549-.817.7-1.286a5.19 5.19 0 0 0 .245-1.663 6.127 6.127 0 0 0-.455-2.555ZM9.794 8a2.625 2.625 0 0 1-.525 1.75 1.75 1.75 0 0 1-1.339.578 1.75 1.75 0 0 1-1.347-.578A2.625 2.625 0 0 1 6.058 8a2.625 2.625 0 0 1 .525-1.75 1.75 1.75 0 0 1 1.347-.578 1.75 1.75 0 0 1 1.339.578c.379.502.565 1.123.525 1.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 16 16" class="c-pieIcon c-pieIcon--atSymbol"><path d="M13.74 4.832a5.348 5.348 0 0 0-1.365-1.855 5.706 5.706 0 0 0-1.951-1.102 7.56 7.56 0 0 0-2.371-.385 6.422 6.422 0 0 0-2.53.49c-.748.309-1.425.77-1.985 1.356a6.011 6.011 0 0 0-1.304 2.091 7.35 7.35 0 0 0-.464 2.695 6.816 6.816 0 0 0 .464 2.564 5.879 5.879 0 0 0 3.255 3.343 6.29 6.29 0 0 0 2.441.481 6.056 6.056 0 0 0 2.625-.595h.096l-.402-1.085-.105.053a4.75 4.75 0 0 1-.998.34 5.859 5.859 0 0 1-1.198.123 4.76 4.76 0 0 1-1.908-.385A4.629 4.629 0 0 1 4.5 11.86a4.97 4.97 0 0 1-1.015-1.645 5.915 5.915 0 0 1-.367-2.118c-.01-.767.11-1.53.358-2.257.222-.63.57-1.208 1.024-1.698A4.375 4.375 0 0 1 6.05 3.074a5.145 5.145 0 0 1 2.004-.377 6.352 6.352 0 0 1 1.88.272 4.375 4.375 0 0 1 1.567.822c.461.394.826.888 1.068 1.444.278.67.412 1.392.393 2.117a4.7 4.7 0 0 1-.148 1.26 3.08 3.08 0 0 1-.438.954c-.15.24-.354.44-.595.586-.186.111-.396.177-.612.193V4.561H9.873V5.62a2.03 2.03 0 0 0-.753-.814 2.573 2.573 0 0 0-1.409-.394 2.887 2.887 0 0 0-1.233.263c-.373.18-.706.433-.98.744-.282.334-.501.717-.648 1.128A4.235 4.235 0 0 0 4.614 8c-.006.5.074.997.236 1.47.142.422.361.814.648 1.155.272.31.605.56.98.735.388.17.809.257 1.233.254.5.01.99-.137 1.4-.42.317-.209.578-.491.762-.823v1.085h1.04c.454.004.903-.094 1.313-.288.397-.2.746-.484 1.024-.832.311-.381.549-.817.7-1.286a5.19 5.19 0 0 0 .245-1.663 6.127 6.127 0 0 0-.455-2.555ZM9.794 8a2.625 2.625 0 0 1-.525 1.75 1.75 1.75 0 0 1-1.339.578 1.75 1.75 0 0 1-1.347-.578A2.625 2.625 0 0 1 6.058 8a2.625 2.625 0 0 1 .525-1.75 1.75 1.75 0 0 1 1.347-.578 1.75 1.75 0 0 1 1.339.578c.379.502.565 1.123.525 1.75Z"></path></svg>';
 
 class IconAtSymbol extends HTMLElement {
     constructor () {

package/dist/IconAtSymbolLarge.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--atSymbolLarge"><path d="M15.886 27.086a10.577 10.577 0 0 1-4.165-.805 10.14 10.14 0 0 1-3.342-2.248 10.405 10.405 0 0 1-2.205-3.448 11.83 11.83 0 0 1-.796-4.375 12.906 12.906 0 0 1 .796-4.585 10.5 10.5 0 0 1 2.222-3.579 9.8 9.8 0 0 1 3.386-2.31 10.946 10.946 0 0 1 4.305-.822c1.379-.009 2.75.204 4.06.63A9.46 9.46 0 0 1 23.5 7.442a8.97 8.97 0 0 1 2.284 3.142 10.64 10.64 0 0 1 .874 4.375 8.95 8.95 0 0 1-.463 2.791 6.676 6.676 0 0 1-1.181 2.161 5.248 5.248 0 0 1-1.75 1.383 5.04 5.04 0 0 1-2.197.481H19.44v-2.126h-.175c-.3.712-.802 1.32-1.444 1.75a4.007 4.007 0 0 1-2.319.691 4.97 4.97 0 0 1-2.056-.429 4.76 4.76 0 0 1-1.636-1.286 5.855 5.855 0 0 1-1.059-1.881A7.34 7.34 0 0 1 10.321 16a7 7 0 0 1 .429-2.45 5.853 5.853 0 0 1 1.059-1.925 4.926 4.926 0 0 1 1.636-1.242 4.838 4.838 0 0 1 2.056-.438 4.19 4.19 0 0 1 2.336.647 3.44 3.44 0 0 1 1.427 1.75h.175v-2.108h1.916V20.27a2.625 2.625 0 0 0 1.339-.376c.445-.27.822-.638 1.102-1.076.34-.524.588-1.1.735-1.707.183-.732.271-1.485.263-2.24a9.171 9.171 0 0 0-.7-3.745 7.193 7.193 0 0 0-1.899-2.564 7.604 7.604 0 0 0-2.782-1.478c-1.08-.318-2.2-.477-3.326-.473a9.266 9.266 0 0 0-3.543.639 7.779 7.779 0 0 0-2.748 1.925 8.592 8.592 0 0 0-1.75 3.01 11.803 11.803 0 0 0-.63 3.981 10.5 10.5 0 0 0 .648 3.736 8.654 8.654 0 0 0 1.759 2.923A8.173 8.173 0 0 0 12.5 24.75a8.356 8.356 0 0 0 3.386.674 9.705 9.705 0 0 0 2.118-.219 7.877 7.877 0 0 0 1.75-.604l.621 1.488c-.643.3-1.314.538-2.004.709-.813.198-1.648.295-2.485.288Zm0-15.356a3.201 3.201 0 0 0-2.511 1.067A4.733 4.733 0 0 0 12.439 16a4.707 4.707 0 0 0 .936 3.229 3.203 3.203 0 0 0 2.494 1.067 3.149 3.149 0 0 0 2.45-1.067 4.664 4.664 0 0 0 .98-3.229 4.69 4.69 0 0 0-.963-3.22 3.15 3.15 0 0 0-2.45-1.05Z"></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--atSymbolLarge"><path d="M15.886 27.086a10.577 10.577 0 0 1-4.165-.805 10.14 10.14 0 0 1-3.342-2.248 10.405 10.405 0 0 1-2.205-3.448 11.83 11.83 0 0 1-.796-4.375 12.906 12.906 0 0 1 .796-4.585 10.5 10.5 0 0 1 2.222-3.579 9.8 9.8 0 0 1 3.386-2.31 10.946 10.946 0 0 1 4.305-.822c1.379-.009 2.75.204 4.06.63A9.46 9.46 0 0 1 23.5 7.442a8.97 8.97 0 0 1 2.284 3.142 10.64 10.64 0 0 1 .874 4.375 8.95 8.95 0 0 1-.463 2.791 6.676 6.676 0 0 1-1.181 2.161 5.248 5.248 0 0 1-1.75 1.383 5.04 5.04 0 0 1-2.197.481H19.44v-2.126h-.175c-.3.712-.802 1.32-1.444 1.75a4.007 4.007 0 0 1-2.319.691 4.97 4.97 0 0 1-2.056-.429 4.76 4.76 0 0 1-1.636-1.286 5.855 5.855 0 0 1-1.059-1.881A7.34 7.34 0 0 1 10.321 16a7 7 0 0 1 .429-2.45 5.853 5.853 0 0 1 1.059-1.925 4.926 4.926 0 0 1 1.636-1.242 4.838 4.838 0 0 1 2.056-.438 4.19 4.19 0 0 1 2.336.647 3.44 3.44 0 0 1 1.427 1.75h.175v-2.108h1.916V20.27a2.625 2.625 0 0 0 1.339-.376c.445-.27.822-.638 1.102-1.076.34-.524.588-1.1.735-1.707.183-.732.271-1.485.263-2.24a9.171 9.171 0 0 0-.7-3.745 7.193 7.193 0 0 0-1.899-2.564 7.604 7.604 0 0 0-2.782-1.478c-1.08-.318-2.2-.477-3.326-.473a9.266 9.266 0 0 0-3.543.639 7.779 7.779 0 0 0-2.748 1.925 8.592 8.592 0 0 0-1.75 3.01 11.803 11.803 0 0 0-.63 3.981 10.5 10.5 0 0 0 .648 3.736 8.654 8.654 0 0 0 1.759 2.923A8.173 8.173 0 0 0 12.5 24.75a8.356 8.356 0 0 0 3.386.674 9.705 9.705 0 0 0 2.118-.219 7.877 7.877 0 0 0 1.75-.604l.621 1.488c-.643.3-1.314.538-2.004.709-.813.198-1.648.295-2.485.288Zm0-15.356a3.201 3.201 0 0 0-2.511 1.067A4.733 4.733 0 0 0 12.439 16a4.707 4.707 0 0 0 .936 3.229 3.203 3.203 0 0 0 2.494 1.067 3.149 3.149 0 0 0 2.45-1.067 4.664 4.664 0 0 0 .98-3.229 4.69 4.69 0 0 0-.963-3.22 3.15 3.15 0 0 0-2.45-1.05Z"></path></svg>';
 
 class IconAtSymbolLarge extends HTMLElement {
     constructor () {

package/dist/IconAtom.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--atom"><path d="M12.375 8c.499-.64.94-1.322 1.321-2.039 1.041-2.047.586-3.141 0-3.701C12.62 1.131 10.625 1.621 8 3.625c-.637-.51-1.32-.961-2.039-1.347C3.914 1.236 2.82 1.69 2.26 2.26s-1.024 1.654 0 3.701A14 14 0 0 0 3.625 8a14 14 0 0 0-1.321 2.039c-1.042 2.047-.587 3.141 0 3.701a2.047 2.047 0 0 0 1.513.604c1.12 0 2.555-.665 4.227-1.951.637.504 1.32.95 2.038 1.33a4.839 4.839 0 0 0 2.17.62 2.038 2.038 0 0 0 1.532-.603c.568-.56 1.023-1.654 0-3.701-.409-.72-.88-1.402-1.41-2.039Zm.411-4.812c.49.48.044 1.575-.262 2.178-.298.555-.64 1.085-1.024 1.584-.376-.42-.77-.875-1.208-1.277-.437-.403-.875-.875-1.286-1.208 1.811-1.312 3.264-1.82 3.806-1.277h-.026Zm-9.625 9.624c-.49-.48 0-1.574.263-2.178.314-.557.674-1.087 1.076-1.584.376.42.77.875 1.207 1.277.438.403.875.832 1.287 1.208-1.812 1.313-3.264 1.82-3.807 1.277h-.026Zm9.625 0c-.481.49-1.575.044-2.179-.262A17.34 17.34 0 0 1 6.6 9.4c-.473-.472-.875-.936-1.295-1.4A23.37 23.37 0 0 1 6.6 6.6c.233-.24.47-.467.709-.682l-.875-.963c-.254.228-.5.464-.744.718A17.66 17.66 0 0 0 4.482 6.95 11.524 11.524 0 0 1 3.45 5.375c-.306-.604-.753-1.697-.263-2.179.49-.481 1.575 0 2.18.263C6.858 4.3 8.216 5.359 9.4 6.6c.472.473.875.936 1.295 1.4-.394.464-.823.928-1.295 1.4-.245.254-.499.49-.744.726l.875.963c.263-.245.525-.499.779-.761.437-.43.831-.875 1.207-1.278.387.496.732 1.023 1.033 1.575.306.613.752 1.75.262 2.188h-.026Z"></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--atom"><path d="M12.375 8c.499-.64.94-1.322 1.321-2.039 1.041-2.047.586-3.141 0-3.701C12.62 1.131 10.625 1.621 8 3.625c-.637-.51-1.32-.961-2.039-1.347C3.914 1.236 2.82 1.69 2.26 2.26s-1.024 1.654 0 3.701A14 14 0 0 0 3.625 8a14 14 0 0 0-1.321 2.039c-1.042 2.047-.587 3.141 0 3.701a2.047 2.047 0 0 0 1.513.604c1.12 0 2.555-.665 4.227-1.951.637.504 1.32.95 2.038 1.33a4.839 4.839 0 0 0 2.17.62 2.038 2.038 0 0 0 1.532-.603c.568-.56 1.023-1.654 0-3.701-.409-.72-.88-1.402-1.41-2.039Zm.411-4.812c.49.48.044 1.575-.262 2.178-.298.555-.64 1.085-1.024 1.584-.376-.42-.77-.875-1.208-1.277-.437-.403-.875-.875-1.286-1.208 1.811-1.312 3.264-1.82 3.806-1.277h-.026Zm-9.625 9.624c-.49-.48 0-1.574.263-2.178.314-.557.674-1.087 1.076-1.584.376.42.77.875 1.207 1.277.438.403.875.832 1.287 1.208-1.812 1.313-3.264 1.82-3.807 1.277h-.026Zm9.625 0c-.481.49-1.575.044-2.179-.262A17.34 17.34 0 0 1 6.6 9.4c-.473-.472-.875-.936-1.295-1.4A23.37 23.37 0 0 1 6.6 6.6c.233-.24.47-.467.709-.682l-.875-.963c-.254.228-.5.464-.744.718A17.66 17.66 0 0 0 4.482 6.95 11.524 11.524 0 0 1 3.45 5.375c-.306-.604-.753-1.697-.263-2.179.49-.481 1.575 0 2.18.263C6.858 4.3 8.216 5.359 9.4 6.6c.472.473.875.936 1.295 1.4-.394.464-.823.928-1.295 1.4-.245.254-.499.49-.744.726l.875.963c.263-.245.525-.499.779-.761.437-.43.831-.875 1.207-1.278.387.496.732 1.023 1.033 1.575.306.613.752 1.75.262 2.188h-.026Z"></path></svg>';
 
 class IconAtom extends HTMLElement {
     constructor () {

package/dist/IconAtomLarge.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--atomLarge"><path d="M25.861 11.826c1.75-3.5 1.032-5.294.096-6.221-1.899-1.908-5.425-.98-9.957 2.52-4.445-3.5-8.041-4.463-9.958-2.538-1.916 1.925-.953 5.522 2.538 9.975-3.5 4.454-4.463 8.042-2.538 9.958a3.36 3.36 0 0 0 2.494.98c1.934 0 4.48-1.199 7.455-3.5 2.94 2.31 5.504 3.5 7.464 3.5a3.385 3.385 0 0 0 2.502-.98c1.925-1.916.954-5.504-2.537-9.958a23.279 23.279 0 0 0 2.441-3.736ZM24.75 6.84c1.146 1.146.148 3.928-2.442 7.332-.743-.796-1.522-1.671-2.388-2.546a43.566 43.566 0 0 0-2.529-2.363c3.439-2.598 6.221-3.535 7.359-2.423ZM7.25 24.286c-1.12-1.146-.123-3.911 2.467-7.332a50.58 50.58 0 0 0 2.363 2.528c.866.867 1.75 1.654 2.528 2.363-3.438 2.616-6.22 3.552-7.358 2.441Zm17.447 0c-1.584 1.584-6.273-.875-11.375-6.037-.875-.92-1.75-1.812-2.476-2.687.735-.875 1.566-1.75 2.476-2.686.42-.42.875-.822 1.26-1.216l-1.207-1.278c-.438.403-.875.823-1.304 1.26-.875.875-1.645 1.75-2.362 2.53-2.582-3.422-3.58-6.187-2.46-7.333a1.75 1.75 0 0 1 1.34-.464c2.16 0 5.993 2.406 10.097 6.501.875.919 1.75 1.811 2.476 2.686-.735.875-1.566 1.75-2.476 2.687-.446.446-.875.875-1.339 1.277l1.19 1.286c.464-.428.928-.875 1.383-1.33a43.538 43.538 0 0 0 2.353-2.537c2.6 3.43 3.597 6.195 2.477 7.341h-.053ZM16 17.505a1.943 1.943 0 1 1 1.942-1.943A1.935 1.935 0 0 1 16 17.505Z"></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--atomLarge"><path d="M25.861 11.826c1.75-3.5 1.032-5.294.096-6.221-1.899-1.908-5.425-.98-9.957 2.52-4.445-3.5-8.041-4.463-9.958-2.538-1.916 1.925-.953 5.522 2.538 9.975-3.5 4.454-4.463 8.042-2.538 9.958a3.36 3.36 0 0 0 2.494.98c1.934 0 4.48-1.199 7.455-3.5 2.94 2.31 5.504 3.5 7.464 3.5a3.385 3.385 0 0 0 2.502-.98c1.925-1.916.954-5.504-2.537-9.958a23.279 23.279 0 0 0 2.441-3.736ZM24.75 6.84c1.146 1.146.148 3.928-2.442 7.332-.743-.796-1.522-1.671-2.388-2.546a43.566 43.566 0 0 0-2.529-2.363c3.439-2.598 6.221-3.535 7.359-2.423ZM7.25 24.286c-1.12-1.146-.123-3.911 2.467-7.332a50.58 50.58 0 0 0 2.363 2.528c.866.867 1.75 1.654 2.528 2.363-3.438 2.616-6.22 3.552-7.358 2.441Zm17.447 0c-1.584 1.584-6.273-.875-11.375-6.037-.875-.92-1.75-1.812-2.476-2.687.735-.875 1.566-1.75 2.476-2.686.42-.42.875-.822 1.26-1.216l-1.207-1.278c-.438.403-.875.823-1.304 1.26-.875.875-1.645 1.75-2.362 2.53-2.582-3.422-3.58-6.187-2.46-7.333a1.75 1.75 0 0 1 1.34-.464c2.16 0 5.993 2.406 10.097 6.501.875.919 1.75 1.811 2.476 2.686-.735.875-1.566 1.75-2.476 2.687-.446.446-.875.875-1.339 1.277l1.19 1.286c.464-.428.928-.875 1.383-1.33a43.538 43.538 0 0 0 2.353-2.537c2.6 3.43 3.597 6.195 2.477 7.341h-.053ZM16 17.505a1.943 1.943 0 1 1 1.942-1.943A1.935 1.935 0 0 1 16 17.505Z"></path></svg>';
 
 class IconAtomLarge extends HTMLElement {
     constructor () {