@justeattakeaway/pie-icons-webc 0.3.0 → 0.4.0

package/dist/IconPieChartLarge.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--pieChartLarge"><path d="M16.875 2.875H16A13.125 13.125 0 0 0 2.875 16v.875h14v-14Zm-1.75 12.25h-10.5a11.375 11.375 0 0 1 10.5-10.5v10.5Zm.07 11.375-.14 1.75a12.294 12.294 0 0 1-11.016-9.625h1.793a10.552 10.552 0 0 0 9.363 7.875ZM28.25 16a12.294 12.294 0 0 1-11.305 12.25l-.14-1.75a10.5 10.5 0 0 0 1.82-20.668V4.03A12.25 12.25 0 0 1 28.25 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--pieChartLarge"><path d="M16.875 2.875H16A13.125 13.125 0 0 0 2.875 16v.875h14v-14Zm-1.75 12.25h-10.5a11.375 11.375 0 0 1 10.5-10.5v10.5Zm.07 11.375-.14 1.75a12.294 12.294 0 0 1-11.016-9.625h1.793a10.552 10.552 0 0 0 9.363 7.875ZM28.25 16a12.294 12.294 0 0 1-11.305 12.25l-.14-1.75a10.5 10.5 0 0 0 1.82-20.668V4.03A12.25 12.25 0 0 1 28.25 16Z"></path></svg>';
 
 class IconPieChartLarge extends HTMLElement {
     constructor () {

package/dist/IconPieLarge.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--pieLarge"><path d="M16.271 13.375a.895.895 0 0 0 .893-.893c0-.533-.402-1.793-.893-1.793-.49 0-.892 1.295-.892 1.793a.895.895 0 0 0 .893.893Z"></path><path d="M11.73 12.159a.918.918 0 0 0 .586.228h.105a.97.97 0 0 0 .35-.114.911.911 0 0 0 .272-.245c.332-.368.892-1.61.507-1.934-.07-.061-.157-.079-.262-.079-.49 0-1.304.534-1.584.84a1.06 1.06 0 0 0-.21.306.867.867 0 0 0 .018.726c.052.114.13.21.218.298v-.026Z"></path><path d="M19.57 12.229a.904.904 0 0 0 .341.096h.07a.985.985 0 0 0 .28-.044.822.822 0 0 0 .307-.175.97.97 0 0 0 .218-.28.902.902 0 0 0 .097-.341c0-.114 0-.236-.044-.35a.823.823 0 0 0-.175-.306c-.28-.315-1.129-.832-1.628-.832-.096 0-.183.018-.245.07-.376.324.175 1.567.508 1.934a.97.97 0 0 0 .28.219l-.009.009Z"></path><path d="M17.05 18.354h-1.793v3.579h1.793v-3.58Z"></path><path d="m12.588 21.933-.884-3.58h-1.82l.893 3.58h1.81Z"></path><path d="M22.423 18.354h-1.811l-.875 3.579h1.802l.884-3.58Z"></path><path d="M29.186 14.661h-.638l-2.083-4.042a6.052 6.052 0 0 0-4.497-2.748h-.105c-.814-.096-1.435-.639-1.82-1.085-.849-.989-2.17-1.496-3.92-1.496h-.228c-1.75 0-3.071.499-3.92 1.496-.376.446-1.006.989-1.82 1.076h-.105a6.097 6.097 0 0 0-4.497 2.765l-2.065 4.034h-.674v1.75h1.96l2.03 9.214h18.471l2.03-9.214h1.881v-1.75ZM7.05 11.538a4.308 4.308 0 0 1 3.185-1.926h.105c1.102-.122 2.126-.7 2.966-1.688.499-.587 1.374-.884 2.59-.884h.228c1.216 0 2.091.297 2.59.884.84.988 1.872 1.566 2.966 1.671h.105c1.321.14 2.485.857 3.159 1.899l1.627 3.167H5.456l1.602-3.123h-.009Zm16.817 12.337H8.204l-1.645-7.464h18.953l-1.646 7.464Z"></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--pieLarge"><path d="M16.271 13.375a.895.895 0 0 0 .893-.893c0-.533-.402-1.793-.893-1.793-.49 0-.892 1.295-.892 1.793a.895.895 0 0 0 .893.893Z"></path><path d="M11.73 12.159a.918.918 0 0 0 .586.228h.105a.97.97 0 0 0 .35-.114.911.911 0 0 0 .272-.245c.332-.368.892-1.61.507-1.934-.07-.061-.157-.079-.262-.079-.49 0-1.304.534-1.584.84a1.06 1.06 0 0 0-.21.306.867.867 0 0 0 .018.726c.052.114.13.21.218.298v-.026Z"></path><path d="M19.57 12.229a.904.904 0 0 0 .341.096h.07a.985.985 0 0 0 .28-.044.822.822 0 0 0 .307-.175.97.97 0 0 0 .218-.28.902.902 0 0 0 .097-.341c0-.114 0-.236-.044-.35a.823.823 0 0 0-.175-.306c-.28-.315-1.129-.832-1.628-.832-.096 0-.183.018-.245.07-.376.324.175 1.567.508 1.934a.97.97 0 0 0 .28.219l-.009.009Z"></path><path d="M17.05 18.354h-1.793v3.579h1.793v-3.58Z"></path><path d="m12.588 21.933-.884-3.58h-1.82l.893 3.58h1.81Z"></path><path d="M22.423 18.354h-1.811l-.875 3.579h1.802l.884-3.58Z"></path><path d="M29.186 14.661h-.638l-2.083-4.042a6.052 6.052 0 0 0-4.497-2.748h-.105c-.814-.096-1.435-.639-1.82-1.085-.849-.989-2.17-1.496-3.92-1.496h-.228c-1.75 0-3.071.499-3.92 1.496-.376.446-1.006.989-1.82 1.076h-.105a6.097 6.097 0 0 0-4.497 2.765l-2.065 4.034h-.674v1.75h1.96l2.03 9.214h18.471l2.03-9.214h1.881v-1.75ZM7.05 11.538a4.308 4.308 0 0 1 3.185-1.926h.105c1.102-.122 2.126-.7 2.966-1.688.499-.587 1.374-.884 2.59-.884h.228c1.216 0 2.091.297 2.59.884.84.988 1.872 1.566 2.966 1.671h.105c1.321.14 2.485.857 3.159 1.899l1.627 3.167H5.456l1.602-3.123h-.009Zm16.817 12.337H8.204l-1.645-7.464h18.953l-1.646 7.464Z"></path></svg>';
 
 class IconPieLarge extends HTMLElement {
     constructor () {

package/dist/IconPinAtHome.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--pinAtHome"><path d="m14.694 7.125-.91.875s-.298-.289-.753-.7v1.575H11.72V6.154a27.329 27.329 0 0 0-3.5-2.713.534.534 0 0 0-.403 0 26.933 26.933 0 0 0-3.5 2.704v6.44h8.75v1.313H2.97V7.335c-.455.411-.744.691-.753.7l-.91-.91a42.972 42.972 0 0 1 5.819-4.813 1.75 1.75 0 0 1 1.75-.008 42.882 42.882 0 0 1 5.819 4.821ZM7.124 9.75a.875.875 0 1 0 0 1.75.875.875 0 0 0 0-1.75Zm1.75.875a.875.875 0 1 0 1.751 0 .875.875 0 0 0-1.75 0Zm3.5-.875a.875.875 0 1 0 0 1.75.875.875 0 0 0 0-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--pinAtHome"><path d="m14.694 7.125-.91.875s-.298-.289-.753-.7v1.575H11.72V6.154a27.329 27.329 0 0 0-3.5-2.713.534.534 0 0 0-.403 0 26.933 26.933 0 0 0-3.5 2.704v6.44h8.75v1.313H2.97V7.335c-.455.411-.744.691-.753.7l-.91-.91a42.972 42.972 0 0 1 5.819-4.813 1.75 1.75 0 0 1 1.75-.008 42.882 42.882 0 0 1 5.819 4.821ZM7.124 9.75a.875.875 0 1 0 0 1.75.875.875 0 0 0 0-1.75Zm1.75.875a.875.875 0 1 0 1.751 0 .875.875 0 0 0-1.75 0Zm3.5-.875a.875.875 0 1 0 0 1.75.875.875 0 0 0 0-1.75Z"></path></svg>';
 
 class IconPinAtHome extends HTMLElement {
     constructor () {

package/dist/IconPinAtHomeFilled.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--pinAtHomeFilled"><path d="M8.875 2.304a1.75 1.75 0 0 0-1.75.008 42.972 42.972 0 0 0-5.819 4.813l.91.875s.298-.289.753-.7v6.571H13.03V7.335c.455.411.744.691.753.7l.875-.945a42.875 42.875 0 0 0-5.784-4.786Zm-3.5 8.321a.875.875 0 1 1 0-1.75.875.875 0 0 1 0 1.75Zm2.625 0a.875.875 0 1 1 0-1.75.875.875 0 0 1 0 1.75Zm2.625 0a.875.875 0 1 1 0-1.75.875.875 0 0 1 0 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--pinAtHomeFilled"><path d="M8.875 2.304a1.75 1.75 0 0 0-1.75.008 42.972 42.972 0 0 0-5.819 4.813l.91.875s.298-.289.753-.7v6.571H13.03V7.335c.455.411.744.691.753.7l.875-.945a42.875 42.875 0 0 0-5.784-4.786Zm-3.5 8.321a.875.875 0 1 1 0-1.75.875.875 0 0 1 0 1.75Zm2.625 0a.875.875 0 1 1 0-1.75.875.875 0 0 1 0 1.75Zm2.625 0a.875.875 0 1 1 0-1.75.875.875 0 0 1 0 1.75Z"></path></svg>';
 
 class IconPinAtHomeFilled extends HTMLElement {
     constructor () {

package/dist/IconPinAtHomeFilledLarge.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--pinAtHomeFilledLarge"><path d="M17.461 4.109a3.15 3.15 0 0 0-2.94 0C10.146 6.68 3.208 13.375 2.92 13.62l1.207 1.26s.928-.875 2.25-2.083V26.5h19.25V12.797a130.695 130.695 0 0 1 2.248 2.083l1.251-1.26c-.332-.245-7.271-6.939-11.664-9.511ZM9.438 20.375a1.312 1.312 0 1 1 0-2.624 1.312 1.312 0 0 1 0 2.624Zm4.375 0a1.312 1.312 0 1 1 0-2.624 1.312 1.312 0 0 1 0 2.624Zm4.375 0a1.312 1.312 0 1 1 0-2.624 1.312 1.312 0 0 1 0 2.624Zm4.375 0a1.312 1.312 0 1 1 0-2.624 1.312 1.312 0 0 1 0 2.624Z"></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--pinAtHomeFilledLarge"><path d="M17.461 4.109a3.15 3.15 0 0 0-2.94 0C10.146 6.68 3.208 13.375 2.92 13.62l1.207 1.26s.928-.875 2.25-2.083V26.5h19.25V12.797a130.695 130.695 0 0 1 2.248 2.083l1.251-1.26c-.332-.245-7.271-6.939-11.664-9.511ZM9.438 20.375a1.312 1.312 0 1 1 0-2.624 1.312 1.312 0 0 1 0 2.624Zm4.375 0a1.312 1.312 0 1 1 0-2.624 1.312 1.312 0 0 1 0 2.624Zm4.375 0a1.312 1.312 0 1 1 0-2.624 1.312 1.312 0 0 1 0 2.624Zm4.375 0a1.312 1.312 0 1 1 0-2.624 1.312 1.312 0 0 1 0 2.624Z"></path></svg>';
 
 class IconPinAtHomeFilledLarge extends HTMLElement {
     constructor () {

package/dist/IconPinAtHomeLarge.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--pinAtHomeLarge"><path d="M13.375 18.625a1.313 1.313 0 1 1 0 2.626 1.313 1.313 0 0 1 0-2.626Zm3.063 1.313a1.313 1.313 0 1 0 2.625 0 1.313 1.313 0 0 0-2.625 0Zm4.375 0a1.313 1.313 0 1 0 2.625 0 1.313 1.313 0 0 0-2.625 0Zm5.687-1.313a1.313 1.313 0 1 0 0 2.626 1.313 1.313 0 0 0 0-2.626ZM17.461 4.109a3.15 3.15 0 0 0-2.94 0C10.146 6.68 3.208 13.375 2.92 13.62l1.207 1.26s.928-.875 2.25-2.083V26.5h19.25V23h-1.75v1.75H8.125V11.231a55.837 55.837 0 0 1 7.253-5.582 1.444 1.444 0 0 1 1.216 0 55.79 55.79 0 0 1 7.28 5.582v5.644h1.75v-4.078a130.695 130.695 0 0 1 2.249 2.083l1.251-1.26c-.332-.245-7.271-6.939-11.664-9.511Z"></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--pinAtHomeLarge"><path d="M13.375 18.625a1.313 1.313 0 1 1 0 2.626 1.313 1.313 0 0 1 0-2.626Zm3.063 1.313a1.313 1.313 0 1 0 2.625 0 1.313 1.313 0 0 0-2.625 0Zm4.375 0a1.313 1.313 0 1 0 2.625 0 1.313 1.313 0 0 0-2.625 0Zm5.687-1.313a1.313 1.313 0 1 0 0 2.626 1.313 1.313 0 0 0 0-2.626ZM17.461 4.109a3.15 3.15 0 0 0-2.94 0C10.146 6.68 3.208 13.375 2.92 13.62l1.207 1.26s.928-.875 2.25-2.083V26.5h19.25V23h-1.75v1.75H8.125V11.231a55.837 55.837 0 0 1 7.253-5.582 1.444 1.444 0 0 1 1.216 0 55.79 55.79 0 0 1 7.28 5.582v5.644h1.75v-4.078a130.695 130.695 0 0 1 2.249 2.083l1.251-1.26c-.332-.245-7.271-6.939-11.664-9.511Z"></path></svg>';
 
 class IconPinAtHomeLarge extends HTMLElement {
     constructor () {

package/dist/IconPizza.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--pizza"><path d="M13.924 4.99C13.1 3.704 10.625.764 5.253 1.087a1.496 1.496 0 0 0-1.41 1.497V15l9.774-8.041a1.496 1.496 0 0 0 .307-1.969Zm-8.75 4.83a1.12 1.12 0 0 0 .875-.324 1.146 1.146 0 0 0 0-1.619 1.164 1.164 0 0 0-.875-.332V4.622a7.114 7.114 0 0 1 5.941 2.704l-5.959 4.856.018-2.362Zm7.63-3.876-.674.551a8.478 8.478 0 0 0-6.974-3.176v-.735a.192.192 0 0 1 .219-.193h.718c4.156 0 6.124 2.293 6.772 3.325a.193.193 0 0 1-.079.228h.018Zm-3.5 1.12a1.006 1.006 0 1 1-.98-1.007A1.006 1.006 0 0 1 9.33 7.064h-.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--pizza"><path d="M13.924 4.99C13.1 3.704 10.625.764 5.253 1.087a1.496 1.496 0 0 0-1.41 1.497V15l9.774-8.041a1.496 1.496 0 0 0 .307-1.969Zm-8.75 4.83a1.12 1.12 0 0 0 .875-.324 1.146 1.146 0 0 0 0-1.619 1.164 1.164 0 0 0-.875-.332V4.622a7.114 7.114 0 0 1 5.941 2.704l-5.959 4.856.018-2.362Zm7.63-3.876-.674.551a8.478 8.478 0 0 0-6.974-3.176v-.735a.192.192 0 0 1 .219-.193h.718c4.156 0 6.124 2.293 6.772 3.325a.193.193 0 0 1-.079.228h.018Zm-3.5 1.12a1.006 1.006 0 1 1-.98-1.007A1.006 1.006 0 0 1 9.33 7.064h-.026Z"></path></svg>';
 
 class IconPizza extends HTMLElement {
     constructor () {

package/dist/IconPizzaLarge.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--pizzaLarge"><path d="M28.53 10.129c-1.698-2.643-6.834-8.707-17.911-8.042a2.625 2.625 0 0 0-2.494 2.66v25.13L27.988 13.63a2.625 2.625 0 0 0 .542-3.5ZM9.875 16.578a1.618 1.618 0 0 1 .67 3.149 1.62 1.62 0 0 1-.67.07v-3.22Zm0 4.97h.131a3.37 3.37 0 0 0 2.418-5.873 3.37 3.37 0 0 0-2.549-.848V7.872c7.997-.184 12.25 3.754 14.289 6.624L9.875 26.185v-4.637Zm17.001-9.275-1.356 1.102c-2.021-2.765-6.764-7.429-15.645-7.254V4.747a.875.875 0 0 1 .875-.875c.525 0 1.05-.043 1.549-.043 9.047-.035 13.326 4.996 14.761 7.245a.875.875 0 0 1-.184 1.199Zm-9.564-1.523a3.062 3.062 0 1 0 0 6.125 3.062 3.062 0 0 0 0-6.125Zm0 4.375a1.313 1.313 0 1 1 0-2.626 1.313 1.313 0 0 1 0 2.626Z"></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--pizzaLarge"><path d="M28.53 10.129c-1.698-2.643-6.834-8.707-17.911-8.042a2.625 2.625 0 0 0-2.494 2.66v25.13L27.988 13.63a2.625 2.625 0 0 0 .542-3.5ZM9.875 16.578a1.618 1.618 0 0 1 .67 3.149 1.62 1.62 0 0 1-.67.07v-3.22Zm0 4.97h.131a3.37 3.37 0 0 0 2.418-5.873 3.37 3.37 0 0 0-2.549-.848V7.872c7.997-.184 12.25 3.754 14.289 6.624L9.875 26.185v-4.637Zm17.001-9.275-1.356 1.102c-2.021-2.765-6.764-7.429-15.645-7.254V4.747a.875.875 0 0 1 .875-.875c.525 0 1.05-.043 1.549-.043 9.047-.035 13.326 4.996 14.761 7.245a.875.875 0 0 1-.184 1.199Zm-9.564-1.523a3.062 3.062 0 1 0 0 6.125 3.062 3.062 0 0 0 0-6.125Zm0 4.375a1.313 1.313 0 1 1 0-2.626 1.313 1.313 0 0 1 0 2.626Z"></path></svg>';
 
 class IconPizzaLarge extends HTMLElement {
     constructor () {

package/dist/IconPlaceholder.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--placeholder"><path fill-rule="evenodd" d="M.083 0h15.834L16 .083v15.834l-.083.083H.083L0 15.917V.083L.083 0Zm15.75 15.834V.166H.166v15.668h15.669ZM3.27 1h9.463A2.268 2.268 0 0 1 15 3.269v9.463A2.268 2.268 0 0 1 12.732 15H3.269A2.268 2.268 0 0 1 1 12.732V3.269A2.269 2.269 0 0 1 3.269 1Z" 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--placeholder"><path fill-rule="evenodd" d="M.083 0h15.834L16 .083v15.834l-.083.083H.083L0 15.917V.083L.083 0Zm15.75 15.834V.166H.166v15.668h15.669ZM3.27 1h9.463A2.268 2.268 0 0 1 15 3.269v9.463A2.268 2.268 0 0 1 12.732 15H3.269A2.268 2.268 0 0 1 1 12.732V3.269A2.269 2.269 0 0 1 3.269 1Z" clip-rule="evenodd"></path></svg>';
 
 class IconPlaceholder extends HTMLElement {
     constructor () {

package/dist/IconPlaceholderLarge.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--placeholderLarge"><path fill-rule="evenodd" d="M.166 0h31.668L32 .166v31.668l-.166.166H.166L0 31.834V.166L.166 0Zm31.502 31.668V.33H.33v31.337h31.337ZM6.537 2h18.926A4.537 4.537 0 0 1 30 6.537v18.926A4.537 4.537 0 0 1 25.463 30H6.537A4.537 4.537 0 0 1 2 25.463V6.537A4.537 4.537 0 0 1 6.537 2Z" 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--placeholderLarge"><path fill-rule="evenodd" d="M.166 0h31.668L32 .166v31.668l-.166.166H.166L0 31.834V.166L.166 0Zm31.502 31.668V.33H.33v31.337h31.337ZM6.537 2h18.926A4.537 4.537 0 0 1 30 6.537v18.926A4.537 4.537 0 0 1 25.463 30H6.537A4.537 4.537 0 0 1 2 25.463V6.537A4.537 4.537 0 0 1 6.537 2Z" clip-rule="evenodd"></path></svg>';
 
 class IconPlaceholderLarge extends HTMLElement {
     constructor () {

package/dist/IconPlane.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--plane"><path d="m10.931 15-1.881-.595a3.316 3.316 0 0 0-2.1 0L5.069 15l-.044-1.505.35-.192a.875.875 0 0 0 .446-.77V10.45l-3.832.77V8.919a1.426 1.426 0 0 1 .761-1.243l3.106-1.75v-2.52a2.188 2.188 0 0 1 4.375 0v2.555l3.107 1.75a1.427 1.427 0 0 1 .726 1.243v2.301l-3.877-.805v2.083a.875.875 0 0 0 .447.77l.341.192L10.931 15ZM8 12.918a4.7 4.7 0 0 1 .928.096 2.196 2.196 0 0 1-.053-.481V8.875l3.832.77v-.7a.113.113 0 0 0-.052-.096L8.875 6.73V3.406a.875.875 0 0 0-1.75 0v3.325l-3.78 2.091a.114.114 0 0 0-.052.097v.7l3.832-.744v3.684c0 .162-.017.323-.052.481A4.7 4.7 0 0 1 8 12.918Z"></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--plane"><path d="m10.931 15-1.881-.595a3.316 3.316 0 0 0-2.1 0L5.069 15l-.044-1.505.35-.192a.875.875 0 0 0 .446-.77V10.45l-3.832.77V8.919a1.426 1.426 0 0 1 .761-1.243l3.106-1.75v-2.52a2.188 2.188 0 0 1 4.375 0v2.555l3.107 1.75a1.427 1.427 0 0 1 .726 1.243v2.301l-3.877-.805v2.083a.875.875 0 0 0 .447.77l.341.192L10.931 15ZM8 12.918a4.7 4.7 0 0 1 .928.096 2.196 2.196 0 0 1-.053-.481V8.875l3.832.77v-.7a.113.113 0 0 0-.052-.096L8.875 6.73V3.406a.875.875 0 0 0-1.75 0v3.325l-3.78 2.091a.114.114 0 0 0-.052.097v.7l3.832-.744v3.684c0 .162-.017.323-.052.481A4.7 4.7 0 0 1 8 12.918Z"></path></svg>';
 
 class IconPlane extends HTMLElement {
     constructor () {

package/dist/IconPlaneLarge.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--planeLarge"><path d="m20.786 28.582-2.905-.97a6.011 6.011 0 0 0-3.762 0l-2.905.97-.062-2.143.456-.263a1.75 1.75 0 0 0 .874-1.531v-3.894l-7.455 1.313V18.45a2.214 2.214 0 0 1 1.13-1.916l6.343-3.868V7.25a3.5 3.5 0 1 1 7 0v5.416l6.352 3.894a2.17 2.17 0 0 1 1.103 1.89v3.614L19.5 20.75v3.894a1.75 1.75 0 0 0 .875 1.531l.455.263-.044 2.143ZM16 25.555a7.75 7.75 0 0 1 1.951.254 3.5 3.5 0 0 1-.201-1.164v-6.02l7.455 1.321V18.45a.446.446 0 0 0-.227-.385L17.75 13.69V7.25a1.75 1.75 0 0 0-3.5 0v6.405L7.057 18.03a.463.463 0 0 0-.262.402v1.532l7.455-1.339v5.985c0 .396-.069.79-.201 1.164A7.748 7.748 0 0 1 16 25.555Z"></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--planeLarge"><path d="m20.786 28.582-2.905-.97a6.011 6.011 0 0 0-3.762 0l-2.905.97-.062-2.143.456-.263a1.75 1.75 0 0 0 .874-1.531v-3.894l-7.455 1.313V18.45a2.214 2.214 0 0 1 1.13-1.916l6.343-3.868V7.25a3.5 3.5 0 1 1 7 0v5.416l6.352 3.894a2.17 2.17 0 0 1 1.103 1.89v3.614L19.5 20.75v3.894a1.75 1.75 0 0 0 .875 1.531l.455.263-.044 2.143ZM16 25.555a7.75 7.75 0 0 1 1.951.254 3.5 3.5 0 0 1-.201-1.164v-6.02l7.455 1.321V18.45a.446.446 0 0 0-.227-.385L17.75 13.69V7.25a1.75 1.75 0 0 0-3.5 0v6.405L7.057 18.03a.463.463 0 0 0-.262.402v1.532l7.455-1.339v5.985c0 .396-.069.79-.201 1.164A7.748 7.748 0 0 1 16 25.555Z"></path></svg>';
 
 class IconPlaneLarge extends HTMLElement {
     constructor () {

package/dist/IconPlay.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--play"><path d="M4.596 4.299 11.544 8l-6.948 3.693V4.299ZM4.255 2.75a.962.962 0 0 0-.971.963v8.557a.963.963 0 0 0 1.478.831l7.403-3.946a1.312 1.312 0 0 0 0-2.319L4.762 2.908a.945.945 0 0 0-.507-.158Z"></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--play"><path d="M4.596 4.299 11.544 8l-6.948 3.693V4.299ZM4.255 2.75a.962.962 0 0 0-.971.963v8.557a.963.963 0 0 0 1.478.831l7.403-3.946a1.312 1.312 0 0 0 0-2.319L4.762 2.908a.945.945 0 0 0-.507-.158Z"></path></svg>';
 
 class IconPlay extends HTMLElement {
     constructor () {

package/dist/IconPlayCircle.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--playCircle"><path d="M8 1.219A6.781 6.781 0 1 0 14.781 8 6.79 6.79 0 0 0 8 1.219Zm0 12.25A5.469 5.469 0 1 1 8 2.53a5.469 5.469 0 0 1 0 10.938Z"></path><path d="M11.141 7.282 6.82 5.305a.77.77 0 0 0-.753.07.779.779 0 0 0-.367.656v3.973a.779.779 0 0 0 .367.656.742.742 0 0 0 .752.053l4.323-1.978a.788.788 0 0 0 0-1.435v-.018Zm-4.13 1.882V6.836L9.557 8 7.011 9.164Z"></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--playCircle"><path d="M8 1.219A6.781 6.781 0 1 0 14.781 8 6.79 6.79 0 0 0 8 1.219Zm0 12.25A5.469 5.469 0 1 1 8 2.53a5.469 5.469 0 0 1 0 10.938Z"></path><path d="M11.141 7.282 6.82 5.305a.77.77 0 0 0-.753.07.779.779 0 0 0-.367.656v3.973a.779.779 0 0 0 .367.656.742.742 0 0 0 .752.053l4.323-1.978a.788.788 0 0 0 0-1.435v-.018Zm-4.13 1.882V6.836L9.557 8 7.011 9.164Z"></path></svg>';
 
 class IconPlayCircle extends HTMLElement {
     constructor () {

package/dist/IconPlayCircleFilled.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--playCircleFilled"><path d="M7.011 9.164 9.557 8 7.011 6.836v2.328Z"></path><path d="M8 1.219A6.781 6.781 0 1 0 14.781 8 6.79 6.79 0 0 0 8 1.219Zm3.141 7.498L6.82 10.695a.744.744 0 0 1-.333.079.726.726 0 0 1-.42-.149.78.78 0 0 1-.367-.656V6.014a.779.779 0 0 1 .367-.639.77.77 0 0 1 .753-.053L11.14 7.3a.788.788 0 0 1 0 1.435v-.018Z"></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--playCircleFilled"><path d="M7.011 9.164 9.557 8 7.011 6.836v2.328Z"></path><path d="M8 1.219A6.781 6.781 0 1 0 14.781 8 6.79 6.79 0 0 0 8 1.219Zm3.141 7.498L6.82 10.695a.744.744 0 0 1-.333.079.726.726 0 0 1-.42-.149.78.78 0 0 1-.367-.656V6.014a.779.779 0 0 1 .367-.639.77.77 0 0 1 .753-.053L11.14 7.3a.788.788 0 0 1 0 1.435v-.018Z"></path></svg>';
 
 class IconPlayCircleFilled extends HTMLElement {
     constructor () {

package/dist/IconPlayCircleFilledLarge.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--playCircleFilledLarge"><path d="m20.043 16-6.633 3.456-.026-6.93L20.043 16Z"></path><path fill-rule="evenodd" d="M9.194 5.814a12.25 12.25 0 1 1 13.612 20.372A12.25 12.25 0 0 1 9.194 5.814Zm4.688 15.366 7.56-3.964A1.46 1.46 0 0 0 22.125 16a1.479 1.479 0 0 0-.7-1.234l-7.516-3.928a1.417 1.417 0 0 0-1.462-.088 1.46 1.46 0 0 0-.778 1.321v7.875a1.46 1.46 0 0 0 1.444 1.47c.274 0 .542-.083.77-.236Z" 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--playCircleFilledLarge"><path d="m20.043 16-6.633 3.456-.026-6.93L20.043 16Z"></path><path fill-rule="evenodd" d="M9.194 5.814a12.25 12.25 0 1 1 13.612 20.372A12.25 12.25 0 0 1 9.194 5.814Zm4.688 15.366 7.56-3.964A1.46 1.46 0 0 0 22.125 16a1.479 1.479 0 0 0-.7-1.234l-7.516-3.928a1.417 1.417 0 0 0-1.462-.088 1.46 1.46 0 0 0-.778 1.321v7.875a1.46 1.46 0 0 0 1.444 1.47c.274 0 .542-.083.77-.236Z" clip-rule="evenodd"></path></svg>';
 
 class IconPlayCircleFilledLarge extends HTMLElement {
     constructor () {

package/dist/IconPlayCircleLarge.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--playCircleLarge"><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 21Z"></path><path d="m21.425 14.766-7.516-3.928a1.417 1.417 0 0 0-1.462-.088 1.46 1.46 0 0 0-.778 1.304v7.875a1.46 1.46 0 0 0 1.444 1.487c.274 0 .542-.083.77-.236l7.56-3.964A1.462 1.462 0 0 0 22.124 16a1.479 1.479 0 0 0-.7-1.234Zm-8.05 4.734v-7l6.659 3.5-6.659 3.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--playCircleLarge"><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 21Z"></path><path d="m21.425 14.766-7.516-3.928a1.417 1.417 0 0 0-1.462-.088 1.46 1.46 0 0 0-.778 1.304v7.875a1.46 1.46 0 0 0 1.444 1.487c.274 0 .542-.083.77-.236l7.56-3.964A1.462 1.462 0 0 0 22.124 16a1.479 1.479 0 0 0-.7-1.234Zm-8.05 4.734v-7l6.659 3.5-6.659 3.5Z"></path></svg>';
 
 class IconPlayCircleLarge extends HTMLElement {
     constructor () {

package/dist/IconPlayLarge.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--playLarge"><path d="m8.807 8.361.088.044L23.192 16 8.895 23.595s0 .053-.079.07V8.361h-.009Zm.01-1.75a1.75 1.75 0 0 0-1.75 1.75v15.304a1.75 1.75 0 0 0 2.624 1.47l14.306-7.63a1.75 1.75 0 0 0 0-3.062L9.717 6.865a1.75 1.75 0 0 0-.918-.271l.017.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 32 32" class="c-pieIcon c-pieIcon--playLarge"><path d="m8.807 8.361.088.044L23.192 16 8.895 23.595s0 .053-.079.07V8.361h-.009Zm.01-1.75a1.75 1.75 0 0 0-1.75 1.75v15.304a1.75 1.75 0 0 0 2.624 1.47l14.306-7.63a1.75 1.75 0 0 0 0-3.062L9.717 6.865a1.75 1.75 0 0 0-.918-.271l.017.017Z"></path></svg>';
 
 class IconPlayLarge extends HTMLElement {
     constructor () {

package/dist/IconPlus.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--plus"><path d="M14.125 7.344H8.656V1.875H7.344v5.469H1.875v1.312h5.469v5.469h1.312V8.656h5.469V7.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--plus"><path d="M14.125 7.344H8.656V1.875H7.344v5.469H1.875v1.312h5.469v5.469h1.312V8.656h5.469V7.344Z"></path></svg>';
 
 class IconPlus extends HTMLElement {
     constructor () {

package/dist/IconPlusCircle.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--plusCircle"><path d="M8.656 4.596H7.344v2.748H4.596v1.312h2.748v2.748h1.312V8.656h2.748V7.344H8.656V4.596Z"></path><path d="M12.795 3.205a6.781 6.781 0 1 0 0 9.625 6.79 6.79 0 0 0 0-9.625Zm-.927 8.662a5.469 5.469 0 1 1-7.734-7.735 5.469 5.469 0 0 1 7.734 7.736Z"></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--plusCircle"><path d="M8.656 4.596H7.344v2.748H4.596v1.312h2.748v2.748h1.312V8.656h2.748V7.344H8.656V4.596Z"></path><path d="M12.795 3.205a6.781 6.781 0 1 0 0 9.625 6.79 6.79 0 0 0 0-9.625Zm-.927 8.662a5.469 5.469 0 1 1-7.734-7.735 5.469 5.469 0 0 1 7.734 7.736Z"></path></svg>';
 
 class IconPlusCircle extends HTMLElement {
     constructor () {

package/dist/IconPlusCircleFilled.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--plusCircleFilled"><path d="M12.795 3.205a6.781 6.781 0 1 0 0 9.625 6.79 6.79 0 0 0 0-9.625Zm-1.391 5.451H8.656v2.748H7.344V8.656H4.596V7.344h2.748V4.596h1.312v2.748h2.748v1.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--plusCircleFilled"><path d="M12.795 3.205a6.781 6.781 0 1 0 0 9.625 6.79 6.79 0 0 0 0-9.625Zm-1.391 5.451H8.656v2.748H7.344V8.656H4.596V7.344h2.748V4.596h1.312v2.748h2.748v1.312Z"></path></svg>';
 
 class IconPlusCircleFilled extends HTMLElement {
     constructor () {

package/dist/IconPlusCircleFilledLarge.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--plusCircleFilledLarge"><path d="M24.663 7.338A12.25 12.25 0 1 0 7.339 24.663 12.25 12.25 0 0 0 24.663 7.338Zm-2.477 9.537h-5.31v5.311h-1.75v-5.311H9.813v-1.75h5.311V9.814h1.75v5.311h5.311v1.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--plusCircleFilledLarge"><path d="M24.663 7.338A12.25 12.25 0 1 0 7.339 24.663 12.25 12.25 0 0 0 24.663 7.338Zm-2.477 9.537h-5.31v5.311h-1.75v-5.311H9.813v-1.75h5.311V9.814h1.75v5.311h5.311v1.75Z"></path></svg>';
 
 class IconPlusCircleFilledLarge extends HTMLElement {
     constructor () {

package/dist/IconPlusCircleLarge.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--plusCircleLarge"><path d="M16.875 9.814h-1.75v5.311H9.814v1.75h5.311v5.311h1.75v-5.311h5.311v-1.75h-5.31V9.814Z"></path><path d="M24.663 7.338A12.25 12.25 0 1 0 7.339 24.663 12.25 12.25 0 0 0 24.663 7.338Zm-1.234 16.09A10.5 10.5 0 1 1 8.605 8.555 10.5 10.5 0 0 1 23.43 23.43Z"></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--plusCircleLarge"><path d="M16.875 9.814h-1.75v5.311H9.814v1.75h5.311v5.311h1.75v-5.311h5.311v-1.75h-5.31V9.814Z"></path><path d="M24.663 7.338A12.25 12.25 0 1 0 7.339 24.663 12.25 12.25 0 0 0 24.663 7.338Zm-1.234 16.09A10.5 10.5 0 1 1 8.605 8.555 10.5 10.5 0 0 1 23.43 23.43Z"></path></svg>';
 
 class IconPlusCircleLarge extends HTMLElement {
     constructor () {

package/dist/IconPlusLarge.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--plusLarge"><path d="M27.375 16.875v-1.75h-10.5v-10.5h-1.75v10.5h-10.5v1.75h10.5v10.5h1.75v-10.5h10.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--plusLarge"><path d="M27.375 16.875v-1.75h-10.5v-10.5h-1.75v10.5h-10.5v1.75h10.5v10.5h1.75v-10.5h10.5Z"></path></svg>';
 
 class IconPlusLarge extends HTMLElement {
     constructor () {

package/dist/IconPolicies.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--policies"><path d="M9.75 2.094H2.094V14.78h11.812V6.25A4.156 4.156 0 0 0 9.75 2.094Zm2.756 3.5h-2.1v-2.1a2.826 2.826 0 0 1 2.1 2.1Zm-9.1 7.875V3.406h5.688v3.5h3.5v6.563H3.406ZM8 7.78H5.375V6.47H8V7.78ZM5.375 9.094h5.25v1.312h-5.25V9.094Z"></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--policies"><path d="M9.75 2.094H2.094V14.78h11.812V6.25A4.156 4.156 0 0 0 9.75 2.094Zm2.756 3.5h-2.1v-2.1a2.826 2.826 0 0 1 2.1 2.1Zm-9.1 7.875V3.406h5.688v3.5h3.5v6.563H3.406ZM8 7.78H5.375V6.47H8V7.78ZM5.375 9.094h5.25v1.312h-5.25V9.094Z"></path></svg>';
 
 class IconPolicies extends HTMLElement {
     constructor () {

package/dist/IconPoliciesLarge.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--policiesLarge"><path d="M18.625 3.75h-14v25.375h22.75V12.5a8.749 8.749 0 0 0-8.75-8.75Zm6.773 7h-5.023V5.728a7.044 7.044 0 0 1 5.023 5.022Zm.227 16.625H6.375V5.5h12.25v7h7v14.875Zm-10.5-14H10.75v-1.75h4.375v1.75Zm-4.375 7h7v1.75h-7v-1.75Zm0-4.375h10.5v1.75h-10.5V16Z"></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--policiesLarge"><path d="M18.625 3.75h-14v25.375h22.75V12.5a8.749 8.749 0 0 0-8.75-8.75Zm6.773 7h-5.023V5.728a7.044 7.044 0 0 1 5.023 5.022Zm.227 16.625H6.375V5.5h12.25v7h7v14.875Zm-10.5-14H10.75v-1.75h4.375v1.75Zm-4.375 7h7v1.75h-7v-1.75Zm0-4.375h10.5v1.75h-10.5V16Z"></path></svg>';
 
 class IconPoliciesLarge extends HTMLElement {
     constructor () {

package/dist/IconPound.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--pound"><path d="M12.585 11.885c-.315 1.277-1.33 1.803-2.695 1.803H3.625v-1.47h1.12v-3.5h-1.12V7.353h1.12V5.83c0-2.327 1.295-3.727 3.692-3.727A3.911 3.911 0 0 1 11.5 3.328l-1.05 1.067a2.625 2.625 0 0 0-2.012-.822c-1.278 0-2.048.647-2.048 2.187v1.593h3.587v1.365H6.39v3.5h3.5a1.18 1.18 0 0 0 1.277-.823l1.418.49Z"></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--pound"><path d="M12.585 11.885c-.315 1.277-1.33 1.803-2.695 1.803H3.625v-1.47h1.12v-3.5h-1.12V7.353h1.12V5.83c0-2.327 1.295-3.727 3.692-3.727A3.911 3.911 0 0 1 11.5 3.328l-1.05 1.067a2.625 2.625 0 0 0-2.012-.822c-1.278 0-2.048.647-2.048 2.187v1.593h3.587v1.365H6.39v3.5h3.5a1.18 1.18 0 0 0 1.277-.823l1.418.49Z"></path></svg>';
 
 class IconPound extends HTMLElement {
     constructor () {

package/dist/IconPoundLarge.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--poundLarge"><path d="m19.29 19.281 1.523.517c-.333 1.338-1.4 1.89-2.827 1.89h-6.545v-1.54h1.138v-3.675H11.44v-1.435h1.138v-1.602c0-2.441 1.365-3.911 3.876-3.911a4.121 4.121 0 0 1 3.185 1.286l-1.102 1.12a2.737 2.737 0 0 0-2.083-.875c-1.339 0-2.144.683-2.144 2.302v1.68h3.763v1.434H14.31v3.675h3.631a1.251 1.251 0 0 0 1.348-.866ZM28.25 16a12.25 12.25 0 1 1-24.499 0 12.25 12.25 0 0 1 24.499 0Zm-1.75 0a10.5 10.5 0 1 0-21 0 10.5 10.5 0 0 0 21 0Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--poundLarge"><path d="m19.29 19.281 1.523.517c-.333 1.338-1.4 1.89-2.827 1.89h-6.545v-1.54h1.138v-3.675H11.44v-1.435h1.138v-1.602c0-2.441 1.365-3.911 3.876-3.911a4.121 4.121 0 0 1 3.185 1.286l-1.102 1.12a2.737 2.737 0 0 0-2.083-.875c-1.339 0-2.144.683-2.144 2.302v1.68h3.763v1.434H14.31v3.675h3.631a1.251 1.251 0 0 0 1.348-.866ZM28.25 16a12.25 12.25 0 1 1-24.499 0 12.25 12.25 0 0 1 24.499 0Zm-1.75 0a10.5 10.5 0 1 0-21 0 10.5 10.5 0 0 0 21 0Z"></path></svg>';
 
 class IconPoundLarge extends HTMLElement {
     constructor () {

package/dist/IconPrepare.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--prepare"><g clip-path="url(#prefix__clip0_6395_3745)"><path d="M13.574 12.813c.219-.342.341-.744.341-1.182 0-.262-.052-.56-.149-.875a1.414 1.414 0 0 0-.726-.857 1.476 1.476 0 0 0-.542-.149.634.634 0 0 1 .437-.525l-.402-1.251c-.49.157-1.33.726-1.357 1.793a1.593 1.593 0 0 0-.288-.008 4.788 4.788 0 0 0-.15-.587 2.412 2.412 0 0 0-1.26-1.39c.263-.158.517-.298.78-.482.42-.254.778-.814.56-1.418A161.98 161.98 0 0 0 10.1 4.02c1.391-.718 2.188-1.059 2.888-1.365L13.1 2.6l-.62-1.085-.088.035c-.85.368-1.75.77-3.36 1.61-2.888 1.505-5.067 2.774-6.86 3.999l-.044.035C1.315 7.79.99 8.262 1.053 8.744c.078.586.577.91 1.032.971.105.017.455.079 1.024.079h.061A3.94 3.94 0 0 0 4.23 12.69c.044.044.096.079.14.123H1.21l.35 1.312h12.915l.35-1.313h-1.26.009ZM8.98 4.604l.639 1.627s-.026.018-.035.027C8.77 6.8 8 7.212 7.283 7.536a.12.12 0 0 0-.035-.026l-.56-.464A1.657 1.657 0 0 0 5.2 6.722a79.426 79.426 0 0 1 3.78-2.117ZM3.476 8.534c-.472.026-.813 0-.997-.018a4.88 4.88 0 0 1 .376-.306c.473-.324.98-.648 1.514-.98a3.895 3.895 0 0 0-.893 1.304Zm2.87 3.272-.052.709a2.652 2.652 0 0 1-1.111-.718 2.597 2.597 0 0 1-.71-1.916c0-.07.027-.131.036-.201.07-.525.306-1.024.674-1.409.078-.079.148-.166.227-.236a.312.312 0 0 1 .201-.07c.088 0 .175.035.245.087l.027.018.525.429c.218.201.48.341.76.428.01 0 .018.01.027.01l.096.025c.228.07.385.28.385.517a.154.154 0 0 1-.07.131 2.838 2.838 0 0 0-1.26 2.179v.017Zm3.16-.831a2.635 2.635 0 0 1-1.9 1.61l.053-.683c.035-.48.28-.91.682-1.172.412-.271.657-.726.657-1.225 0-.184-.027-.359-.08-.525.263.122.482.35.578.639.167.472.167.962.01 1.365v-.009Zm2.178 1.584a.926.926 0 0 1-.928-.919c0-.088.018-.245.088-.473.009-.043.044-.06.061-.07.018 0 .035-.017.061-.017h.044c.289.105.49.149.665.149.131 0 .289-.026.656-.158.053-.017.088 0 .114 0a.1.1 0 0 1 .061.07c.08.236.088.394.088.482a.919.919 0 0 1-.919.918l.009.018Z"></path></g><defs><clipPath id="prefix__clip0_6395_3745"><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--prepare"><g clip-path="url(#prefix__clip0_6395_3745)"><path d="M13.574 12.813c.219-.342.341-.744.341-1.182 0-.262-.052-.56-.149-.875a1.414 1.414 0 0 0-.726-.857 1.476 1.476 0 0 0-.542-.149.634.634 0 0 1 .437-.525l-.402-1.251c-.49.157-1.33.726-1.357 1.793a1.593 1.593 0 0 0-.288-.008 4.788 4.788 0 0 0-.15-.587 2.412 2.412 0 0 0-1.26-1.39c.263-.158.517-.298.78-.482.42-.254.778-.814.56-1.418A161.98 161.98 0 0 0 10.1 4.02c1.391-.718 2.188-1.059 2.888-1.365L13.1 2.6l-.62-1.085-.088.035c-.85.368-1.75.77-3.36 1.61-2.888 1.505-5.067 2.774-6.86 3.999l-.044.035C1.315 7.79.99 8.262 1.053 8.744c.078.586.577.91 1.032.971.105.017.455.079 1.024.079h.061A3.94 3.94 0 0 0 4.23 12.69c.044.044.096.079.14.123H1.21l.35 1.312h12.915l.35-1.313h-1.26.009ZM8.98 4.604l.639 1.627s-.026.018-.035.027C8.77 6.8 8 7.212 7.283 7.536a.12.12 0 0 0-.035-.026l-.56-.464A1.657 1.657 0 0 0 5.2 6.722a79.426 79.426 0 0 1 3.78-2.117ZM3.476 8.534c-.472.026-.813 0-.997-.018a4.88 4.88 0 0 1 .376-.306c.473-.324.98-.648 1.514-.98a3.895 3.895 0 0 0-.893 1.304Zm2.87 3.272-.052.709a2.652 2.652 0 0 1-1.111-.718 2.597 2.597 0 0 1-.71-1.916c0-.07.027-.131.036-.201.07-.525.306-1.024.674-1.409.078-.079.148-.166.227-.236a.312.312 0 0 1 .201-.07c.088 0 .175.035.245.087l.027.018.525.429c.218.201.48.341.76.428.01 0 .018.01.027.01l.096.025c.228.07.385.28.385.517a.154.154 0 0 1-.07.131 2.838 2.838 0 0 0-1.26 2.179v.017Zm3.16-.831a2.635 2.635 0 0 1-1.9 1.61l.053-.683c.035-.48.28-.91.682-1.172.412-.271.657-.726.657-1.225 0-.184-.027-.359-.08-.525.263.122.482.35.578.639.167.472.167.962.01 1.365v-.009Zm2.178 1.584a.926.926 0 0 1-.928-.919c0-.088.018-.245.088-.473.009-.043.044-.06.061-.07.018 0 .035-.017.061-.017h.044c.289.105.49.149.665.149.131 0 .289-.026.656-.158.053-.017.088 0 .114 0a.1.1 0 0 1 .061.07c.08.236.088.394.088.482a.919.919 0 0 1-.919.918l.009.018Z"></path></g><defs><clipPath id="prefix__clip0_6395_3745"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
 
 class IconPrepare extends HTMLElement {
     constructor () {

package/dist/IconPrepareLarge.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--prepareLarge"><path d="M23.263 24.552a3.527 3.527 0 0 0 1.12-2.58c0-.42-.079-.902-.245-1.427a2.192 2.192 0 0 0-1.12-1.313 2.268 2.268 0 0 0-1.243-.218c.21-.499.7-.709.832-.753l-.272-.831-.262-.831a3.233 3.233 0 0 0-1.785 1.487 3.885 3.885 0 0 0-2.214-1.968c.56-.324 1.129-.665 1.715-1.05.656-.403 1.207-1.26.875-2.197-.175-.49-.849-2.213-1.286-3.334 2.45-1.26 3.841-1.872 5.084-2.406L23.587 5.6c-1.34.577-2.897 1.269-5.714 2.747-4.909 2.564-8.619 4.726-11.673 6.808l-.07.053c-1.286.944-1.82 1.688-1.724 2.432.132.91.91 1.409 1.61 1.496.202.044.928.158 2.065.131 0 .07-.017.14-.026.21-.105 1.715.534 3.448 1.733 4.743.105.114.219.219.332.324H4.625l.446 1.75H26.93l.446-1.742h-4.112Zm-14.77-7.07c-1.365.088-2.144-.06-2.162-.06l-.087-.018c.14-.158.402-.42.927-.805 2.818-1.925 6.213-3.92 10.64-6.248.447 1.129 1.042 2.66 1.208 3.071a.589.589 0 0 1-.166.175 27.665 27.665 0 0 1-4.095 2.258c-.044-.035-.096-.053-.131-.088l-.963-.796c-.971-.805-2.362-.822-3.307-.035A6.41 6.41 0 0 0 8.5 17.5l-.008-.017Zm4.97 5.417-.105 1.505a4.788 4.788 0 0 1-2.293-1.374c-.883-.945-1.347-2.205-1.269-3.448a4.704 4.704 0 0 1 .84-2.398c.237-.34.517-.655.84-.918a.782.782 0 0 1 .49-.175c.202 0 .412.07.578.21l.332.272.604.498c.35.315.779.551 1.225.691.009 0 .027.01.035.018h.035l.14.052c.49.15.823.595.823 1.112a.52.52 0 0 1-.228.428 4.577 4.577 0 0 0-2.038 3.518l-.01.009Zm5.145-3.649a2.15 2.15 0 0 0-1.111 1.313c-.158.516-.237.988-.237 1.4 0 .498.105.98.289 1.408a4.697 4.697 0 0 1-2.441 1.129l.105-1.479a2.853 2.853 0 0 1 1.269-2.187 2.252 2.252 0 0 0 1.006-1.881c0-.456-.105-.893-.289-1.278a2.144 2.144 0 0 1 1.627 1.383c.01.035.018.06.027.096-.079.026-.158.052-.228.096h-.017Zm2.213 4.532a1.8 1.8 0 0 1-1.04-.332 1.816 1.816 0 0 1-.78-1.488c0-.236.053-.542.158-.883a.489.489 0 0 1 .228-.271.443.443 0 0 1 .218-.053c.053 0 .105 0 .158.026.42.149.717.219.962.228h.079c.158-.026.42-.026 1.041-.254a.457.457 0 0 1 .377.026.497.497 0 0 1 .236.271c.105.35.166.657.166.902 0 1.006-.814 1.82-1.82 1.82l.018.008Z"></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--prepareLarge"><path d="M23.263 24.552a3.527 3.527 0 0 0 1.12-2.58c0-.42-.079-.902-.245-1.427a2.192 2.192 0 0 0-1.12-1.313 2.268 2.268 0 0 0-1.243-.218c.21-.499.7-.709.832-.753l-.272-.831-.262-.831a3.233 3.233 0 0 0-1.785 1.487 3.885 3.885 0 0 0-2.214-1.968c.56-.324 1.129-.665 1.715-1.05.656-.403 1.207-1.26.875-2.197-.175-.49-.849-2.213-1.286-3.334 2.45-1.26 3.841-1.872 5.084-2.406L23.587 5.6c-1.34.577-2.897 1.269-5.714 2.747-4.909 2.564-8.619 4.726-11.673 6.808l-.07.053c-1.286.944-1.82 1.688-1.724 2.432.132.91.91 1.409 1.61 1.496.202.044.928.158 2.065.131 0 .07-.017.14-.026.21-.105 1.715.534 3.448 1.733 4.743.105.114.219.219.332.324H4.625l.446 1.75H26.93l.446-1.742h-4.112Zm-14.77-7.07c-1.365.088-2.144-.06-2.162-.06l-.087-.018c.14-.158.402-.42.927-.805 2.818-1.925 6.213-3.92 10.64-6.248.447 1.129 1.042 2.66 1.208 3.071a.589.589 0 0 1-.166.175 27.665 27.665 0 0 1-4.095 2.258c-.044-.035-.096-.053-.131-.088l-.963-.796c-.971-.805-2.362-.822-3.307-.035A6.41 6.41 0 0 0 8.5 17.5l-.008-.017Zm4.97 5.417-.105 1.505a4.788 4.788 0 0 1-2.293-1.374c-.883-.945-1.347-2.205-1.269-3.448a4.704 4.704 0 0 1 .84-2.398c.237-.34.517-.655.84-.918a.782.782 0 0 1 .49-.175c.202 0 .412.07.578.21l.332.272.604.498c.35.315.779.551 1.225.691.009 0 .027.01.035.018h.035l.14.052c.49.15.823.595.823 1.112a.52.52 0 0 1-.228.428 4.577 4.577 0 0 0-2.038 3.518l-.01.009Zm5.145-3.649a2.15 2.15 0 0 0-1.111 1.313c-.158.516-.237.988-.237 1.4 0 .498.105.98.289 1.408a4.697 4.697 0 0 1-2.441 1.129l.105-1.479a2.853 2.853 0 0 1 1.269-2.187 2.252 2.252 0 0 0 1.006-1.881c0-.456-.105-.893-.289-1.278a2.144 2.144 0 0 1 1.627 1.383c.01.035.018.06.027.096-.079.026-.158.052-.228.096h-.017Zm2.213 4.532a1.8 1.8 0 0 1-1.04-.332 1.816 1.816 0 0 1-.78-1.488c0-.236.053-.542.158-.883a.489.489 0 0 1 .228-.271.443.443 0 0 1 .218-.053c.053 0 .105 0 .158.026.42.149.717.219.962.228h.079c.158-.026.42-.026 1.041-.254a.457.457 0 0 1 .377.026.497.497 0 0 1 .236.271c.105.35.166.657.166.902 0 1.006-.814 1.82-1.82 1.82l.018.008Z"></path></svg>';
 
 class IconPrepareLarge extends HTMLElement {
     constructor () {

package/dist/IconPreparePause.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--preparePause"><g clip-path="url(#prefix__clip0_6395_3736)"><path d="M10.844 7.886h-.875V9.96h.875V7.886Z"></path><path d="M11.526 7.886h.875V9.96h-.875V7.886Z"></path><path fill-rule="evenodd" d="M2.09 9.89h-.005c-.455-.061-.954-.385-1.033-.971-.061-.482.263-.954 1.059-1.54l.044-.035c1.793-1.225 3.972-2.494 6.86-4a50.45 50.45 0 0 1 3.36-1.609l.087-.035.621 1.085-.113.052-.122.053c-.671.294-1.454.636-2.766 1.312.131.342.306.788.455 1.164a3.96 3.96 0 0 1 .648-.061A3.533 3.533 0 0 1 14.71 8.83c0 1.943-1.61 3.527-3.526 3.527A3.522 3.522 0 0 1 7.667 8.9C5.672 9.776 4.071 9.97 3.1 9.97c-.543 0-.9-.06-1.01-.078Zm8.784-3.25-.022.004A2.2 2.2 0 0 0 9.076 8.2a2.424 2.424 0 0 0-.096.621c0 1.217.997 2.214 2.213 2.214a2.222 2.222 0 0 0 2.214-2.214 2.216 2.216 0 0 0-2.214-2.213c-.114 0-.214.015-.32.031ZM8.98 4.771C6.433 6.12 4.482 7.265 2.855 8.376h-.01a4.88 4.88 0 0 0-.375.306c.577.062 2.65.15 5.512-1.32a3.501 3.501 0 0 1 1.4-1.558L8.98 4.77Z" clip-rule="evenodd"></path><path d="m1.516 14.125-.35-1.313H14.79l-.359 1.313H1.516Z"></path></g><defs><clipPath id="prefix__clip0_6395_3736"><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--preparePause"><g clip-path="url(#prefix__clip0_6395_3736)"><path d="M10.844 7.886h-.875V9.96h.875V7.886Z"></path><path d="M11.526 7.886h.875V9.96h-.875V7.886Z"></path><path fill-rule="evenodd" d="M2.09 9.89h-.005c-.455-.061-.954-.385-1.033-.971-.061-.482.263-.954 1.059-1.54l.044-.035c1.793-1.225 3.972-2.494 6.86-4a50.45 50.45 0 0 1 3.36-1.609l.087-.035.621 1.085-.113.052-.122.053c-.671.294-1.454.636-2.766 1.312.131.342.306.788.455 1.164a3.96 3.96 0 0 1 .648-.061A3.533 3.533 0 0 1 14.71 8.83c0 1.943-1.61 3.527-3.526 3.527A3.522 3.522 0 0 1 7.667 8.9C5.672 9.776 4.071 9.97 3.1 9.97c-.543 0-.9-.06-1.01-.078Zm8.784-3.25-.022.004A2.2 2.2 0 0 0 9.076 8.2a2.424 2.424 0 0 0-.096.621c0 1.217.997 2.214 2.213 2.214a2.222 2.222 0 0 0 2.214-2.214 2.216 2.216 0 0 0-2.214-2.213c-.114 0-.214.015-.32.031ZM8.98 4.771C6.433 6.12 4.482 7.265 2.855 8.376h-.01a4.88 4.88 0 0 0-.375.306c.577.062 2.65.15 5.512-1.32a3.501 3.501 0 0 1 1.4-1.558L8.98 4.77Z" clip-rule="evenodd"></path><path d="m1.516 14.125-.35-1.313H14.79l-.359 1.313H1.516Z"></path></g><defs><clipPath id="prefix__clip0_6395_3736"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
 
 class IconPreparePause extends HTMLElement {
     constructor () {

package/dist/IconPreparePauseLarge.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--preparePauseLarge"><path d="M19.3 15.873h1.75v3.63H19.3v-3.63Z"></path><path d="M22.02 15.873h1.75v3.63h-1.75v-3.63Z"></path><path fill-rule="evenodd" d="M20.235 11.769c.42-.097.849-.149 1.295-.149h.009c3.246 0 5.897 2.651 5.897 5.897 0 3.247-2.65 5.898-5.897 5.898a5.906 5.906 0 0 1-5.898-5.898v-.148C10.2 19.836 6.498 19.233 6 19.136c-.7-.087-1.479-.586-1.61-1.496-.096-.744.437-1.488 1.724-2.433l.07-.052c3.053-2.082 6.763-4.244 11.672-6.808C20.673 6.87 22.23 6.177 23.57 5.6l.875 1.531c-1.243.534-2.634 1.146-5.084 2.406.263.657.604 1.532.875 2.232ZM6.323 17.413c.043.008 3.955.778 9.79-2.223l-.008-.009a5.883 5.883 0 0 1 2.503-2.791c-.245-.621-.552-1.4-.805-2.048-4.428 2.328-7.823 4.323-10.64 6.248-.525.385-.788.648-.928.805l.088.018Zm11.06.113a4.15 4.15 0 0 0 4.147 4.148v-.009a4.156 4.156 0 0 0 4.148-4.148 4.15 4.15 0 0 0-4.148-4.147 4.157 4.157 0 0 0-3.973 3.036 3.945 3.945 0 0 0-.174 1.12Z" clip-rule="evenodd"></path><path d="M27.375 24.544H4.625l.446 1.75H26.93l.446-1.742v-.008Z"></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--preparePauseLarge"><path d="M19.3 15.873h1.75v3.63H19.3v-3.63Z"></path><path d="M22.02 15.873h1.75v3.63h-1.75v-3.63Z"></path><path fill-rule="evenodd" d="M20.235 11.769c.42-.097.849-.149 1.295-.149h.009c3.246 0 5.897 2.651 5.897 5.897 0 3.247-2.65 5.898-5.897 5.898a5.906 5.906 0 0 1-5.898-5.898v-.148C10.2 19.836 6.498 19.233 6 19.136c-.7-.087-1.479-.586-1.61-1.496-.096-.744.437-1.488 1.724-2.433l.07-.052c3.053-2.082 6.763-4.244 11.672-6.808C20.673 6.87 22.23 6.177 23.57 5.6l.875 1.531c-1.243.534-2.634 1.146-5.084 2.406.263.657.604 1.532.875 2.232ZM6.323 17.413c.043.008 3.955.778 9.79-2.223l-.008-.009a5.883 5.883 0 0 1 2.503-2.791c-.245-.621-.552-1.4-.805-2.048-4.428 2.328-7.823 4.323-10.64 6.248-.525.385-.788.648-.928.805l.088.018Zm11.06.113a4.15 4.15 0 0 0 4.147 4.148v-.009a4.156 4.156 0 0 0 4.148-4.148 4.15 4.15 0 0 0-4.148-4.147 4.157 4.157 0 0 0-3.973 3.036 3.945 3.945 0 0 0-.174 1.12Z" clip-rule="evenodd"></path><path d="M27.375 24.544H4.625l.446 1.75H26.93l.446-1.742v-.008Z"></path></svg>';
 
 class IconPreparePauseLarge extends HTMLElement {
     constructor () {

package/dist/IconPresentationChart.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--presentationChart"><path d="M15 2.094H1v1.312h1.094v5.469a1.54 1.54 0 0 0 1.531 1.531h3.719v1.707l-1.969 2.012h1.82L8 13.311l.805.814h1.82l-1.969-2.021v-1.698h3.719a1.54 1.54 0 0 0 1.531-1.531V3.406H15V2.094Zm-2.406 6.781a.219.219 0 0 1-.219.219h-8.75a.219.219 0 0 1-.219-.219V3.406h9.188v5.469Z"></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--presentationChart"><path d="M15 2.094H1v1.312h1.094v5.469a1.54 1.54 0 0 0 1.531 1.531h3.719v1.707l-1.969 2.012h1.82L8 13.311l.805.814h1.82l-1.969-2.021v-1.698h3.719a1.54 1.54 0 0 0 1.531-1.531V3.406H15V2.094Zm-2.406 6.781a.219.219 0 0 1-.219.219h-8.75a.219.219 0 0 1-.219-.219V3.406h9.188v5.469Z"></path></svg>';
 
 class IconPresentationChart extends HTMLElement {
     constructor () {

package/dist/IconPresentationChartLarge.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--presentationChartLarge"><path d="M29.125 5.5H2.875v1.75h1.75V19.5a2.625 2.625 0 0 0 2.625 2.625h7.875V24.4l-3.824 3.85h2.468L16 25.992l2.231 2.258h2.459l-3.815-3.867v-2.258h7.875a2.625 2.625 0 0 0 2.625-2.625V7.25h1.75V5.5Zm-3.5 14a.875.875 0 0 1-.875.875H7.25a.875.875 0 0 1-.875-.875V7.25h19.25V19.5ZM12.5 16.875h-1.75v-3.5h1.75v3.5Zm4.375 0h-1.75v-7h1.75v7Zm4.375 0H19.5v-5.25h1.75v5.25Z"></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--presentationChartLarge"><path d="M29.125 5.5H2.875v1.75h1.75V19.5a2.625 2.625 0 0 0 2.625 2.625h7.875V24.4l-3.824 3.85h2.468L16 25.992l2.231 2.258h2.459l-3.815-3.867v-2.258h7.875a2.625 2.625 0 0 0 2.625-2.625V7.25h1.75V5.5Zm-3.5 14a.875.875 0 0 1-.875.875H7.25a.875.875 0 0 1-.875-.875V7.25h19.25V19.5ZM12.5 16.875h-1.75v-3.5h1.75v3.5Zm4.375 0h-1.75v-7h1.75v7Zm4.375 0H19.5v-5.25h1.75v5.25Z"></path></svg>';
 
 class IconPresentationChartLarge extends HTMLElement {
     constructor () {

package/dist/IconPrinter.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--printer"><path d="M14.781 7.125a1.54 1.54 0 0 0-1.531-1.531h-1.969v-3.5H4.72v3.5H2.75a1.54 1.54 0 0 0-1.531 1.531v5.906h3.5v1.75h6.562v-1.75h3.5V7.125Zm-8.75-3.719H9.97v2.188H6.03V3.406ZM9.97 13.47H6.03v-3.063H9.97v3.063Zm3.5-1.75H11.28v-1.313h.875V9.094H3.844v1.312h.875v1.313H2.53V7.125a.219.219 0 0 1 .219-.219h10.5a.219.219 0 0 1 .219.219v4.594Z"></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--printer"><path d="M14.781 7.125a1.54 1.54 0 0 0-1.531-1.531h-1.969v-3.5H4.72v3.5H2.75a1.54 1.54 0 0 0-1.531 1.531v5.906h3.5v1.75h6.562v-1.75h3.5V7.125Zm-8.75-3.719H9.97v2.188H6.03V3.406ZM9.97 13.47H6.03v-3.063H9.97v3.063Zm3.5-1.75H11.28v-1.313h.875V9.094H3.844v1.312h.875v1.313H2.53V7.125a.219.219 0 0 1 .219-.219h10.5a.219.219 0 0 1 .219.219v4.594Z"></path></svg>';
 
 class IconPrinter extends HTMLElement {
     constructor () {

package/dist/IconPrinterFilled.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--printerFilled"><path d="M11.281 3.844V1.656H4.72v2.188h6.562Z"></path><path d="M13.25 5.156H2.75a1.54 1.54 0 0 0-1.531 1.532v5.906h3.5V9.969h-.875V8.656h8.312V9.97h-.875v2.625h3.5V6.688a1.54 1.54 0 0 0-1.531-1.532Z"></path><path d="M6.031 9.969v4.375H9.96v-.656h.009v-3.72H6.03Z"></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--printerFilled"><path d="M11.281 3.844V1.656H4.72v2.188h6.562Z"></path><path d="M13.25 5.156H2.75a1.54 1.54 0 0 0-1.531 1.532v5.906h3.5V9.969h-.875V8.656h8.312V9.97h-.875v2.625h3.5V6.688a1.54 1.54 0 0 0-1.531-1.532Z"></path><path d="M6.031 9.969v4.375H9.96v-.656h.009v-3.72H6.03Z"></path></svg>';
 
 class IconPrinterFilled extends HTMLElement {
     constructor () {

package/dist/IconPrinterFilledLarge.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--printerFilledLarge"><path d="M23 9V3.75H9V9h14Z"></path><path d="M21.25 20.41h-10.5v7.84h10.5v-7.84Z"></path><path d="M26.5 10.75h-21a2.625 2.625 0 0 0-2.625 2.625V24.75H9v-4.375H7.25v-1.75h17.5v1.75H23v4.375h6.125V13.375A2.625 2.625 0 0 0 26.5 10.75Zm-5.25 6.125v-1.75h3.5v1.75h-3.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--printerFilledLarge"><path d="M23 9V3.75H9V9h14Z"></path><path d="M21.25 20.41h-10.5v7.84h10.5v-7.84Z"></path><path d="M26.5 10.75h-21a2.625 2.625 0 0 0-2.625 2.625V24.75H9v-4.375H7.25v-1.75h17.5v1.75H23v4.375h6.125V13.375A2.625 2.625 0 0 0 26.5 10.75Zm-5.25 6.125v-1.75h3.5v1.75h-3.5Z"></path></svg>';
 
 class IconPrinterFilledLarge extends HTMLElement {
     constructor () {

package/dist/IconPrinterLarge.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--printerLarge"><path d="M29.125 13.375A2.625 2.625 0 0 0 26.5 10.75H23v-7H9v7H5.5a2.625 2.625 0 0 0-2.625 2.625V24.75H9v3.5h14v-3.5h6.125V13.375ZM10.75 5.5h10.5v5.25h-10.5V5.5Zm10.5 21h-10.5v-6.125h10.5V26.5Zm6.125-3.5H23v-2.625h1.75v-1.75H7.25v1.75H9V23H4.625v-9.625A.875.875 0 0 1 5.5 12.5h21a.875.875 0 0 1 .875.875V23Zm-6.125-7.875h3.5v1.75h-3.5v-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--printerLarge"><path d="M29.125 13.375A2.625 2.625 0 0 0 26.5 10.75H23v-7H9v7H5.5a2.625 2.625 0 0 0-2.625 2.625V24.75H9v3.5h14v-3.5h6.125V13.375ZM10.75 5.5h10.5v5.25h-10.5V5.5Zm10.5 21h-10.5v-6.125h10.5V26.5Zm6.125-3.5H23v-2.625h1.75v-1.75H7.25v1.75H9V23H4.625v-9.625A.875.875 0 0 1 5.5 12.5h21a.875.875 0 0 1 .875.875V23Zm-6.125-7.875h3.5v1.75h-3.5v-1.75Z"></path></svg>';
 
 class IconPrinterLarge extends HTMLElement {
     constructor () {

package/dist/IconRadioSelected.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--radioSelected"><path d="M8 1.219C4.264 1.219 1.219 4.264 1.219 8c0 3.736 3.045 6.781 6.781 6.781 3.736 0 6.781-3.045 6.781-6.781 0-3.736-3.045-6.781-6.781-6.781Zm0 12.25A5.47 5.47 0 0 1 2.531 8 5.47 5.47 0 0 1 8 2.531 5.47 5.47 0 0 1 13.469 8 5.47 5.47 0 0 1 8 13.469ZM10.625 8A2.621 2.621 0 0 1 8 10.625 2.621 2.621 0 0 1 5.375 8 2.621 2.621 0 0 1 8 5.375 2.621 2.621 0 0 1 10.625 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--radioSelected"><path d="M8 1.219C4.264 1.219 1.219 4.264 1.219 8c0 3.736 3.045 6.781 6.781 6.781 3.736 0 6.781-3.045 6.781-6.781 0-3.736-3.045-6.781-6.781-6.781Zm0 12.25A5.47 5.47 0 0 1 2.531 8 5.47 5.47 0 0 1 8 2.531 5.47 5.47 0 0 1 13.469 8 5.47 5.47 0 0 1 8 13.469ZM10.625 8A2.621 2.621 0 0 1 8 10.625 2.621 2.621 0 0 1 5.375 8 2.621 2.621 0 0 1 8 5.375 2.621 2.621 0 0 1 10.625 8Z"></path></svg>';
 
 class IconRadioSelected extends HTMLElement {
     constructor () {

package/dist/IconRadioSelectedLarge.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--radioSelectedLarge"><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.207 5.5 16 5.5 26.5 10.207 26.5 16 21.793 26.5 16 26.5ZM21.25 16A5.254 5.254 0 0 1 16 21.25 5.254 5.254 0 0 1 10.75 16 5.254 5.254 0 0 1 16 10.75 5.254 5.254 0 0 1 21.25 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--radioSelectedLarge"><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.207 5.5 16 5.5 26.5 10.207 26.5 16 21.793 26.5 16 26.5ZM21.25 16A5.254 5.254 0 0 1 16 21.25 5.254 5.254 0 0 1 10.75 16 5.254 5.254 0 0 1 16 10.75 5.254 5.254 0 0 1 21.25 16Z"></path></svg>';
 
 class IconRadioSelectedLarge extends HTMLElement {
     constructor () {

package/dist/IconRadioUnselected.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--radioUnselected"><path d="M8 1.219C4.264 1.219 1.219 4.264 1.219 8c0 3.736 3.045 6.781 6.781 6.781 3.736 0 6.781-3.045 6.781-6.781 0-3.736-3.045-6.781-6.781-6.781Zm0 12.25A5.47 5.47 0 0 1 2.531 8 5.47 5.47 0 0 1 8 2.531 5.47 5.47 0 0 1 13.469 8 5.47 5.47 0 0 1 8 13.469Z"></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--radioUnselected"><path d="M8 1.219C4.264 1.219 1.219 4.264 1.219 8c0 3.736 3.045 6.781 6.781 6.781 3.736 0 6.781-3.045 6.781-6.781 0-3.736-3.045-6.781-6.781-6.781Zm0 12.25A5.47 5.47 0 0 1 2.531 8 5.47 5.47 0 0 1 8 2.531 5.47 5.47 0 0 1 13.469 8 5.47 5.47 0 0 1 8 13.469Z"></path></svg>';
 
 class IconRadioUnselected extends HTMLElement {
     constructor () {

package/dist/IconRadioUnselectedLarge.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--radioUnselectedLarge"><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.207 5.5 16 5.5 26.5 10.207 26.5 16 21.793 26.5 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--radioUnselectedLarge"><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.207 5.5 16 5.5 26.5 10.207 26.5 16 21.793 26.5 16 26.5Z"></path></svg>';
 
 class IconRadioUnselectedLarge extends HTMLElement {
     constructor () {

package/dist/IconReceipt.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--receipt"><path d="M11.1 2.57a.23.23 0 0 1-.2 0L8 1.26 5.1 2.57a.23.23 0 0 1-.2 0L1.25.92v14.16l3.65-1.65a.23.23 0 0 1 .2 0L8 14.74l2.9-1.31a.23.23 0 0 1 .2 0l3.65 1.65V.92L11.1 2.57Zm2.15 10.19-1.53-.69a1.721 1.721 0 0 0-1.44 0L8 13.1l-2.28-1a1.701 1.701 0 0 0-1.44 0l-1.53.69V3.24l1.53.69a1.72 1.72 0 0 0 1.44 0L8 2.9l2.28 1a1.7 1.7 0 0 0 1.44 0l1.53-.69v9.55Z"></path><path d="M11 5.75H5v1.5h6v-1.5Z"></path><path d="M10 8.75H6v1.5h4v-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--receipt"><path d="M11.1 2.57a.23.23 0 0 1-.2 0L8 1.26 5.1 2.57a.23.23 0 0 1-.2 0L1.25.92v14.16l3.65-1.65a.23.23 0 0 1 .2 0L8 14.74l2.9-1.31a.23.23 0 0 1 .2 0l3.65 1.65V.92L11.1 2.57Zm2.15 10.19-1.53-.69a1.721 1.721 0 0 0-1.44 0L8 13.1l-2.28-1a1.701 1.701 0 0 0-1.44 0l-1.53.69V3.24l1.53.69a1.72 1.72 0 0 0 1.44 0L8 2.9l2.28 1a1.7 1.7 0 0 0 1.44 0l1.53-.69v9.55Z"></path><path d="M11 5.75H5v1.5h6v-1.5Z"></path><path d="M10 8.75H6v1.5h4v-1.5Z"></path></svg>';
 
 class IconReceipt extends HTMLElement {
     constructor () {