@justeattakeaway/pie-icons-webc 0.3.0 → 0.4.0

package/dist/IconStar.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--star"><path d="m12.288 14.449-4.183-2.197a.219.219 0 0 0-.21 0L3.713 14.45 4.5 9.794a.254.254 0 0 0 0-.193L1.07 6.302l4.673-.682a.228.228 0 0 0 .166-.114L8 1.271l2.091 4.235a.227.227 0 0 0 .167.114l4.672.682-3.386 3.3a.254.254 0 0 0-.061.192l.805 4.655Zm-8.4-7.228 1.487 1.435a1.54 1.54 0 0 1 .438 1.356l-.35 2.04 1.828-.963a1.505 1.505 0 0 1 1.418 0l1.829.962-.35-2.039a1.539 1.539 0 0 1 .437-1.356l1.488-1.435-2.048-.297a1.531 1.531 0 0 1-1.19-.84L8 4.229l-.875 1.855a1.531 1.531 0 0 1-1.155.875l-2.082.262Z"></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--star"><path d="m12.288 14.449-4.183-2.197a.219.219 0 0 0-.21 0L3.713 14.45 4.5 9.794a.254.254 0 0 0 0-.193L1.07 6.302l4.673-.682a.228.228 0 0 0 .166-.114L8 1.271l2.091 4.235a.227.227 0 0 0 .167.114l4.672.682-3.386 3.3a.254.254 0 0 0-.061.192l.805 4.655Zm-8.4-7.228 1.487 1.435a1.54 1.54 0 0 1 .438 1.356l-.35 2.04 1.828-.963a1.505 1.505 0 0 1 1.418 0l1.829.962-.35-2.039a1.539 1.539 0 0 1 .437-1.356l1.488-1.435-2.048-.297a1.531 1.531 0 0 1-1.19-.84L8 4.229l-.875 1.855a1.531 1.531 0 0 1-1.155.875l-2.082.262Z"></path></svg>';
 
 class IconStar extends HTMLElement {
     constructor () {

package/dist/IconStarCircle.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--starCircle"><path fill-rule="evenodd" d="M1.219 8c0-3.736 3.045-6.781 6.781-6.781A6.787 6.787 0 0 1 14.781 8c0 3.736-3.045 6.781-6.781 6.781-3.736 0-6.781-3.045-6.781-6.781ZM2.53 8A5.47 5.47 0 0 0 8 13.469 5.47 5.47 0 0 0 13.469 8 5.476 5.476 0 0 0 8 2.531 5.476 5.476 0 0 0 2.531 8ZM8 5.322l.814 1.654 1.82.263L9.32 8.525l.306 1.811L8 9.48l-1.628.857.316-1.811-1.322-1.286 1.82-.263L8 5.322Z" 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--starCircle"><path fill-rule="evenodd" d="M1.219 8c0-3.736 3.045-6.781 6.781-6.781A6.787 6.787 0 0 1 14.781 8c0 3.736-3.045 6.781-6.781 6.781-3.736 0-6.781-3.045-6.781-6.781ZM2.53 8A5.47 5.47 0 0 0 8 13.469 5.47 5.47 0 0 0 13.469 8 5.476 5.476 0 0 0 8 2.531 5.476 5.476 0 0 0 2.531 8ZM8 5.322l.814 1.654 1.82.263L9.32 8.525l.306 1.811L8 9.48l-1.628.857.316-1.811-1.322-1.286 1.82-.263L8 5.322Z" clip-rule="evenodd"></path></svg>';
 
 class IconStarCircle extends HTMLElement {
     constructor () {

package/dist/IconStarCircleFilled.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--starCircleFilled"><path d="M8 1.219A6.781 6.781 0 1 0 14.781 8 6.79 6.79 0 0 0 8 1.219Zm1.627 9.117L8 9.48l-1.628.875.307-1.829-1.304-1.286 1.82-.263L8 5.322l.814 1.654 1.82.263L9.32 8.525l.306 1.811Z"></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--starCircleFilled"><path d="M8 1.219A6.781 6.781 0 1 0 14.781 8 6.79 6.79 0 0 0 8 1.219Zm1.627 9.117L8 9.48l-1.628.875.307-1.829-1.304-1.286 1.82-.263L8 5.322l.814 1.654 1.82.263L9.32 8.525l.306 1.811Z"></path></svg>';
 
 class IconStarCircleFilled extends HTMLElement {
     constructor () {

package/dist/IconStarCircleFilledLarge.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--starCircleFilledLarge"><path d="m17.829 16.866.656-.639 1.164-1.128-1.602-.236-.91-.132-.41-.822-.718-1.453-.718 1.453-.411.822-.91.132-1.601.236 1.163 1.128.657.64-.158.91-.271 1.6 1.435-.752.814-.429.813.429 1.435.753-.27-1.602-.158-.91Z"></path><path fill-rule="evenodd" d="M16 3.75C9.245 3.75 3.75 9.245 3.75 16S9.245 28.25 16 28.25 28.25 22.755 28.25 16 22.755 3.75 16 3.75Zm2.292 9.38 3.36.49h-.017a.873.873 0 0 1 .49 1.488l-2.433 2.37.578 3.343a.877.877 0 0 1-1.278.919l-3-1.575-3.002 1.575a.871.871 0 0 1-.928-.061.884.884 0 0 1-.35-.858l.578-3.342-2.433-2.371a.873.873 0 0 1 .49-1.488l3.36-.49 1.505-3.045c.15-.297.464-.446.788-.446s.639.149.787.446l1.505 3.045Z" 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 32 32" class="c-pieIcon c-pieIcon--starCircleFilledLarge"><path d="m17.829 16.866.656-.639 1.164-1.128-1.602-.236-.91-.132-.41-.822-.718-1.453-.718 1.453-.411.822-.91.132-1.601.236 1.163 1.128.657.64-.158.91-.271 1.6 1.435-.752.814-.429.813.429 1.435.753-.27-1.602-.158-.91Z"></path><path fill-rule="evenodd" d="M16 3.75C9.245 3.75 3.75 9.245 3.75 16S9.245 28.25 16 28.25 28.25 22.755 28.25 16 22.755 3.75 16 3.75Zm2.292 9.38 3.36.49h-.017a.873.873 0 0 1 .49 1.488l-2.433 2.37.578 3.343a.877.877 0 0 1-1.278.919l-3-1.575-3.002 1.575a.871.871 0 0 1-.928-.061.884.884 0 0 1-.35-.858l.578-3.342-2.433-2.371a.873.873 0 0 1 .49-1.488l3.36-.49 1.505-3.045c.15-.297.464-.446.788-.446s.639.149.787.446l1.505 3.045Z" clip-rule="evenodd"></path></svg>';
 
 class IconStarCircleFilledLarge extends HTMLElement {
     constructor () {

package/dist/IconStarCircleLarge.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--starCircleLarge"><path d="M16 3.75C9.245 3.75 3.75 9.245 3.75 16S9.245 28.25 16 28.25 28.25 22.755 28.25 16 22.755 3.75 16 3.75Zm0 22.75c-5.793 0-10.5-4.707-10.5-10.5S10.216 5.5 16 5.5 26.5 10.207 26.5 16 21.793 26.5 16 26.5Z"></path><path d="m21.652 13.62-3.36-.49-1.505-3.045c-.148-.298-.463-.446-.787-.446s-.639.149-.787.446l-1.505 3.045-3.36.49a.873.873 0 0 0-.49 1.488l2.432 2.37-.577 3.343a.884.884 0 0 0 .35.858.871.871 0 0 0 .928.061l3-1.575 3.002 1.575a.87.87 0 0 0 .927-.061.877.877 0 0 0 .35-.858l-.578-3.342 2.433-2.371a.873.873 0 0 0-.49-1.488h.017Zm-3.167 2.607-.656.64.157.91.271 1.6-1.434-.752-.814-.429-.814.429-1.435.753.271-1.602.158-.91-.656-.639-1.164-1.128 1.601-.236.91-.132.411-.822.718-1.453.717 1.453.412.822.91.132 1.6.236-1.163 1.128Z"></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--starCircleLarge"><path d="M16 3.75C9.245 3.75 3.75 9.245 3.75 16S9.245 28.25 16 28.25 28.25 22.755 28.25 16 22.755 3.75 16 3.75Zm0 22.75c-5.793 0-10.5-4.707-10.5-10.5S10.216 5.5 16 5.5 26.5 10.207 26.5 16 21.793 26.5 16 26.5Z"></path><path d="m21.652 13.62-3.36-.49-1.505-3.045c-.148-.298-.463-.446-.787-.446s-.639.149-.787.446l-1.505 3.045-3.36.49a.873.873 0 0 0-.49 1.488l2.432 2.37-.577 3.343a.884.884 0 0 0 .35.858.871.871 0 0 0 .928.061l3-1.575 3.002 1.575a.87.87 0 0 0 .927-.061.877.877 0 0 0 .35-.858l-.578-3.342 2.433-2.371a.873.873 0 0 0-.49-1.488h.017Zm-3.167 2.607-.656.64.157.91.271 1.6-1.434-.752-.814-.429-.814.429-1.435.753.271-1.602.158-.91-.656-.639-1.164-1.128 1.601-.236.91-.132.411-.822.718-1.453.717 1.453.412.822.91.132 1.6.236-1.163 1.128Z"></path></svg>';
 
 class IconStarCircleLarge extends HTMLElement {
     constructor () {

package/dist/IconStarFilled.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--starFilled"><path d="m12.288 14.449-4.183-2.197a.219.219 0 0 0-.21 0L3.713 14.45 4.5 9.794a.254.254 0 0 0 0-.193L1.07 6.302l4.673-.682a.228.228 0 0 0 .166-.114L8 1.271l2.091 4.235a.227.227 0 0 0 .167.114l4.672.682-3.386 3.3a.254.254 0 0 0-.061.192l.805 4.655Z"></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--starFilled"><path d="m12.288 14.449-4.183-2.197a.219.219 0 0 0-.21 0L3.713 14.45 4.5 9.794a.254.254 0 0 0 0-.193L1.07 6.302l4.673-.682a.228.228 0 0 0 .166-.114L8 1.271l2.091 4.235a.227.227 0 0 0 .167.114l4.672.682-3.386 3.3a.254.254 0 0 0-.061.192l.805 4.655Z"></path></svg>';
 
 class IconStarFilled extends HTMLElement {
     constructor () {

package/dist/IconStarFilledLarge.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--starFilledLarge"><path d="m24.601 29.029-8.199-4.279a.874.874 0 0 0-.813 0l-8.19 4.279 1.6-9.126a.875.875 0 0 0-.253-.77l-6.659-6.467 9.162-1.33a.874.874 0 0 0 .656-.48L16 2.56l4.095 8.295a.875.875 0 0 0 .656.481l9.161 1.33-6.623 6.467a.874.874 0 0 0-.254.77l1.566 9.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 32 32" class="c-pieIcon c-pieIcon--starFilledLarge"><path d="m24.601 29.029-8.199-4.279a.874.874 0 0 0-.813 0l-8.19 4.279 1.6-9.126a.875.875 0 0 0-.253-.77l-6.659-6.467 9.162-1.33a.874.874 0 0 0 .656-.48L16 2.56l4.095 8.295a.875.875 0 0 0 .656.481l9.161 1.33-6.623 6.467a.874.874 0 0 0-.254.77l1.566 9.126Z"></path></svg>';
 
 class IconStarFilledLarge extends HTMLElement {
     constructor () {

package/dist/IconStarHalfFilled.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--starHalfFilled"><path d="m11.544 9.601 3.386-3.299-4.672-.682a.227.227 0 0 1-.167-.114l-2.09-4.235-2.092 4.235a.228.228 0 0 1-.166.114l-4.673.682 3.43 3.3a.254.254 0 0 1 .061.192l-.848 4.655 4.182-2.197a.219.219 0 0 1 .21 0l4.183 2.197-.788-4.655a.251.251 0 0 1 .044-.193Zm-1.356.411.35 2.04-1.83-.963A1.54 1.54 0 0 0 8 10.914V4.229l.875 1.855a1.531 1.531 0 0 0 1.155.875l2.048.297-1.453 1.4a1.54 1.54 0 0 0-.437 1.356Z"></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--starHalfFilled"><path d="m11.544 9.601 3.386-3.299-4.672-.682a.227.227 0 0 1-.167-.114l-2.09-4.235-2.092 4.235a.228.228 0 0 1-.166.114l-4.673.682 3.43 3.3a.254.254 0 0 1 .061.192l-.848 4.655 4.182-2.197a.219.219 0 0 1 .21 0l4.183 2.197-.788-4.655a.251.251 0 0 1 .044-.193Zm-1.356.411.35 2.04-1.83-.963A1.54 1.54 0 0 0 8 10.914V4.229l.875 1.855a1.531 1.531 0 0 0 1.155.875l2.048.297-1.453 1.4a1.54 1.54 0 0 0-.437 1.356Z"></path></svg>';
 
 class IconStarHalfFilled extends HTMLElement {
     constructor () {

package/dist/IconStarHalfFilledLarge.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--starHalfFilledLarge"><path d="m23.289 19.133 6.623-6.467-9.16-1.33a.875.875 0 0 1-.657-.48L16 2.56l-4.095 8.295a.875.875 0 0 1-.656.481l-9.162 1.33 6.624 6.467a.874.874 0 0 1 .254.77l-1.566 9.126 8.19-4.279a.874.874 0 0 1 .813 0l8.2 4.314L23 19.903a.875.875 0 0 1 .289-.77Zm-6.064 4.033A2.625 2.625 0 0 0 16 22.87V6.515l2.529 5.11a2.624 2.624 0 0 0 1.977 1.435l5.644.823-4.086 3.98a2.624 2.624 0 0 0-.753 2.328l.963 5.627-5.05-2.652Z"></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--starHalfFilledLarge"><path d="m23.289 19.133 6.623-6.467-9.16-1.33a.875.875 0 0 1-.657-.48L16 2.56l-4.095 8.295a.875.875 0 0 1-.656.481l-9.162 1.33 6.624 6.467a.874.874 0 0 1 .254.77l-1.566 9.126 8.19-4.279a.874.874 0 0 1 .813 0l8.2 4.314L23 19.903a.875.875 0 0 1 .289-.77Zm-6.064 4.033A2.625 2.625 0 0 0 16 22.87V6.515l2.529 5.11a2.624 2.624 0 0 0 1.977 1.435l5.644.823-4.086 3.98a2.624 2.624 0 0 0-.753 2.328l.963 5.627-5.05-2.652Z"></path></svg>';
 
 class IconStarHalfFilledLarge extends HTMLElement {
     constructor () {

package/dist/IconStarLarge.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--starLarge"><path d="m24.601 29.029-8.199-4.279a.874.874 0 0 0-.813 0l-8.19 4.279 1.6-9.126a.875.875 0 0 0-.253-.77l-6.659-6.467 9.162-1.33a.875.875 0 0 0 .656-.48L16 2.56l4.095 8.295a.875.875 0 0 0 .656.481l9.161 1.33-6.623 6.467a.874.874 0 0 0-.254.77l1.566 9.126ZM16 22.904c.426-.002.847.1 1.225.297l5.049 2.625-.963-5.626a2.624 2.624 0 0 1 .753-2.327l4.086-3.982-5.644-.822a2.624 2.624 0 0 1-1.977-1.444l-2.53-5.11-2.528 5.11a2.625 2.625 0 0 1-1.977 1.435l-5.644.823 4.086 3.98a2.625 2.625 0 0 1 .753 2.328l-.963 5.627 5.049-2.625A2.625 2.625 0 0 1 16 22.869v.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 32 32" class="c-pieIcon c-pieIcon--starLarge"><path d="m24.601 29.029-8.199-4.279a.874.874 0 0 0-.813 0l-8.19 4.279 1.6-9.126a.875.875 0 0 0-.253-.77l-6.659-6.467 9.162-1.33a.875.875 0 0 0 .656-.48L16 2.56l4.095 8.295a.875.875 0 0 0 .656.481l9.161 1.33-6.623 6.467a.874.874 0 0 0-.254.77l1.566 9.126ZM16 22.904c.426-.002.847.1 1.225.297l5.049 2.625-.963-5.626a2.624 2.624 0 0 1 .753-2.327l4.086-3.982-5.644-.822a2.624 2.624 0 0 1-1.977-1.444l-2.53-5.11-2.528 5.11a2.625 2.625 0 0 1-1.977 1.435l-5.644.823 4.086 3.98a2.625 2.625 0 0 1 .753 2.328l-.963 5.627 5.049-2.625A2.625 2.625 0 0 1 16 22.869v.035Z"></path></svg>';
 
 class IconStarLarge extends HTMLElement {
     constructor () {

package/dist/IconStopwatch.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--stopwatch"><path d="M13.547 9.234a5.547 5.547 0 0 1-10.114 3.141h1.75A4.165 4.165 0 0 0 8 13.469a4.235 4.235 0 1 0 0-8.461A4.191 4.191 0 0 0 5.008 6.25H3.336a5.539 5.539 0 0 1 10.212 2.984ZM7.344 6.705v2.966L9.67 11.23l.727-1.094-1.75-1.164V6.705H7.344ZM5.375 9.969H2.531l.438 1.312h2.406V9.97Zm0-2.625H1l.438 1.312h3.937V7.344Zm4.804-4.83-.315-1.295H6.136l-.315 1.295h4.375-.017Z"></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--stopwatch"><path d="M13.547 9.234a5.547 5.547 0 0 1-10.114 3.141h1.75A4.165 4.165 0 0 0 8 13.469a4.235 4.235 0 1 0 0-8.461A4.191 4.191 0 0 0 5.008 6.25H3.336a5.539 5.539 0 0 1 10.212 2.984ZM7.344 6.705v2.966L9.67 11.23l.727-1.094-1.75-1.164V6.705H7.344ZM5.375 9.969H2.531l.438 1.312h2.406V9.97Zm0-2.625H1l.438 1.312h3.937V7.344Zm4.804-4.83-.315-1.295H6.136l-.315 1.295h4.375-.017Z"></path></svg>';
 
 class IconStopwatch extends HTMLElement {
     constructor () {

package/dist/IconStopwatchFilled.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--stopwatchFilled"><path d="M8 3.695A5.547 5.547 0 0 0 3.336 6.25H5.83a.665.665 0 0 1 .656.656v4.821a.665.665 0 0 1-.656.657H3.433A5.546 5.546 0 0 0 13.55 9.076 5.548 5.548 0 0 0 8 3.695Zm2.398 6.44-.727 1.094L7.344 9.67V6.705h1.312V8.97l1.742 1.164Z"></path><path d="m10.179 2.514-.315-1.295H6.136l-.315 1.295v.017h4.358v-.017Z"></path><path d="M5.375 8.656V7.344H1l.438 1.312h3.937Z"></path><path d="M5.375 11.281V9.97H2.531l.438 1.312h2.406Z"></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--stopwatchFilled"><path d="M8 3.695A5.547 5.547 0 0 0 3.336 6.25H5.83a.665.665 0 0 1 .656.656v4.821a.665.665 0 0 1-.656.657H3.433A5.546 5.546 0 0 0 13.55 9.076 5.548 5.548 0 0 0 8 3.695Zm2.398 6.44-.727 1.094L7.344 9.67V6.705h1.312V8.97l1.742 1.164Z"></path><path d="m10.179 2.514-.315-1.295H6.136l-.315 1.295v.017h4.358v-.017Z"></path><path d="M5.375 8.656V7.344H1l.438 1.312h3.937Z"></path><path d="M5.375 11.281V9.97H2.531l.438 1.312h2.406Z"></path></svg>';
 
 class IconStopwatchFilled extends HTMLElement {
     constructor () {

package/dist/IconStopwatchFilledLarge.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--stopwatchFilledLarge"><path d="M17.75 6.419V4.625h3.5l-.604-1.75h-7.542l-.604 1.75H16v1.794a11.375 11.375 0 0 0-9.625 6.956h4.375a.875.875 0 0 1 .875.875v7a.875.875 0 0 1-.875.875H6.375A11.375 11.375 0 1 0 17.75 6.419ZM16 11.669h1.75v5.626l3.946 2.371-.875 1.505L16 18.25v-6.58Z"></path><path d="M9.875 16.875v-1.75H2l.788 1.75h7.087Z"></path><path d="M9.875 20.375v-1.75h-5.25l.787 1.75h4.463Z"></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--stopwatchFilledLarge"><path d="M17.75 6.419V4.625h3.5l-.604-1.75h-7.542l-.604 1.75H16v1.794a11.375 11.375 0 0 0-9.625 6.956h4.375a.875.875 0 0 1 .875.875v7a.875.875 0 0 1-.875.875H6.375A11.375 11.375 0 1 0 17.75 6.419ZM16 11.669h1.75v5.626l3.946 2.371-.875 1.505L16 18.25v-6.58Z"></path><path d="M9.875 16.875v-1.75H2l.788 1.75h7.087Z"></path><path d="M9.875 20.375v-1.75h-5.25l.787 1.75h4.463Z"></path></svg>';
 
 class IconStopwatchFilledLarge extends HTMLElement {
     constructor () {

package/dist/IconStopwatchLarge.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--stopwatchLarge"><path d="M28.25 17.75a11.375 11.375 0 0 1-21.875 4.375h1.934a9.625 9.625 0 1 0 0-8.75H6.375a11.375 11.375 0 0 1 9.625-7v-1.75h-3.5l.604-1.75h7.542l.604 1.75h-3.5v1.794a11.375 11.375 0 0 1 10.5 11.331ZM16 11.625v6.624l4.804 2.879.875-1.506-3.929-2.37v-5.627H16Zm-6.125 7h-5.25l.787 1.75h4.463v-1.75Zm0-3.5H2l.788 1.75h7.087v-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--stopwatchLarge"><path d="M28.25 17.75a11.375 11.375 0 0 1-21.875 4.375h1.934a9.625 9.625 0 1 0 0-8.75H6.375a11.375 11.375 0 0 1 9.625-7v-1.75h-3.5l.604-1.75h7.542l.604 1.75h-3.5v1.794a11.375 11.375 0 0 1 10.5 11.331ZM16 11.625v6.624l4.804 2.879.875-1.506-3.929-2.37v-5.627H16Zm-6.125 7h-5.25l.787 1.75h4.463v-1.75Zm0-3.5H2l.788 1.75h7.087v-1.75Z"></path></svg>';
 
 class IconStopwatchLarge extends HTMLElement {
     constructor () {

package/dist/IconSun.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--sun"><path d="M7.344 13.425v1.137h1.312v-1.137a5.538 5.538 0 0 1-.656.044 5.538 5.538 0 0 1-.656-.044Z"></path><path d="M8.656 2.575V1.411H7.344v1.164c.217-.028.436-.042.656-.044.22.002.438.016.656.044Z"></path><path d="M13.425 8.639h1.155V7.326h-1.155c.027.224.042.449.044.674a5.11 5.11 0 0 1-.044.639Z"></path><path d="M2.575 7.326H1.42V8.64h1.155A5.11 5.11 0 0 1 2.53 8a5.81 5.81 0 0 1 .044-.674Z"></path><path d="m4.64 3.695-.823-.822-.927.927.814.822c.276-.343.59-.654.936-.927Z"></path><path d="m11.377 12.296.805.805.928-.927-.805-.814c-.273.346-.584.66-.928.936Z"></path><path d="M11.377 12.287c.344-.276.655-.59.928-.936-.27.349-.582.663-.928.936Z"></path><path d="M3.704 4.622c.276-.343.59-.654.936-.927-.348.27-.663.582-.936.927Z"></path><path d="m12.296 4.622.814-.822-.928-.927-.822.822c.346.273.66.584.936.927Z"></path><path d="m3.695 11.36-.805.814.927.927.805-.805a5.863 5.863 0 0 1-.927-.936Z"></path><path d="M4.622 12.296a5.863 5.863 0 0 1-.927-.936c.27.348.582.663.927.936Z"></path><path d="M12.287 4.622a5.863 5.863 0 0 0-.936-.927c.348.27.663.582.936.927Z"></path><path d="M8 3.844a4.156 4.156 0 1 0 0 8.312 4.156 4.156 0 0 0 0-8.312Zm0 7A2.844 2.844 0 1 1 10.844 8 2.853 2.853 0 0 1 8 10.844Z"></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--sun"><path d="M7.344 13.425v1.137h1.312v-1.137a5.538 5.538 0 0 1-.656.044 5.538 5.538 0 0 1-.656-.044Z"></path><path d="M8.656 2.575V1.411H7.344v1.164c.217-.028.436-.042.656-.044.22.002.438.016.656.044Z"></path><path d="M13.425 8.639h1.155V7.326h-1.155c.027.224.042.449.044.674a5.11 5.11 0 0 1-.044.639Z"></path><path d="M2.575 7.326H1.42V8.64h1.155A5.11 5.11 0 0 1 2.53 8a5.81 5.81 0 0 1 .044-.674Z"></path><path d="m4.64 3.695-.823-.822-.927.927.814.822c.276-.343.59-.654.936-.927Z"></path><path d="m11.377 12.296.805.805.928-.927-.805-.814c-.273.346-.584.66-.928.936Z"></path><path d="M11.377 12.287c.344-.276.655-.59.928-.936-.27.349-.582.663-.928.936Z"></path><path d="M3.704 4.622c.276-.343.59-.654.936-.927-.348.27-.663.582-.936.927Z"></path><path d="m12.296 4.622.814-.822-.928-.927-.822.822c.346.273.66.584.936.927Z"></path><path d="m3.695 11.36-.805.814.927.927.805-.805a5.863 5.863 0 0 1-.927-.936Z"></path><path d="M4.622 12.296a5.863 5.863 0 0 1-.927-.936c.27.348.582.663.927.936Z"></path><path d="M12.287 4.622a5.863 5.863 0 0 0-.936-.927c.348.27.663.582.936.927Z"></path><path d="M8 3.844a4.156 4.156 0 1 0 0 8.312 4.156 4.156 0 0 0 0-8.312Zm0 7A2.844 2.844 0 1 1 10.844 8 2.853 2.853 0 0 1 8 10.844Z"></path></svg>';
 
 class IconSun extends HTMLElement {
     constructor () {

package/dist/IconSunLarge.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--sunLarge"><path d="M15.125 26.5v2.625h1.75V26.5c-.289 0-.578.044-.875.044-.297 0-.586-.044-.875-.044Z"></path><path d="M16.875 5.544V2.875h-1.75v2.669H16c.297 0 .586-.044.875 0Z"></path><path d="M2.875 15.125v1.75h2.669v-1.75H2.875Z"></path><path d="M26.5 15.125c0 .289.044.578.044.875 0 .297 0 .586-.044.875h2.625v-1.75H26.5Z"></path><path d="M22.773 7.994c.445.375.858.788 1.233 1.233l1.89-1.89-1.233-1.233-1.89 1.89Z"></path><path d="m7.994 22.773-1.89 1.89 1.234 1.233 1.89-1.89a10.278 10.278 0 0 1-1.234-1.233Z"></path><path d="m22.773 24.006 1.89 1.89 1.233-1.233-1.89-1.89c-.375.445-.788.858-1.233 1.233Z"></path><path d="m9.228 7.994-1.89-1.89-1.234 1.234 1.89 1.89c.375-.446.788-.859 1.234-1.234Z"></path><path d="M24.75 16c0-.297 0-.586-.044-.875a8.75 8.75 0 0 0-7.831-7.831h-1.75a8.75 8.75 0 0 0-7.831 7.875v1.75a8.75 8.75 0 0 0 7.875 7.875c.288 0 .577.043.875.043.297 0 .586 0 .875-.043a8.75 8.75 0 0 0 7.831-7.919V16Zm-1.986 1.75v.061a6.785 6.785 0 0 1-.726 1.689 7.14 7.14 0 0 1-2.538 2.538c-.526.31-1.09.549-1.68.708h-.061a7 7 0 1 1-.009-13.51h.061a6.78 6.78 0 0 1 1.689.726 7.14 7.14 0 0 1 2.538 2.538c.31.525.549 1.09.708 1.68v.061a6.8 6.8 0 0 1 0 3.553l.018-.044Z"></path><path d="M20.288 21.521a7.14 7.14 0 0 0 1.75-2.021c-.16.26-.332.51-.517.753-.355.474-.77.9-1.233 1.268Z"></path><path d="M22.764 17.75Z"></path><path d="M17.75 9.236Z"></path><path d="M16 23Z"></path><path d="M22.939 15.125a7.002 7.002 0 0 0 0 0Z"></path><path d="M21.521 11.713a7.14 7.14 0 0 0-2.021-1.75c.26.158.51.33.753.516.474.355.9.77 1.268 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--sunLarge"><path d="M15.125 26.5v2.625h1.75V26.5c-.289 0-.578.044-.875.044-.297 0-.586-.044-.875-.044Z"></path><path d="M16.875 5.544V2.875h-1.75v2.669H16c.297 0 .586-.044.875 0Z"></path><path d="M2.875 15.125v1.75h2.669v-1.75H2.875Z"></path><path d="M26.5 15.125c0 .289.044.578.044.875 0 .297 0 .586-.044.875h2.625v-1.75H26.5Z"></path><path d="M22.773 7.994c.445.375.858.788 1.233 1.233l1.89-1.89-1.233-1.233-1.89 1.89Z"></path><path d="m7.994 22.773-1.89 1.89 1.234 1.233 1.89-1.89a10.278 10.278 0 0 1-1.234-1.233Z"></path><path d="m22.773 24.006 1.89 1.89 1.233-1.233-1.89-1.89c-.375.445-.788.858-1.233 1.233Z"></path><path d="m9.228 7.994-1.89-1.89-1.234 1.234 1.89 1.89c.375-.446.788-.859 1.234-1.234Z"></path><path d="M24.75 16c0-.297 0-.586-.044-.875a8.75 8.75 0 0 0-7.831-7.831h-1.75a8.75 8.75 0 0 0-7.831 7.875v1.75a8.75 8.75 0 0 0 7.875 7.875c.288 0 .577.043.875.043.297 0 .586 0 .875-.043a8.75 8.75 0 0 0 7.831-7.919V16Zm-1.986 1.75v.061a6.785 6.785 0 0 1-.726 1.689 7.14 7.14 0 0 1-2.538 2.538c-.526.31-1.09.549-1.68.708h-.061a7 7 0 1 1-.009-13.51h.061a6.78 6.78 0 0 1 1.689.726 7.14 7.14 0 0 1 2.538 2.538c.31.525.549 1.09.708 1.68v.061a6.8 6.8 0 0 1 0 3.553l.018-.044Z"></path><path d="M20.288 21.521a7.14 7.14 0 0 0 1.75-2.021c-.16.26-.332.51-.517.753-.355.474-.77.9-1.233 1.268Z"></path><path d="M22.764 17.75Z"></path><path d="M17.75 9.236Z"></path><path d="M16 23Z"></path><path d="M22.939 15.125a7.002 7.002 0 0 0 0 0Z"></path><path d="M21.521 11.713a7.14 7.14 0 0 0-2.021-1.75c.26.158.51.33.753.516.474.355.9.77 1.268 1.234Z"></path></svg>';
 
 class IconSunLarge extends HTMLElement {
     constructor () {

package/dist/IconSushi.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--sushi"><g clip-path="url(#prefix__clip0_4_481)"><path d="m1.875 11.412 3.841-1.18-1.295 3.893h1.383L7.256 9.75 15 7.379l-.385-1.26h-.114a3.15 3.15 0 0 0-.586-3.684l-.359-.359a3.272 3.272 0 0 0-3.587-.612L8.76 1.105 6.25 8.7l-4.375 1.339v1.373Zm7.726-8.015.359-.358a1.899 1.899 0 0 1 2.045-.403c.226.093.432.23.606.403l.359.358a1.863 1.863 0 0 1 .551 1.33 1.83 1.83 0 0 1-.551 1.322l-.359.358a1.916 1.916 0 0 1-2.625 0l-.359-.358a1.881 1.881 0 0 1-.026-2.652Zm-1.269 3.16c.1.15.213.292.342.42l.359.358c.138.134.287.257.446.367l-1.706.525.56-1.67Z"></path><path d="m10.695 3.971-.16.161a.84.84 0 0 0-.001 1.188l.16.161a.84.84 0 0 0 1.189 0l.16-.16a.84.84 0 0 0 0-1.189l-.16-.16a.84.84 0 0 0-1.188 0Z"></path></g><defs><clipPath id="prefix__clip0_4_481"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></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--sushi"><g clip-path="url(#prefix__clip0_4_481)"><path d="m1.875 11.412 3.841-1.18-1.295 3.893h1.383L7.256 9.75 15 7.379l-.385-1.26h-.114a3.15 3.15 0 0 0-.586-3.684l-.359-.359a3.272 3.272 0 0 0-3.587-.612L8.76 1.105 6.25 8.7l-4.375 1.339v1.373Zm7.726-8.015.359-.358a1.899 1.899 0 0 1 2.045-.403c.226.093.432.23.606.403l.359.358a1.863 1.863 0 0 1 .551 1.33 1.83 1.83 0 0 1-.551 1.322l-.359.358a1.916 1.916 0 0 1-2.625 0l-.359-.358a1.881 1.881 0 0 1-.026-2.652Zm-1.269 3.16c.1.15.213.292.342.42l.359.358c.138.134.287.257.446.367l-1.706.525.56-1.67Z"></path><path d="m10.695 3.971-.16.161a.84.84 0 0 0-.001 1.188l.16.161a.84.84 0 0 0 1.189 0l.16-.16a.84.84 0 0 0 0-1.189l-.16-.16a.84.84 0 0 0-1.188 0Z"></path></g><defs><clipPath id="prefix__clip0_4_481"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
 
 class IconSushi extends HTMLElement {
     constructor () {

package/dist/IconSushiLarge.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--sushiLarge"><path d="M25.293 6.375a2.818 2.818 0 0 0-3.894 0l-.368.359a2.748 2.748 0 0 0 0 3.893l.368.368a2.73 2.73 0 0 0 1.942.805c.732 0 1.433-.29 1.951-.805l.333-.385a2.765 2.765 0 0 0 0-3.902l-.332-.333Zm-.875 3.019-.368.358a1.015 1.015 0 0 1-1.418 0l-.358-.358a.998.998 0 0 1 0-1.418l.358-.367a1.015 1.015 0 0 1 1.418 0l.367.367a.997.997 0 0 1 .29.709c-.008.256-.11.5-.29.682v.027Z"></path><path d="m28.031 13.06.219-.219a5.915 5.915 0 0 0 0-8.373l-.718-.718a5.933 5.933 0 0 0-8.207-.158l.341-1.014L18.004 2l-5.25 15.75-9.879 3.063v1.828l9.196-2.835L9 29.125h1.838l3.325-9.949 15.54-4.786-.578-1.671-1.094.341ZM14.81 17.137l2.205-6.606a5.749 5.749 0 0 0 1.426 2.31l.709.718a5.96 5.96 0 0 0 2.468 1.479l-6.808 2.1Zm11.48-4.812a4.174 4.174 0 0 1-5.898 0l-.717-.7a4.183 4.183 0 0 1 0-5.897l.7-.736a4.182 4.182 0 0 1 5.898 0l.717.718a4.165 4.165 0 0 1 0 5.897l-.7.718Z"></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--sushiLarge"><path d="M25.293 6.375a2.818 2.818 0 0 0-3.894 0l-.368.359a2.748 2.748 0 0 0 0 3.893l.368.368a2.73 2.73 0 0 0 1.942.805c.732 0 1.433-.29 1.951-.805l.333-.385a2.765 2.765 0 0 0 0-3.902l-.332-.333Zm-.875 3.019-.368.358a1.015 1.015 0 0 1-1.418 0l-.358-.358a.998.998 0 0 1 0-1.418l.358-.367a1.015 1.015 0 0 1 1.418 0l.367.367a.997.997 0 0 1 .29.709c-.008.256-.11.5-.29.682v.027Z"></path><path d="m28.031 13.06.219-.219a5.915 5.915 0 0 0 0-8.373l-.718-.718a5.933 5.933 0 0 0-8.207-.158l.341-1.014L18.004 2l-5.25 15.75-9.879 3.063v1.828l9.196-2.835L9 29.125h1.838l3.325-9.949 15.54-4.786-.578-1.671-1.094.341ZM14.81 17.137l2.205-6.606a5.749 5.749 0 0 0 1.426 2.31l.709.718a5.96 5.96 0 0 0 2.468 1.479l-6.808 2.1Zm11.48-4.812a4.174 4.174 0 0 1-5.898 0l-.717-.7a4.183 4.183 0 0 1 0-5.897l.7-.736a4.182 4.182 0 0 1 5.898 0l.717.718a4.165 4.165 0 0 1 0 5.897l-.7.718Z"></path></svg>';
 
 class IconSushiLarge extends HTMLElement {
     constructor () {

package/dist/IconSwissFranc.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--swissFranc"><path d="M2.295 8.131A1.444 1.444 0 0 0 4.29 9.537a1.54 1.54 0 0 0 .508-.33l.06-.06.788.795-.052.062a2.52 2.52 0 0 1-1.89.77 2.563 2.563 0 0 1-2.625-2.625 2.564 2.564 0 0 1 2.625-2.625 2.573 2.573 0 0 1 1.89.726l.052.061-.787.814-.061-.088A1.531 1.531 0 0 0 3.695 6.6a1.435 1.435 0 0 0-1.4 1.531Zm7.236-.586H7.545V5.559H6.329v5.127h1.216V8.612h1.986v2.074h1.225V5.56H9.531v1.986Zm5.425-.875V5.559H11.79v5.127h1.225V8.822h1.864V7.755h-1.864v-1.12l1.942.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--swissFranc"><path d="M2.295 8.131A1.444 1.444 0 0 0 4.29 9.537a1.54 1.54 0 0 0 .508-.33l.06-.06.788.795-.052.062a2.52 2.52 0 0 1-1.89.77 2.563 2.563 0 0 1-2.625-2.625 2.564 2.564 0 0 1 2.625-2.625 2.573 2.573 0 0 1 1.89.726l.052.061-.787.814-.061-.088A1.531 1.531 0 0 0 3.695 6.6a1.435 1.435 0 0 0-1.4 1.531Zm7.236-.586H7.545V5.559H6.329v5.127h1.216V8.612h1.986v2.074h1.225V5.56H9.531v1.986Zm5.425-.875V5.559H11.79v5.127h1.225V8.822h1.864V7.755h-1.864v-1.12l1.942.035Z"></path></svg>';
 
 class IconSwissFranc extends HTMLElement {
     constructor () {

package/dist/IconSwissFrancLarge.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--swissFrancLarge"><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 21ZM8.825 15.659a1.89 1.89 0 0 0 1.838 1.977 2.022 2.022 0 0 0 1.426-.569l.061-.07.98.99-.061.06a3.185 3.185 0 0 1-2.398.99A3.288 3.288 0 0 1 7.25 15.65a3.29 3.29 0 0 1 3.404-3.386 3.246 3.246 0 0 1 2.397.98l.062.061-.963.989-.061-.044a1.97 1.97 0 0 0-1.435-.569 1.872 1.872 0 0 0-1.829 1.978Zm9.17-3.282H19.5v6.537h-1.505v-2.625H15.37v2.625h-1.505v-6.537h1.522v2.547h2.625l-.017-2.546Zm4.226 1.33v1.488h2.398v1.33H22.22v2.389h-1.514v-6.537h4.043v1.33h-2.529Z"></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--swissFrancLarge"><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 21ZM8.825 15.659a1.89 1.89 0 0 0 1.838 1.977 2.022 2.022 0 0 0 1.426-.569l.061-.07.98.99-.061.06a3.185 3.185 0 0 1-2.398.99A3.288 3.288 0 0 1 7.25 15.65a3.29 3.29 0 0 1 3.404-3.386 3.246 3.246 0 0 1 2.397.98l.062.061-.963.989-.061-.044a1.97 1.97 0 0 0-1.435-.569 1.872 1.872 0 0 0-1.829 1.978Zm9.17-3.282H19.5v6.537h-1.505v-2.625H15.37v2.625h-1.505v-6.537h1.522v2.547h2.625l-.017-2.546Zm4.226 1.33v1.488h2.398v1.33H22.22v2.389h-1.514v-6.537h4.043v1.33h-2.529Z"></path></svg>';
 
 class IconSwissFrancLarge extends HTMLElement {
     constructor () {

package/dist/IconSwitchProduct.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--switchProduct"><path d="M5.261 2.094H2.094V5.26H5.26V2.094Z"></path><path d="M5.261 6.407H2.094v3.168H5.26V6.408Z"></path><path d="M9.584 2.094H6.416V5.26h3.168V2.094Z"></path><path d="M9.584 6.407H6.416v3.168h3.168V6.408Z"></path><path d="M5.261 10.73H2.094v3.168H5.26V10.73Z"></path><path d="M9.584 10.73H6.416v3.168h3.168V10.73Z"></path><path d="M13.898 2.094H10.73V5.26h3.168V2.094Z"></path><path d="M13.898 6.407H10.73v3.168h3.168V6.408Z"></path><path d="M13.898 10.73H10.73v3.168h3.168V10.73Z"></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--switchProduct"><path d="M5.261 2.094H2.094V5.26H5.26V2.094Z"></path><path d="M5.261 6.407H2.094v3.168H5.26V6.408Z"></path><path d="M9.584 2.094H6.416V5.26h3.168V2.094Z"></path><path d="M9.584 6.407H6.416v3.168h3.168V6.408Z"></path><path d="M5.261 10.73H2.094v3.168H5.26V10.73Z"></path><path d="M9.584 10.73H6.416v3.168h3.168V10.73Z"></path><path d="M13.898 2.094H10.73V5.26h3.168V2.094Z"></path><path d="M13.898 6.407H10.73v3.168h3.168V6.408Z"></path><path d="M13.898 10.73H10.73v3.168h3.168V10.73Z"></path></svg>';
 
 class IconSwitchProduct extends HTMLElement {
     constructor () {

package/dist/IconSwitchProductLarge.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--switchProductLarge"><path d="M8.974 6.375v2.599H6.375V6.375h2.599Zm1.75-1.75H4.625v6.099h6.099V4.625Z"></path><path d="M8.974 14.696v2.599H6.375v-2.599h2.599Zm1.75-1.75H4.625v6.099h6.099v-6.099Z"></path><path d="M17.295 6.375v2.599h-2.599V6.375h2.599Zm1.75-1.75h-6.099v6.099h6.099V4.625Z"></path><path d="M17.295 14.696v2.599h-2.599v-2.599h2.599Zm1.75-1.75h-6.099v6.099h6.099v-6.099Z"></path><path d="M8.974 23.017v2.6H6.375v-2.6h2.599Zm1.75-1.75H4.625v6.1h6.099v-6.1Z"></path><path d="M17.295 23.017v2.6h-2.599v-2.6h2.599Zm1.75-1.75h-6.099v6.1h6.099v-6.1Z"></path><path d="M25.616 6.375v2.599h-2.599V6.375h2.6Zm1.75-1.75h-6.099v6.099h6.1V4.625Z"></path><path d="M25.616 14.696v2.599h-2.599v-2.599h2.6Zm1.75-1.75h-6.099v6.099h6.1v-6.099Z"></path><path d="M25.616 23.017v2.6h-2.599v-2.6h2.6Zm1.75-1.75h-6.099v6.1h6.1v-6.1Z"></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--switchProductLarge"><path d="M8.974 6.375v2.599H6.375V6.375h2.599Zm1.75-1.75H4.625v6.099h6.099V4.625Z"></path><path d="M8.974 14.696v2.599H6.375v-2.599h2.599Zm1.75-1.75H4.625v6.099h6.099v-6.099Z"></path><path d="M17.295 6.375v2.599h-2.599V6.375h2.599Zm1.75-1.75h-6.099v6.099h6.099V4.625Z"></path><path d="M17.295 14.696v2.599h-2.599v-2.599h2.599Zm1.75-1.75h-6.099v6.099h6.099v-6.099Z"></path><path d="M8.974 23.017v2.6H6.375v-2.6h2.599Zm1.75-1.75H4.625v6.1h6.099v-6.1Z"></path><path d="M17.295 23.017v2.6h-2.599v-2.6h2.599Zm1.75-1.75h-6.099v6.1h6.099v-6.1Z"></path><path d="M25.616 6.375v2.599h-2.599V6.375h2.6Zm1.75-1.75h-6.099v6.099h6.1V4.625Z"></path><path d="M25.616 14.696v2.599h-2.599v-2.599h2.6Zm1.75-1.75h-6.099v6.099h6.1v-6.099Z"></path><path d="M25.616 23.017v2.6h-2.599v-2.6h2.6Zm1.75-1.75h-6.099v6.1h6.1v-6.1Z"></path></svg>';
 
 class IconSwitchProductLarge extends HTMLElement {
     constructor () {

package/dist/IconSync.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--sync"><path d="M8.875 2.164A5.906 5.906 0 0 1 13.906 8a5.845 5.845 0 0 1-1.75 4.174l-.927-.928a4.587 4.587 0 0 0 0-6.492 4.507 4.507 0 0 0-2.354-1.251V4.78L6.25 2.75 8.875 1v1.164ZM3.406 8a4.568 4.568 0 0 0 1.348 3.246 4.506 4.506 0 0 0 2.371 1.252V11.22l2.625 2.03L7.125 15v-1.164A5.906 5.906 0 0 1 2.094 8a5.845 5.845 0 0 1 1.75-4.174l.91.928A4.567 4.567 0 0 0 3.406 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--sync"><path d="M8.875 2.164A5.906 5.906 0 0 1 13.906 8a5.845 5.845 0 0 1-1.75 4.174l-.927-.928a4.587 4.587 0 0 0 0-6.492 4.507 4.507 0 0 0-2.354-1.251V4.78L6.25 2.75 8.875 1v1.164ZM3.406 8a4.568 4.568 0 0 0 1.348 3.246 4.506 4.506 0 0 0 2.371 1.252V11.22l2.625 2.03L7.125 15v-1.164A5.906 5.906 0 0 1 2.094 8a5.845 5.845 0 0 1 1.75-4.174l.91.928A4.567 4.567 0 0 0 3.406 8Z"></path></svg>';
 
 class IconSync extends HTMLElement {
     constructor () {

package/dist/IconSyncLarge.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--syncLarge"><path d="M19.762 4.056 18.1 5.72a10.403 10.403 0 0 1 5.32 2.852 10.499 10.499 0 0 1 0 14.875l-1.234-1.234A8.751 8.751 0 0 0 18.205 7.54l1.557 1.557-1.242 1.243-3.141-3.142a.875.875 0 0 1 0-1.242l3.14-3.141 1.243 1.242Zm-9.948 18.13a8.697 8.697 0 0 0 3.98 2.275l-1.557-1.557 1.243-1.243 3.141 3.141a.874.874 0 0 1 0 1.243l-3.141 3.141-1.243-1.242L13.9 26.28A10.5 10.5 0 0 1 8.57 8.571l1.243 1.243a8.75 8.75 0 0 0 0 12.372Z"></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--syncLarge"><path d="M19.762 4.056 18.1 5.72a10.403 10.403 0 0 1 5.32 2.852 10.499 10.499 0 0 1 0 14.875l-1.234-1.234A8.751 8.751 0 0 0 18.205 7.54l1.557 1.557-1.242 1.243-3.141-3.142a.875.875 0 0 1 0-1.242l3.14-3.141 1.243 1.242Zm-9.948 18.13a8.697 8.697 0 0 0 3.98 2.275l-1.557-1.557 1.243-1.243 3.141 3.141a.874.874 0 0 1 0 1.243l-3.141 3.141-1.243-1.242L13.9 26.28A10.5 10.5 0 0 1 8.57 8.571l1.243 1.243a8.75 8.75 0 0 0 0 12.372Z"></path></svg>';
 
 class IconSyncLarge extends HTMLElement {
     constructor () {

package/dist/IconTaco.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--taco"><path d="m14.466 9.094-1.216.437c.257.627.282 1.325.07 1.969 0 .053-.131.193-.534.193-.402 0-.534-.272-.875-.875l-.114-.193-.06-.105c-.193-.315-.368-.683-.552-1.059a4.611 4.611 0 0 0 2.625-1.864 1.488 1.488 0 0 0 .053-1.19 1.75 1.75 0 0 0-1.584-.936 2.16 2.16 0 0 1-.543-.096c0-.088.044-.228.061-.324a1.75 1.75 0 0 0-.62-2.047 2.363 2.363 0 0 0-2.302.157c-.647.28-.875.315-.945.201a2.319 2.319 0 0 0-1.846-.945 1.864 1.864 0 0 0-1.453.744c-.726 1.006-1.163.928-1.662.875a1.461 1.461 0 0 0-1.208.158 1.488 1.488 0 0 0-.63 1.032c.024.935.367 1.834.972 2.546a7.516 7.516 0 0 0-.875 3.5 1.75 1.75 0 0 0 .463 1.27 1.539 1.539 0 0 0 1.12.49h9.975a1.854 1.854 0 0 0 1.61-.753c.779-1.111.14-2.975.07-3.185ZM2.461 5.252a1.4 1.4 0 0 1 .272 0c.875.15 1.846.184 2.966-1.365a.551.551 0 0 1 .429-.2 1.067 1.067 0 0 1 .813.463c.744.919 1.75.464 2.477.166.42-.175.875-.367 1.058-.245.184.123.166.105.044.656a1.497 1.497 0 0 0 .271 1.54c.375.302.84.468 1.322.473.176.014.35.052.516.114a.15.15 0 0 1 0 .148 3.71 3.71 0 0 1-2.004 1.278 4.375 4.375 0 0 0-4.13-2.686 6.352 6.352 0 0 0-1.75.227 4.419 4.419 0 0 0-1.75.875 2.564 2.564 0 0 1-.56-1.321c.009-.07.035-.105.026-.123Zm.342 6.467a.226.226 0 0 1-.167-.079.41.41 0 0 1-.105-.306c.114-2.459.893-3.798 2.538-4.209.465-.121.945-.18 1.426-.175 2.039 0 2.678 1.365 3.421 2.94.216.502.467.987.753 1.452l.122.21c0 .07.07.14.114.21l-8.102-.043Z"></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--taco"><path d="m14.466 9.094-1.216.437c.257.627.282 1.325.07 1.969 0 .053-.131.193-.534.193-.402 0-.534-.272-.875-.875l-.114-.193-.06-.105c-.193-.315-.368-.683-.552-1.059a4.611 4.611 0 0 0 2.625-1.864 1.488 1.488 0 0 0 .053-1.19 1.75 1.75 0 0 0-1.584-.936 2.16 2.16 0 0 1-.543-.096c0-.088.044-.228.061-.324a1.75 1.75 0 0 0-.62-2.047 2.363 2.363 0 0 0-2.302.157c-.647.28-.875.315-.945.201a2.319 2.319 0 0 0-1.846-.945 1.864 1.864 0 0 0-1.453.744c-.726 1.006-1.163.928-1.662.875a1.461 1.461 0 0 0-1.208.158 1.488 1.488 0 0 0-.63 1.032c.024.935.367 1.834.972 2.546a7.516 7.516 0 0 0-.875 3.5 1.75 1.75 0 0 0 .463 1.27 1.539 1.539 0 0 0 1.12.49h9.975a1.854 1.854 0 0 0 1.61-.753c.779-1.111.14-2.975.07-3.185ZM2.461 5.252a1.4 1.4 0 0 1 .272 0c.875.15 1.846.184 2.966-1.365a.551.551 0 0 1 .429-.2 1.067 1.067 0 0 1 .813.463c.744.919 1.75.464 2.477.166.42-.175.875-.367 1.058-.245.184.123.166.105.044.656a1.497 1.497 0 0 0 .271 1.54c.375.302.84.468 1.322.473.176.014.35.052.516.114a.15.15 0 0 1 0 .148 3.71 3.71 0 0 1-2.004 1.278 4.375 4.375 0 0 0-4.13-2.686 6.352 6.352 0 0 0-1.75.227 4.419 4.419 0 0 0-1.75.875 2.564 2.564 0 0 1-.56-1.321c.009-.07.035-.105.026-.123Zm.342 6.467a.226.226 0 0 1-.167-.079.41.41 0 0 1-.105-.306c.114-2.459.893-3.798 2.538-4.209.465-.121.945-.18 1.426-.175 2.039 0 2.678 1.365 3.421 2.94.216.502.467.987.753 1.452l.122.21c0 .07.07.14.114.21l-8.102-.043Z"></path></svg>';
 
 class IconTaco extends HTMLElement {
     constructor () {

package/dist/IconTacoLarge.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--tacoLarge"><path d="m28.163 18.231-1.576.779c.386.779 1.015 2.625.5 3.5-.21.341-.683.516-1.41.516-.962 0-1.452-.761-2.09-1.925l-.263-.463-.123-.193a15.919 15.919 0 0 1-.621-1.146c2.905-1.138 4.305-2.774 3.85-4.568-.35-1.382-1.619-1.662-2.546-1.872a2.625 2.625 0 0 1-1.252-.49c-.087-.105.114-.744.22-1.05.323-1.015.822-2.555-.605-3.736-1.25-1.033-2.817-.49-4.068-.053-1.523.534-1.943.551-2.223.096A3.965 3.965 0 0 0 12.911 5.5a3.194 3.194 0 0 0-2.625 1.103C8.501 8.71 7.521 8.413 6.568 8.125a2.354 2.354 0 0 0-2.065.053C2 9.753 3.75 13.47 4.625 15.038a14.71 14.71 0 0 0-1.636 6.65 3.002 3.002 0 0 0 .761 2.187 2.625 2.625 0 0 0 1.916.875h20.011a3.15 3.15 0 0 0 2.905-1.348c1.155-1.863-.262-4.838-.42-5.17ZM5.413 9.683c.219.005.435.05.638.13 1.199.342 3.054.937 5.574-2.082a1.4 1.4 0 0 1 1.155-.481 2.266 2.266 0 0 1 1.68 1.243c1.085 1.75 2.931 1.12 4.287.647 1.138-.402 1.917-.63 2.372-.254.455.377.402.762.052 1.855-.262.823-.595 1.838.096 2.695.6.599 1.382.98 2.223 1.085.875.193 1.155.306 1.234.595.21.832-.875 1.803-2.914 2.555-1.435-3.132-3.377-6.921-8.724-6.921a12.437 12.437 0 0 0-3.447.438 8.251 8.251 0 0 0-3.868 2.274c-.682-1.417-1.242-3.22-.341-3.78h-.018ZM5.7 23a.876.876 0 0 1-.647-.289 1.26 1.26 0 0 1-.324-.945c.079-1.75.341-4.375 1.68-6.317a6.388 6.388 0 0 1 3.701-2.582c.97-.256 1.971-.38 2.975-.367 4.375 0 5.758 2.984 7.245 6.125l.289.613c.35.765.745 1.51 1.181 2.23l.079.106.175.323c.184.324.394.71.648 1.077L5.7 23Zm2.424-3.5a.875.875 0 1 1-1.75 0 .875.875 0 0 1 1.75 0ZM10.75 16a.874.874 0 1 1-1.748 0 .874.874 0 0 1 1.748 0Zm7.875 3.5a.874.874 0 1 1-1.748 0 .874.874 0 0 1 1.748 0Zm-5.25 0a.874.874 0 1 1-1.748 0 .874.874 0 0 1 1.748 0ZM16 16a.874.874 0 1 1-1.748 0A.874.874 0 0 1 16 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--tacoLarge"><path d="m28.163 18.231-1.576.779c.386.779 1.015 2.625.5 3.5-.21.341-.683.516-1.41.516-.962 0-1.452-.761-2.09-1.925l-.263-.463-.123-.193a15.919 15.919 0 0 1-.621-1.146c2.905-1.138 4.305-2.774 3.85-4.568-.35-1.382-1.619-1.662-2.546-1.872a2.625 2.625 0 0 1-1.252-.49c-.087-.105.114-.744.22-1.05.323-1.015.822-2.555-.605-3.736-1.25-1.033-2.817-.49-4.068-.053-1.523.534-1.943.551-2.223.096A3.965 3.965 0 0 0 12.911 5.5a3.194 3.194 0 0 0-2.625 1.103C8.501 8.71 7.521 8.413 6.568 8.125a2.354 2.354 0 0 0-2.065.053C2 9.753 3.75 13.47 4.625 15.038a14.71 14.71 0 0 0-1.636 6.65 3.002 3.002 0 0 0 .761 2.187 2.625 2.625 0 0 0 1.916.875h20.011a3.15 3.15 0 0 0 2.905-1.348c1.155-1.863-.262-4.838-.42-5.17ZM5.413 9.683c.219.005.435.05.638.13 1.199.342 3.054.937 5.574-2.082a1.4 1.4 0 0 1 1.155-.481 2.266 2.266 0 0 1 1.68 1.243c1.085 1.75 2.931 1.12 4.287.647 1.138-.402 1.917-.63 2.372-.254.455.377.402.762.052 1.855-.262.823-.595 1.838.096 2.695.6.599 1.382.98 2.223 1.085.875.193 1.155.306 1.234.595.21.832-.875 1.803-2.914 2.555-1.435-3.132-3.377-6.921-8.724-6.921a12.437 12.437 0 0 0-3.447.438 8.251 8.251 0 0 0-3.868 2.274c-.682-1.417-1.242-3.22-.341-3.78h-.018ZM5.7 23a.876.876 0 0 1-.647-.289 1.26 1.26 0 0 1-.324-.945c.079-1.75.341-4.375 1.68-6.317a6.388 6.388 0 0 1 3.701-2.582c.97-.256 1.971-.38 2.975-.367 4.375 0 5.758 2.984 7.245 6.125l.289.613c.35.765.745 1.51 1.181 2.23l.079.106.175.323c.184.324.394.71.648 1.077L5.7 23Zm2.424-3.5a.875.875 0 1 1-1.75 0 .875.875 0 0 1 1.75 0ZM10.75 16a.874.874 0 1 1-1.748 0 .874.874 0 0 1 1.748 0Zm7.875 3.5a.874.874 0 1 1-1.748 0 .874.874 0 0 1 1.748 0Zm-5.25 0a.874.874 0 1 1-1.748 0 .874.874 0 0 1 1.748 0ZM16 16a.874.874 0 1 1-1.748 0A.874.874 0 0 1 16 16Z"></path></svg>';
 
 class IconTacoLarge extends HTMLElement {
     constructor () {

package/dist/IconTakeawayPay.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--takeawayPay"><path d="M13.25 2.969H2.75c-.84 0-1.531.691-1.531 1.531v7c0 .84.691 1.531 1.531 1.531h10.5c.84 0 1.531-.691 1.531-1.531v-7c0-.84-.691-1.531-1.531-1.531Zm.219 8.531a.217.217 0 0 1-.219.219H2.75a.217.217 0 0 1-.219-.219v-7c0-.122.096-.219.219-.219h10.5c.123 0 .219.097.219.219v7Z"></path><path d="M8.359 6.933h-.84v2.082h.446v-.691h.394c.428 0 .743-.289.743-.7s-.306-.7-.743-.7v.008Zm-.044 1.014h-.359V7.31h.359c.193 0 .333.122.333.315 0 .192-.132.315-.333.315v.008Z"></path><path d="M6.128 7.282s-.01-.017-.01-.026a8.258 8.258 0 0 0-.078-.621c0-.035-.044-.061-.079-.07L5.7 6.539s-.053.026-.053.052v.306s-.35-.393-.525-.498A.2.2 0 0 0 5 6.364c-.044 0-.088.017-.131.035a4.163 4.163 0 0 0-1.4 1.444v.035c0 .043.026.07.07.078L3.79 8s.062.035.062.07c0 .044.052 1.024.113 1.277.009.036.044.062.088.062h1.898s.08-.035.088-.07c.061-.254.105-1.234.114-1.278 0-.035.026-.061.061-.07l.254-.043s.07-.044.07-.08v-.026a3.194 3.194 0 0 0-.394-.568l-.017.008Z"></path><path d="M9.977 7.396c-.315 0-.542.114-.656.254l.254.245c.07-.079.201-.131.368-.131.192 0 .332.087.332.288v.027l-.411.017c-.429.027-.648.193-.648.482 0 .297.245.48.587.48.218 0 .393-.078.48-.21v.167h.395v-.989c0-.358-.246-.63-.71-.63h.01Zm.298 1.033c0 .192-.166.323-.385.323-.14 0-.254-.06-.254-.183 0-.114.105-.175.28-.184l.368-.026v.07h-.009Z"></path><path d="M11.693 8.525 11.28 7.44h-.455l.639 1.593c-.079.175-.14.236-.315.236-.053 0-.105 0-.14-.018v.368c.044.008.123.017.175.017.402 0 .551-.218.717-.621l.64-1.584h-.447l-.411 1.085.009.009Z"></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--takeawayPay"><path d="M13.25 2.969H2.75c-.84 0-1.531.691-1.531 1.531v7c0 .84.691 1.531 1.531 1.531h10.5c.84 0 1.531-.691 1.531-1.531v-7c0-.84-.691-1.531-1.531-1.531Zm.219 8.531a.217.217 0 0 1-.219.219H2.75a.217.217 0 0 1-.219-.219v-7c0-.122.096-.219.219-.219h10.5c.123 0 .219.097.219.219v7Z"></path><path d="M8.359 6.933h-.84v2.082h.446v-.691h.394c.428 0 .743-.289.743-.7s-.306-.7-.743-.7v.008Zm-.044 1.014h-.359V7.31h.359c.193 0 .333.122.333.315 0 .192-.132.315-.333.315v.008Z"></path><path d="M6.128 7.282s-.01-.017-.01-.026a8.258 8.258 0 0 0-.078-.621c0-.035-.044-.061-.079-.07L5.7 6.539s-.053.026-.053.052v.306s-.35-.393-.525-.498A.2.2 0 0 0 5 6.364c-.044 0-.088.017-.131.035a4.163 4.163 0 0 0-1.4 1.444v.035c0 .043.026.07.07.078L3.79 8s.062.035.062.07c0 .044.052 1.024.113 1.277.009.036.044.062.088.062h1.898s.08-.035.088-.07c.061-.254.105-1.234.114-1.278 0-.035.026-.061.061-.07l.254-.043s.07-.044.07-.08v-.026a3.194 3.194 0 0 0-.394-.568l-.017.008Z"></path><path d="M9.977 7.396c-.315 0-.542.114-.656.254l.254.245c.07-.079.201-.131.368-.131.192 0 .332.087.332.288v.027l-.411.017c-.429.027-.648.193-.648.482 0 .297.245.48.587.48.218 0 .393-.078.48-.21v.167h.395v-.989c0-.358-.246-.63-.71-.63h.01Zm.298 1.033c0 .192-.166.323-.385.323-.14 0-.254-.06-.254-.183 0-.114.105-.175.28-.184l.368-.026v.07h-.009Z"></path><path d="M11.693 8.525 11.28 7.44h-.455l.639 1.593c-.079.175-.14.236-.315.236-.053 0-.105 0-.14-.018v.368c.044.008.123.017.175.017.402 0 .551-.218.717-.621l.64-1.584h-.447l-.411 1.085.009.009Z"></path></svg>';
 
 class IconTakeawayPay extends HTMLElement {
     constructor () {

package/dist/IconTakeawayPayFilled.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--takeawayPayFilled"><path d="M7.956 7.948h.359v-.01c.201 0 .332-.122.332-.314 0-.193-.14-.315-.332-.315h-.359v.639Z"></path><path d="M10.275 8.429c0 .192-.167.324-.385.324-.14 0-.254-.062-.254-.184 0-.114.105-.175.28-.184l.367-.026v.07h-.008Z"></path><path fill-rule="evenodd" d="M13.25 2.969H2.75c-.84 0-1.531.691-1.531 1.531v7c0 .84.691 1.531 1.531 1.531h10.5c.84 0 1.531-.691 1.531-1.531v-7c0-.84-.691-1.531-1.531-1.531ZM6.119 7.256c0 .009.008.027.008.027l.018-.01c.254.307.385.543.394.57v.026c0 .035-.07.079-.07.079l-.254.043c-.035.009-.061.035-.061.07-.003.012-.008.09-.015.204-.019.312-.054.888-.1 1.074-.008.035-.087.07-.087.07H4.054c-.044 0-.08-.026-.088-.061-.061-.254-.114-1.234-.114-1.278 0-.035-.061-.07-.061-.07l-.254-.044c-.043-.008-.07-.035-.07-.078v-.035c.018-.044.508-.91 1.4-1.444.044-.018.088-.035.132-.035a.2.2 0 0 1 .122.035c.175.105.525.499.525.499V6.59c0-.026.053-.052.053-.052l.262.026c.035.009.079.035.079.07 0 0 .052.306.079.621Zm1.4-.323h.84v-.01c.437 0 .743.29.743.7 0 .412-.315.7-.743.7h-.394v.692h-.446V6.933Zm2.454.463c-.313.001-.539.115-.652.254l.254.245c.07-.079.201-.131.367-.131.193 0 .333.087.333.289v.026l-.411.017c-.43.027-.648.193-.648.482 0 .297.245.48.586.48.219 0 .394-.078.482-.21v.167h.393v-.989c0-.357-.243-.628-.704-.63Zm0 0h-.004.008-.004Zm1.713 1.113-.405-1.069h-.455l.639 1.593c-.079.175-.14.236-.315.236-.053 0-.105 0-.14-.018v.368c.043.009.122.017.175.017.402 0 .551-.218.717-.621l.639-1.584h-.446l-.409 1.078Z" 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--takeawayPayFilled"><path d="M7.956 7.948h.359v-.01c.201 0 .332-.122.332-.314 0-.193-.14-.315-.332-.315h-.359v.639Z"></path><path d="M10.275 8.429c0 .192-.167.324-.385.324-.14 0-.254-.062-.254-.184 0-.114.105-.175.28-.184l.367-.026v.07h-.008Z"></path><path fill-rule="evenodd" d="M13.25 2.969H2.75c-.84 0-1.531.691-1.531 1.531v7c0 .84.691 1.531 1.531 1.531h10.5c.84 0 1.531-.691 1.531-1.531v-7c0-.84-.691-1.531-1.531-1.531ZM6.119 7.256c0 .009.008.027.008.027l.018-.01c.254.307.385.543.394.57v.026c0 .035-.07.079-.07.079l-.254.043c-.035.009-.061.035-.061.07-.003.012-.008.09-.015.204-.019.312-.054.888-.1 1.074-.008.035-.087.07-.087.07H4.054c-.044 0-.08-.026-.088-.061-.061-.254-.114-1.234-.114-1.278 0-.035-.061-.07-.061-.07l-.254-.044c-.043-.008-.07-.035-.07-.078v-.035c.018-.044.508-.91 1.4-1.444.044-.018.088-.035.132-.035a.2.2 0 0 1 .122.035c.175.105.525.499.525.499V6.59c0-.026.053-.052.053-.052l.262.026c.035.009.079.035.079.07 0 0 .052.306.079.621Zm1.4-.323h.84v-.01c.437 0 .743.29.743.7 0 .412-.315.7-.743.7h-.394v.692h-.446V6.933Zm2.454.463c-.313.001-.539.115-.652.254l.254.245c.07-.079.201-.131.367-.131.193 0 .333.087.333.289v.026l-.411.017c-.43.027-.648.193-.648.482 0 .297.245.48.586.48.219 0 .394-.078.482-.21v.167h.393v-.989c0-.357-.243-.628-.704-.63Zm0 0h-.004.008-.004Zm1.713 1.113-.405-1.069h-.455l.639 1.593c-.079.175-.14.236-.315.236-.053 0-.105 0-.14-.018v.368c.043.009.122.017.175.017.402 0 .551-.218.717-.621l.639-1.584h-.446l-.409 1.078Z" clip-rule="evenodd"></path></svg>';
 
 class IconTakeawayPayFilled extends HTMLElement {
     constructor () {

package/dist/IconTakeawayPayFilledLarge.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--takeawayPayFilledLarge"><path d="M15.44 16.122h.831c.455 0 .77-.288.77-.743s-.315-.744-.77-.744h-.831v1.487Z"></path><path d="M21.014 17.26c0 .446-.394.752-.91.752-.333 0-.595-.14-.595-.428 0-.263.236-.412.647-.438l.858-.052v.166Z"></path><path fill-rule="evenodd" d="M27.48 6.349H4.52C3.129 6.349 2 7.425 2 8.746v14.508c0 1.321 1.129 2.397 2.52 2.397h22.96c1.383 0 2.52-1.076 2.52-2.397V8.746c0-1.321-1.129-2.397-2.52-2.397Zm-15.908 8.146c0 .026.027.061.027.061h-.027c.56.7.867 1.252.884 1.313a.118.118 0 0 1 .018.07c0 .087-.062.175-.15.192l-.577.114a.198.198 0 0 0-.14.166l-.01.183c-.031.569-.125 2.28-.243 2.784a.197.197 0 0 1-.193.148l-4.27.018c-.087 0-.175-.061-.192-.149-.14-.586-.254-2.861-.254-2.966a.187.187 0 0 0-.14-.166l-.578-.114a.19.19 0 0 1-.148-.193c0-.035.008-.061.017-.087.044-.105 1.146-2.127 3.15-3.36a.488.488 0 0 1 .289-.088c.105 0 .21.035.289.088.402.245 1.19 1.155 1.19 1.155v-.718a.12.12 0 0 1 .122-.122l.595.07a.217.217 0 0 1 .175.157s.105.718.166 1.444Zm2.835-.744h1.96c1.024 0 1.733.683 1.733 1.628 0 .945-.718 1.627-1.733 1.627h-.927v1.619h-1.033v-4.874Zm5.907 1.085c-.735 0-1.26.263-1.54.604l.595.577c.166-.183.48-.314.857-.314.455 0 .788.21.788.665v.06l-.963.044c-1.006.053-1.505.455-1.505 1.12 0 .71.578 1.12 1.383 1.12.507 0 .91-.183 1.128-.49h.018v.394h.91v-2.319c0-.848-.578-1.478-1.663-1.478l-.008.017Zm4.138 2.617h.018l-.018-.01.954-2.528h1.033l-1.488 3.701c-.385.945-.735 1.444-1.671 1.444-.131 0-.298-.017-.411-.044v-.857c.078.017.2.035.323.035.403 0 .543-.149.727-.552l-1.488-3.718H23.5l.953 2.529Z" 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 32 32" class="c-pieIcon c-pieIcon--takeawayPayFilledLarge"><path d="M15.44 16.122h.831c.455 0 .77-.288.77-.743s-.315-.744-.77-.744h-.831v1.487Z"></path><path d="M21.014 17.26c0 .446-.394.752-.91.752-.333 0-.595-.14-.595-.428 0-.263.236-.412.647-.438l.858-.052v.166Z"></path><path fill-rule="evenodd" d="M27.48 6.349H4.52C3.129 6.349 2 7.425 2 8.746v14.508c0 1.321 1.129 2.397 2.52 2.397h22.96c1.383 0 2.52-1.076 2.52-2.397V8.746c0-1.321-1.129-2.397-2.52-2.397Zm-15.908 8.146c0 .026.027.061.027.061h-.027c.56.7.867 1.252.884 1.313a.118.118 0 0 1 .018.07c0 .087-.062.175-.15.192l-.577.114a.198.198 0 0 0-.14.166l-.01.183c-.031.569-.125 2.28-.243 2.784a.197.197 0 0 1-.193.148l-4.27.018c-.087 0-.175-.061-.192-.149-.14-.586-.254-2.861-.254-2.966a.187.187 0 0 0-.14-.166l-.578-.114a.19.19 0 0 1-.148-.193c0-.035.008-.061.017-.087.044-.105 1.146-2.127 3.15-3.36a.488.488 0 0 1 .289-.088c.105 0 .21.035.289.088.402.245 1.19 1.155 1.19 1.155v-.718a.12.12 0 0 1 .122-.122l.595.07a.217.217 0 0 1 .175.157s.105.718.166 1.444Zm2.835-.744h1.96c1.024 0 1.733.683 1.733 1.628 0 .945-.718 1.627-1.733 1.627h-.927v1.619h-1.033v-4.874Zm5.907 1.085c-.735 0-1.26.263-1.54.604l.595.577c.166-.183.48-.314.857-.314.455 0 .788.21.788.665v.06l-.963.044c-1.006.053-1.505.455-1.505 1.12 0 .71.578 1.12 1.383 1.12.507 0 .91-.183 1.128-.49h.018v.394h.91v-2.319c0-.848-.578-1.478-1.663-1.478l-.008.017Zm4.138 2.617h.018l-.018-.01.954-2.528h1.033l-1.488 3.701c-.385.945-.735 1.444-1.671 1.444-.131 0-.298-.017-.411-.044v-.857c.078.017.2.035.323.035.403 0 .543-.149.727-.552l-1.488-3.718H23.5l.953 2.529Z" clip-rule="evenodd"></path></svg>';
 
 class IconTakeawayPayFilledLarge extends HTMLElement {
     constructor () {

package/dist/IconTakeawayPayLarge.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--takeawayPayLarge"><path d="M27.48 6.349H4.52C3.129 6.349 2 7.425 2 8.746v14.508c0 1.321 1.129 2.397 2.52 2.397h22.96c1.383 0 2.52-1.076 2.52-2.397V8.746c0-1.321-1.129-2.397-2.52-2.397Zm.77 16.896c0 .359-.341.647-.77.647H4.52c-.42 0-.77-.288-.77-.647V8.746c0-.358.341-.647.77-.647h22.96c.42 0 .77.289.77.647v14.508-.009Z"></path><path d="M16.367 13.751h-1.96v4.874h1.033v-1.619h.928c1.015 0 1.732-.682 1.732-1.627s-.709-1.628-1.733-1.628Zm-.096 2.371h-.831v-1.487h.831c.455 0 .77.289.77.744s-.315.743-.77.743Z"></path><path d="M11.599 14.556s-.027-.035-.027-.061c-.06-.726-.166-1.444-.166-1.444a.217.217 0 0 0-.175-.157l-.595-.07a.12.12 0 0 0-.122.122v.718s-.788-.91-1.19-1.155a.535.535 0 0 0-.289-.088.488.488 0 0 0-.289.088c-2.004 1.233-3.106 3.255-3.15 3.36a.259.259 0 0 0-.017.087.19.19 0 0 0 .149.193l.577.113a.187.187 0 0 1 .14.167c0 .105.114 2.38.254 2.966.017.088.105.149.192.149l4.27-.018a.197.197 0 0 0 .193-.148c.14-.596.245-2.87.254-2.967a.199.199 0 0 1 .14-.166l.577-.114c.088-.017.149-.105.149-.192 0-.018 0-.044-.018-.07-.017-.062-.323-.613-.883-1.313h.026Z"></path><path d="M20.314 14.836c-.735 0-1.26.263-1.54.604l.595.577c.166-.183.481-.314.857-.314.455 0 .788.21.788.665v.06l-.963.044c-1.006.053-1.505.455-1.505 1.12 0 .71.578 1.12 1.383 1.12.507 0 .91-.183 1.129-.49h.017v.394h.91v-2.319c0-.848-.578-1.478-1.662-1.478l-.01.017Zm.7 2.424c0 .446-.394.752-.91.752-.333 0-.595-.14-.595-.428 0-.263.236-.412.647-.438l.858-.052v.166Z"></path><path d="M24.47 17.453h-.017l-.954-2.53H22.43l1.488 3.72c-.184.402-.324.55-.727.55a1.59 1.59 0 0 1-.323-.034v.857c.114.027.28.044.411.044.936 0 1.286-.499 1.671-1.444l1.488-3.701h-1.033l-.953 2.529.017.009Z"></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--takeawayPayLarge"><path d="M27.48 6.349H4.52C3.129 6.349 2 7.425 2 8.746v14.508c0 1.321 1.129 2.397 2.52 2.397h22.96c1.383 0 2.52-1.076 2.52-2.397V8.746c0-1.321-1.129-2.397-2.52-2.397Zm.77 16.896c0 .359-.341.647-.77.647H4.52c-.42 0-.77-.288-.77-.647V8.746c0-.358.341-.647.77-.647h22.96c.42 0 .77.289.77.647v14.508-.009Z"></path><path d="M16.367 13.751h-1.96v4.874h1.033v-1.619h.928c1.015 0 1.732-.682 1.732-1.627s-.709-1.628-1.733-1.628Zm-.096 2.371h-.831v-1.487h.831c.455 0 .77.289.77.744s-.315.743-.77.743Z"></path><path d="M11.599 14.556s-.027-.035-.027-.061c-.06-.726-.166-1.444-.166-1.444a.217.217 0 0 0-.175-.157l-.595-.07a.12.12 0 0 0-.122.122v.718s-.788-.91-1.19-1.155a.535.535 0 0 0-.289-.088.488.488 0 0 0-.289.088c-2.004 1.233-3.106 3.255-3.15 3.36a.259.259 0 0 0-.017.087.19.19 0 0 0 .149.193l.577.113a.187.187 0 0 1 .14.167c0 .105.114 2.38.254 2.966.017.088.105.149.192.149l4.27-.018a.197.197 0 0 0 .193-.148c.14-.596.245-2.87.254-2.967a.199.199 0 0 1 .14-.166l.577-.114c.088-.017.149-.105.149-.192 0-.018 0-.044-.018-.07-.017-.062-.323-.613-.883-1.313h.026Z"></path><path d="M20.314 14.836c-.735 0-1.26.263-1.54.604l.595.577c.166-.183.481-.314.857-.314.455 0 .788.21.788.665v.06l-.963.044c-1.006.053-1.505.455-1.505 1.12 0 .71.578 1.12 1.383 1.12.507 0 .91-.183 1.129-.49h.017v.394h.91v-2.319c0-.848-.578-1.478-1.662-1.478l-.01.017Zm.7 2.424c0 .446-.394.752-.91.752-.333 0-.595-.14-.595-.428 0-.263.236-.412.647-.438l.858-.052v.166Z"></path><path d="M24.47 17.453h-.017l-.954-2.53H22.43l1.488 3.72c-.184.402-.324.55-.727.55a1.59 1.59 0 0 1-.323-.034v.857c.114.027.28.044.411.044.936 0 1.286-.499 1.671-1.444l1.488-3.701h-1.033l-.953 2.529.017.009Z"></path></svg>';
 
 class IconTakeawayPayLarge extends HTMLElement {
     constructor () {

package/dist/IconTarget.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--target"><path d="m8.56 11.229.761-1.75A1.968 1.968 0 0 0 6.54 6.696l-1.75.77a3.273 3.273 0 1 1 3.788 3.763H8.56ZM8 2.094A5.915 5.915 0 0 0 2.094 8c.004.205.022.41.052.613l1.269-.56a.114.114 0 0 1 0-.053A4.594 4.594 0 1 1 8 12.594l-.578 1.269c.193 0 .385.043.578.043A5.906 5.906 0 1 0 8 2.094ZM6.39 9.628 3.362 10.94l.718.455c.22.142.409.33.551.551l.446.709L6.39 9.628ZM8 7.518a.464.464 0 0 1 .42.648l-2.8 6.493a.445.445 0 0 1-.42.28.472.472 0 0 1-.394-.21L3.53 12.646a.571.571 0 0 0-.15-.14l-2.082-1.312a.463.463 0 0 1 .062-.814l6.475-2.818a.516.516 0 0 1 .192 0L8 7.52Z"></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--target"><path d="m8.56 11.229.761-1.75A1.968 1.968 0 0 0 6.54 6.696l-1.75.77a3.273 3.273 0 1 1 3.788 3.763H8.56ZM8 2.094A5.915 5.915 0 0 0 2.094 8c.004.205.022.41.052.613l1.269-.56a.114.114 0 0 1 0-.053A4.594 4.594 0 1 1 8 12.594l-.578 1.269c.193 0 .385.043.578.043A5.906 5.906 0 1 0 8 2.094ZM6.39 9.628 3.362 10.94l.718.455c.22.142.409.33.551.551l.446.709L6.39 9.628ZM8 7.518a.464.464 0 0 1 .42.648l-2.8 6.493a.445.445 0 0 1-.42.28.472.472 0 0 1-.394-.21L3.53 12.646a.571.571 0 0 0-.15-.14l-2.082-1.312a.463.463 0 0 1 .062-.814l6.475-2.818a.516.516 0 0 1 .192 0L8 7.52Z"></path></svg>';
 
 class IconTarget extends HTMLElement {
     constructor () {

package/dist/IconTargetLarge.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--targetLarge"><path d="M22.125 15.125a5.25 5.25 0 0 0-10.412-.875l-1.838.77a7 7 0 1 1 7.114 7.105l.761-1.837a5.25 5.25 0 0 0 4.375-5.163ZM16.875 3.75A11.375 11.375 0 0 0 5.5 15.125c.003.586.05 1.171.14 1.75l1.671-.726c-.037-.34-.058-.682-.06-1.024a9.625 9.625 0 1 1 9.624 9.625c-.324 0-.647 0-.971-.052l-.718 1.67c.559.089 1.124.133 1.69.132a11.375 11.375 0 1 0 0-22.75Zm1.251 11.322L12.5 28.075a.929.929 0 0 1-1.627.123L8.248 24.05a.761.761 0 0 0-.29-.289l-4.155-2.625A.875.875 0 0 1 3.95 19.5l12.924-5.635a.876.876 0 0 1 1.208 1.207h.043Zm-2.432 1.234L6.069 20.49l2.835 1.793c.335.213.619.497.831.832l1.75 2.817 4.209-9.625ZM4.879 23.254l-2.625 2.625 1.242 1.242 2.625-2.625-1.242-1.242Zm.875 4.375 1.242 1.242 1.75-1.75-1.242-1.242-1.75 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--targetLarge"><path d="M22.125 15.125a5.25 5.25 0 0 0-10.412-.875l-1.838.77a7 7 0 1 1 7.114 7.105l.761-1.837a5.25 5.25 0 0 0 4.375-5.163ZM16.875 3.75A11.375 11.375 0 0 0 5.5 15.125c.003.586.05 1.171.14 1.75l1.671-.726c-.037-.34-.058-.682-.06-1.024a9.625 9.625 0 1 1 9.624 9.625c-.324 0-.647 0-.971-.052l-.718 1.67c.559.089 1.124.133 1.69.132a11.375 11.375 0 1 0 0-22.75Zm1.251 11.322L12.5 28.075a.929.929 0 0 1-1.627.123L8.248 24.05a.761.761 0 0 0-.29-.289l-4.155-2.625A.875.875 0 0 1 3.95 19.5l12.924-5.635a.876.876 0 0 1 1.208 1.207h.043Zm-2.432 1.234L6.069 20.49l2.835 1.793c.335.213.619.497.831.832l1.75 2.817 4.209-9.625ZM4.879 23.254l-2.625 2.625 1.242 1.242 2.625-2.625-1.242-1.242Zm.875 4.375 1.242 1.242 1.75-1.75-1.242-1.242-1.75 1.75Z"></path></svg>';
 
 class IconTargetLarge extends HTMLElement {
     constructor () {

package/dist/IconTemp.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--temp"><path d="M10.992 8V4.124A2.957 2.957 0 0 0 8 1.219a2.958 2.958 0 0 0-2.992 2.905V8a3.964 3.964 0 0 0-1.164 2.783A4.104 4.104 0 0 0 8 14.78a4.104 4.104 0 0 0 4.156-4.034A3.963 3.963 0 0 0 10.992 8ZM8 13.469a2.78 2.78 0 0 1-2.844-2.721 2.625 2.625 0 0 1 .937-2.004l.227-.193V4.124A1.645 1.645 0 0 1 8 2.53a1.645 1.645 0 0 1 1.68 1.593V8.55l.228.193a2.626 2.626 0 0 1 .936 2.004A2.784 2.784 0 0 1 8 13.468Zm1.313-2.406a1.312 1.312 0 1 1-1.97-1.13V6.25h1.313v3.684a1.304 1.304 0 0 1 .656 1.129Z"></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--temp"><path d="M10.992 8V4.124A2.957 2.957 0 0 0 8 1.219a2.958 2.958 0 0 0-2.992 2.905V8a3.964 3.964 0 0 0-1.164 2.783A4.104 4.104 0 0 0 8 14.78a4.104 4.104 0 0 0 4.156-4.034A3.963 3.963 0 0 0 10.992 8ZM8 13.469a2.78 2.78 0 0 1-2.844-2.721 2.625 2.625 0 0 1 .937-2.004l.227-.193V4.124A1.645 1.645 0 0 1 8 2.53a1.645 1.645 0 0 1 1.68 1.593V8.55l.228.193a2.626 2.626 0 0 1 .936 2.004A2.784 2.784 0 0 1 8 13.468Zm1.313-2.406a1.312 1.312 0 1 1-1.97-1.13V6.25h1.313v3.684a1.304 1.304 0 0 1 .656 1.129Z"></path></svg>';
 
 class IconTemp extends HTMLElement {
     constructor () {

package/dist/IconTempLarge.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--tempLarge"><path d="M10.75 9H6.375V7.25h4.375V9Zm-3.5 3.5h3.5v-1.75h-3.5v1.75ZM6.375 16h4.375v-1.75H6.375V16Zm17.938 5.688a6.563 6.563 0 1 1-12.545-2.702 6.501 6.501 0 0 1 1.65-2.216V8.808a4.375 4.375 0 0 1 8.663 0v7.962a6.502 6.502 0 0 1 2.232 4.918Zm-1.75 0a4.803 4.803 0 0 0-1.89-3.816l-.342-.262V8.808a2.626 2.626 0 0 0-5.162 0v8.802l-.341.262a4.813 4.813 0 1 0 7.735 3.816Zm-1.75 0a3.063 3.063 0 1 1-3.938-2.923V12.5h1.75v6.265a3.063 3.063 0 0 1 2.188 2.922Zm-1.75 0a1.313 1.313 0 1 0-2.626 0 1.313 1.313 0 0 0 2.625 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--tempLarge"><path d="M10.75 9H6.375V7.25h4.375V9Zm-3.5 3.5h3.5v-1.75h-3.5v1.75ZM6.375 16h4.375v-1.75H6.375V16Zm17.938 5.688a6.563 6.563 0 1 1-12.545-2.702 6.501 6.501 0 0 1 1.65-2.216V8.808a4.375 4.375 0 0 1 8.663 0v7.962a6.502 6.502 0 0 1 2.232 4.918Zm-1.75 0a4.803 4.803 0 0 0-1.89-3.816l-.342-.262V8.808a2.626 2.626 0 0 0-5.162 0v8.802l-.341.262a4.813 4.813 0 1 0 7.735 3.816Zm-1.75 0a3.063 3.063 0 1 1-3.938-2.923V12.5h1.75v6.265a3.063 3.063 0 0 1 2.188 2.922Zm-1.75 0a1.313 1.313 0 1 0-2.626 0 1.313 1.313 0 0 0 2.625 0Z"></path></svg>';
 
 class IconTempLarge extends HTMLElement {
     constructor () {

package/dist/IconTermsAndConditions.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--termsAndConditions"><g clip-path="url(#prefix__clip0_18_941)"><path d="M8.744 4.482H4.491v1.313h4.253V4.482Z"></path><path d="M6.329 7.519H4.491V8.83H6.33V7.52Z"></path><path d="M14.947 9.085c0-.831-.463-1.584-1.198-1.96l-.919-.473V1.22H1.219v12.6h5.897c.56 0 1.05 0 1.505-.018.201.158.412.315.656.447l1.68.708 1.707-.691a4.292 4.292 0 0 0 1.758-1.663c.298-.498.473-1.102.534-1.872V9.085h-.008ZM6.96 9.059v1.601l.052.411a4.39 4.39 0 0 0 .464 1.435H2.531V2.531h8.986V5.98l-.49-.254-2.8 1.339a2.214 2.214 0 0 0-1.26 1.995H6.96Zm6.326 2.879a2.955 2.955 0 0 1-1.172 1.128l-1.155.464-.053-.026-1.067-.447a2.857 2.857 0 0 1-.744-.595c-.088-.096-.184-.183-.263-.288-.262-.359-.437-.796-.516-1.313L8.28 10.6V9.05c0-.341.201-.665.516-.814l2.214-1.059.516.263 1.313.674.315.166c.297.158.49.464.49.796v1.61c-.035.49-.149.91-.35 1.234l-.009.018Z"></path><path d="m10.599 10.424-.604-.665-.971.883.857.937a.95.95 0 0 0 .7.315h.009a.966.966 0 0 0 .7-.298l1.592-1.68-.953-.901-1.34 1.409h.01Z"></path></g><defs><clipPath id="prefix__clip0_18_941"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></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--termsAndConditions"><g clip-path="url(#prefix__clip0_18_941)"><path d="M8.744 4.482H4.491v1.313h4.253V4.482Z"></path><path d="M6.329 7.519H4.491V8.83H6.33V7.52Z"></path><path d="M14.947 9.085c0-.831-.463-1.584-1.198-1.96l-.919-.473V1.22H1.219v12.6h5.897c.56 0 1.05 0 1.505-.018.201.158.412.315.656.447l1.68.708 1.707-.691a4.292 4.292 0 0 0 1.758-1.663c.298-.498.473-1.102.534-1.872V9.085h-.008ZM6.96 9.059v1.601l.052.411a4.39 4.39 0 0 0 .464 1.435H2.531V2.531h8.986V5.98l-.49-.254-2.8 1.339a2.214 2.214 0 0 0-1.26 1.995H6.96Zm6.326 2.879a2.955 2.955 0 0 1-1.172 1.128l-1.155.464-.053-.026-1.067-.447a2.857 2.857 0 0 1-.744-.595c-.088-.096-.184-.183-.263-.288-.262-.359-.437-.796-.516-1.313L8.28 10.6V9.05c0-.341.201-.665.516-.814l2.214-1.059.516.263 1.313.674.315.166c.297.158.49.464.49.796v1.61c-.035.49-.149.91-.35 1.234l-.009.018Z"></path><path d="m10.599 10.424-.604-.665-.971.883.857.937a.95.95 0 0 0 .7.315h.009a.966.966 0 0 0 .7-.298l1.592-1.68-.953-.901-1.34 1.409h.01Z"></path></g><defs><clipPath id="prefix__clip0_18_941"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
 
 class IconTermsAndConditions extends HTMLElement {
     constructor () {

package/dist/IconTermsAndConditionsLarge.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--termsAndConditionsLarge"><path d="M10.872 10.75h8.26v1.75h-8.26v-1.75Z"></path><path d="M10.872 15.125h4.13v1.75h-4.13v-1.75Z"></path><path d="m20.235 21.381.813.893 2.748-2.896 1.269 1.207-3.02 3.185a1.39 1.39 0 0 1-.997.429h-.008c-.385 0-.753-.167-1.007-.447l-1.085-1.19 1.287-1.18Z"></path><path fill-rule="evenodd" d="M27.917 19.483c0-.98-.551-1.873-1.426-2.328l-.875-.446V4.59H4.634v22.82h13.562c.04 0 .081-.002.12-.005a1.84 1.84 0 0 1 .108-.004c.245.175.498.341.778.49l2.581 1.094 2.617-1.059a6.723 6.723 0 0 0 2.704-2.555c.454-.77.726-1.697.822-2.782v-3.106h-.009Zm-12.171 3.526c.157 1.006.49 1.89.989 2.651H6.384V6.34h17.482v9.476l-1.969-1.006-4.733 2.257a2.643 2.643 0 0 0-1.497 2.372v2.957l.088.621-.009-.008Zm9.844 1.47c-.473.805-1.164 1.461-1.925 1.855l-1.873.752-.665-.28-1.172-.49a5.231 5.231 0 0 1-.989-.708 5.11 5.11 0 0 1-.656-.718c-.429-.578-.709-1.295-.831-2.135l-.062-.42v-2.896c0-.333.193-.648.499-.788l3.955-1.881 1.995 1.024 1.75.901.079.044a.872.872 0 0 1 .472.778v2.976c-.052.796-.245 1.478-.569 2.012l-.008-.026Z" 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 32 32" class="c-pieIcon c-pieIcon--termsAndConditionsLarge"><path d="M10.872 10.75h8.26v1.75h-8.26v-1.75Z"></path><path d="M10.872 15.125h4.13v1.75h-4.13v-1.75Z"></path><path d="m20.235 21.381.813.893 2.748-2.896 1.269 1.207-3.02 3.185a1.39 1.39 0 0 1-.997.429h-.008c-.385 0-.753-.167-1.007-.447l-1.085-1.19 1.287-1.18Z"></path><path fill-rule="evenodd" d="M27.917 19.483c0-.98-.551-1.873-1.426-2.328l-.875-.446V4.59H4.634v22.82h13.562c.04 0 .081-.002.12-.005a1.84 1.84 0 0 1 .108-.004c.245.175.498.341.778.49l2.581 1.094 2.617-1.059a6.723 6.723 0 0 0 2.704-2.555c.454-.77.726-1.697.822-2.782v-3.106h-.009Zm-12.171 3.526c.157 1.006.49 1.89.989 2.651H6.384V6.34h17.482v9.476l-1.969-1.006-4.733 2.257a2.643 2.643 0 0 0-1.497 2.372v2.957l.088.621-.009-.008Zm9.844 1.47c-.473.805-1.164 1.461-1.925 1.855l-1.873.752-.665-.28-1.172-.49a5.231 5.231 0 0 1-.989-.708 5.11 5.11 0 0 1-.656-.718c-.429-.578-.709-1.295-.831-2.135l-.062-.42v-2.896c0-.333.193-.648.499-.788l3.955-1.881 1.995 1.024 1.75.901.079.044a.872.872 0 0 1 .472.778v2.976c-.052.796-.245 1.478-.569 2.012l-.008-.026Z" clip-rule="evenodd"></path></svg>';
 
 class IconTermsAndConditionsLarge extends HTMLElement {
     constructor () {

package/dist/IconThumbsDown.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--thumbsDown"><path d="M14.204 6.906 13.18 3.625a2.406 2.406 0 0 0-2.24-1.54H1.875v1.312H4.5a9.082 9.082 0 0 0-.131 1.61c-.003.781.067 1.56.21 2.328H1.875v1.312h4.314a.21.21 0 0 1 .183.105l2.503 5.154h.989a1.793 1.793 0 0 0 1.75-2.135l-.464-2.415 1.96-.481a1.514 1.514 0 0 0 .963-.726 1.557 1.557 0 0 0 .13-1.243Zm-1.269.569a.236.236 0 0 1-.14.105l-3.176.814.726 3.64a.473.473 0 0 1-.455.56h-.14L7.562 8.13a1.575 1.575 0 0 0-1.338-.787h-.272a10.99 10.99 0 0 1-.236-2.328 8.05 8.05 0 0 1 .14-1.61h5.084a1.076 1.076 0 0 1 1.006.674l1.007 3.22a.218.218 0 0 1-.018.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--thumbsDown"><path d="M14.204 6.906 13.18 3.625a2.406 2.406 0 0 0-2.24-1.54H1.875v1.312H4.5a9.082 9.082 0 0 0-.131 1.61c-.003.781.067 1.56.21 2.328H1.875v1.312h4.314a.21.21 0 0 1 .183.105l2.503 5.154h.989a1.793 1.793 0 0 0 1.75-2.135l-.464-2.415 1.96-.481a1.514 1.514 0 0 0 .963-.726 1.557 1.557 0 0 0 .13-1.243Zm-1.269.569a.236.236 0 0 1-.14.105l-3.176.814.726 3.64a.473.473 0 0 1-.455.56h-.14L7.562 8.13a1.575 1.575 0 0 0-1.338-.787h-.272a10.99 10.99 0 0 1-.236-2.328 8.05 8.05 0 0 1 .14-1.61h5.084a1.076 1.076 0 0 1 1.006.674l1.007 3.22a.218.218 0 0 1-.018.175Z"></path></svg>';
 
 class IconThumbsDown extends HTMLElement {
     constructor () {

package/dist/IconThumbsDownFilled.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--thumbsDownFilled"><path d="M4.404 5.016c-.01 1.234.17 2.461.534 3.64H1.874V2.094h2.992a8.085 8.085 0 0 0-.463 2.922Zm9.8 1.89L13.18 3.625a2.406 2.406 0 0 0-2.24-1.54H6.25a6.685 6.685 0 0 0-.569 2.922 9.984 9.984 0 0 0 .648 3.737l2.546 5.162h.402a1.75 1.75 0 0 0 1.75-2.135l-.402-2.389 2.45-.507a1.531 1.531 0 0 0 1.191-1.338 1.558 1.558 0 0 0-.062-.63Z"></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--thumbsDownFilled"><path d="M4.404 5.016c-.01 1.234.17 2.461.534 3.64H1.874V2.094h2.992a8.085 8.085 0 0 0-.463 2.922Zm9.8 1.89L13.18 3.625a2.406 2.406 0 0 0-2.24-1.54H6.25a6.685 6.685 0 0 0-.569 2.922 9.984 9.984 0 0 0 .648 3.737l2.546 5.162h.402a1.75 1.75 0 0 0 1.75-2.135l-.402-2.389 2.45-.507a1.531 1.531 0 0 0 1.191-1.338 1.558 1.558 0 0 0-.062-.63Z"></path></svg>';
 
 class IconThumbsDownFilled extends HTMLElement {
     constructor () {

package/dist/IconThumbsDownFilledLarge.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--thumbsDownFilledLarge"><path d="m26.587 17.242-4.724 1.164.97 4.839c.145.65.093 1.33-.148 1.951a3.43 3.43 0 0 1-3.754 2.179s-4.611-9.249-5.39-10.404c-.307-.43-.585-.88-.831-1.347a12.119 12.119 0 0 1-1.085-5.312 8.521 8.521 0 0 1 1.094-4.374c.245-.454.517-.892.814-1.313h8.88A4.375 4.375 0 0 1 26.5 7.39l1.986 6.545a2.625 2.625 0 0 1-1.899 3.307ZM11.18 5.072a10.29 10.29 0 0 0-1.304 5.24 13.842 13.842 0 0 0 1.286 6.126c.088.175.184.332.271.48H3.75V4.626h7.682l-.253.446Z"></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--thumbsDownFilledLarge"><path d="m26.587 17.242-4.724 1.164.97 4.839c.145.65.093 1.33-.148 1.951a3.43 3.43 0 0 1-3.754 2.179s-4.611-9.249-5.39-10.404c-.307-.43-.585-.88-.831-1.347a12.119 12.119 0 0 1-1.085-5.312 8.521 8.521 0 0 1 1.094-4.374c.245-.454.517-.892.814-1.313h8.88A4.375 4.375 0 0 1 26.5 7.39l1.986 6.545a2.625 2.625 0 0 1-1.899 3.307ZM11.18 5.072a10.29 10.29 0 0 0-1.304 5.24 13.842 13.842 0 0 0 1.286 6.126c.088.175.184.332.271.48H3.75V4.626h7.682l-.253.446Z"></path></svg>';
 
 class IconThumbsDownFilledLarge extends HTMLElement {
     constructor () {