@justeattakeaway/pie-icons-webc 0.3.0 → 0.4.0

package/icons/IconLocationPinLarge.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 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--locationPinLarge"><path d="M24.75 26.5c0 2.406-4.533 3.5-8.75 3.5-4.218 0-8.75-1.094-8.75-3.5 0-1.313 1.339-2.214 3.15-2.765l1.426 1.435C9.875 25.625 9 26.237 9 26.5c0 .446 2.406 1.75 7 1.75 4.594 0 7-1.304 7-1.75 0-.262-.875-.875-2.826-1.33l1.426-1.435c1.811.551 3.15 1.453 3.15 2.765ZM8.746 19.605a10.255 10.255 0 1 1 14.508 0L16 26.859l-7.254-7.254Zm-1.251-7.254a8.478 8.478 0 0 0 2.485 6.02l6.02 6.02 6.02-6.02a8.513 8.513 0 1 0-14.525-6.02Zm4.13.149a4.376 4.376 0 1 1 8.751 0 4.376 4.376 0 0 1-8.751 0Zm1.75 0a2.624 2.624 0 1 0 5.248 0 2.624 2.624 0 0 0-5.248 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--locationPinLarge"><path d="M24.75 26.5c0 2.406-4.533 3.5-8.75 3.5-4.218 0-8.75-1.094-8.75-3.5 0-1.313 1.339-2.214 3.15-2.765l1.426 1.435C9.875 25.625 9 26.237 9 26.5c0 .446 2.406 1.75 7 1.75 4.594 0 7-1.304 7-1.75 0-.262-.875-.875-2.826-1.33l1.426-1.435c1.811.551 3.15 1.453 3.15 2.765ZM8.746 19.605a10.255 10.255 0 1 1 14.508 0L16 26.859l-7.254-7.254Zm-1.251-7.254a8.478 8.478 0 0 0 2.485 6.02l6.02 6.02 6.02-6.02a8.513 8.513 0 1 0-14.525-6.02Zm4.13.149a4.376 4.376 0 1 1 8.751 0 4.376 4.376 0 0 1-8.751 0Zm1.75 0a2.624 2.624 0 1 0 5.248 0 2.624 2.624 0 0 0-5.248 0Z"></path></svg>';
 
 export class IconLocationPinLarge extends HTMLElement {
     constructor () {

package/icons/IconLocationPinRestaurant.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 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--locationPinRestaurant"><g clip-path="url(#prefix__clip0_3_53)"><path d="m8 12.436 3.29-3.325a4.734 4.734 0 0 0 0-6.624 4.602 4.602 0 0 0-6.58 0 4.734 4.734 0 0 0 0 6.624L8 12.436Zm-2.354-9.03a3.299 3.299 0 0 1 4.708 0 3.404 3.404 0 0 1 0 4.778L8 10.564l-2.354-2.38a3.404 3.404 0 0 1 0-4.778ZM4.5 13.47h7v1.312h-7V13.47Z"></path></g><defs><clipPath id="prefix__clip0_3_53"><rect width="16" height="16"></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--locationPinRestaurant"><g clip-path="url(#prefix__clip0_3_53)"><path d="m8 12.436 3.29-3.325a4.734 4.734 0 0 0 0-6.624 4.602 4.602 0 0 0-6.58 0 4.734 4.734 0 0 0 0 6.624L8 12.436Zm-2.354-9.03a3.299 3.299 0 0 1 4.708 0 3.404 3.404 0 0 1 0 4.778L8 10.564l-2.354-2.38a3.404 3.404 0 0 1 0-4.778ZM4.5 13.47h7v1.312h-7V13.47Z"></path></g><defs><clipPath id="prefix__clip0_3_53"><rect width="16" height="16"></rect></clipPath></defs></svg>';
 
 export class IconLocationPinRestaurant extends HTMLElement {
     constructor () {

package/icons/IconLocationPinRestaurantLarge.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 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--locationPinRestaurantLarge"><path d="M22.038 8.895 20.856 7.74a1.688 1.688 0 0 0-1.18-.49H12.35a1.698 1.698 0 0 0-1.172.481L9.98 8.886A3.159 3.159 0 0 0 9 11.153a3.106 3.106 0 0 0 1.794 2.808v4.664a.875.875 0 0 0 .831.875h8.75a.875.875 0 0 0 .875-.875v-4.664a3.107 3.107 0 0 0 .831-5.066h-.043Zm-5.163 8.899V16h-1.75v1.794H12.5V14.25a3.096 3.096 0 0 0 1.601-.63 3.133 3.133 0 0 0 3.894 0c.46.357 1.012.579 1.593.639v3.587l-2.713-.052Zm3.36-5.294a1.408 1.408 0 0 1-1.522-.648H17.18a1.364 1.364 0 0 1-2.362 0h-1.531a1.383 1.383 0 0 1-1.514.648 1.339 1.339 0 0 1-1.024-1.348 1.4 1.4 0 0 1 .438-1.006L12.35 9h7.29l1.18 1.155a1.374 1.374 0 0 1 .43.998 1.338 1.338 0 0 1-1.016 1.347Zm3.815-7a11.305 11.305 0 0 0-16.1 0 11.603 11.603 0 0 0 0 16.249L16 29.886l8.05-8.137a11.603 11.603 0 0 0 0-16.301V5.5ZM22.8 20.462 16 27.375l-6.799-6.913a9.835 9.835 0 0 1 0-13.79 9.546 9.546 0 0 1 13.598 0 9.835 9.835 0 0 1 0 13.79Z"></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--locationPinRestaurantLarge"><path d="M22.038 8.895 20.856 7.74a1.688 1.688 0 0 0-1.18-.49H12.35a1.698 1.698 0 0 0-1.172.481L9.98 8.886A3.159 3.159 0 0 0 9 11.153a3.106 3.106 0 0 0 1.794 2.808v4.664a.875.875 0 0 0 .831.875h8.75a.875.875 0 0 0 .875-.875v-4.664a3.107 3.107 0 0 0 .831-5.066h-.043Zm-5.163 8.899V16h-1.75v1.794H12.5V14.25a3.096 3.096 0 0 0 1.601-.63 3.133 3.133 0 0 0 3.894 0c.46.357 1.012.579 1.593.639v3.587l-2.713-.052Zm3.36-5.294a1.408 1.408 0 0 1-1.522-.648H17.18a1.364 1.364 0 0 1-2.362 0h-1.531a1.383 1.383 0 0 1-1.514.648 1.339 1.339 0 0 1-1.024-1.348 1.4 1.4 0 0 1 .438-1.006L12.35 9h7.29l1.18 1.155a1.374 1.374 0 0 1 .43.998 1.338 1.338 0 0 1-1.016 1.347Zm3.815-7a11.305 11.305 0 0 0-16.1 0 11.603 11.603 0 0 0 0 16.249L16 29.886l8.05-8.137a11.603 11.603 0 0 0 0-16.301V5.5ZM22.8 20.462 16 27.375l-6.799-6.913a9.835 9.835 0 0 1 0-13.79 9.546 9.546 0 0 1 13.598 0 9.835 9.835 0 0 1 0 13.79Z"></path></svg>';
 
 export class IconLocationPinRestaurantLarge extends HTMLElement {
     constructor () {

package/icons/IconLocationPinUser.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 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--locationPinUser"><path d="M8 4.08a1.54 1.54 0 1 0 0 3.08 1.54 1.54 0 0 0 0-3.08Z"></path><path d="M11.658 3.187a5.136 5.136 0 0 0-7.315 0 5.25 5.25 0 0 0 0 7.377L8 14.265l3.658-3.701a5.25 5.25 0 0 0 0-7.377Zm-2.46 8.164L8 12.56 5.375 9.934a2.012 2.012 0 0 1 1.47-.613h2.126a2.004 2.004 0 0 1 1.549.718L9.199 11.35Zm2.118-2.257a3.238 3.238 0 0 0-2.345-.998H6.845a3.246 3.246 0 0 0-2.231.875A4.078 4.078 0 0 1 5.19 4.02a3.946 3.946 0 0 1 5.618 0 4.095 4.095 0 0 1 .507 5.075Z"></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--locationPinUser"><path d="M8 4.08a1.54 1.54 0 1 0 0 3.08 1.54 1.54 0 0 0 0-3.08Z"></path><path d="M11.658 3.187a5.136 5.136 0 0 0-7.315 0 5.25 5.25 0 0 0 0 7.377L8 14.265l3.658-3.701a5.25 5.25 0 0 0 0-7.377Zm-2.46 8.164L8 12.56 5.375 9.934a2.012 2.012 0 0 1 1.47-.613h2.126a2.004 2.004 0 0 1 1.549.718L9.199 11.35Zm2.118-2.257a3.238 3.238 0 0 0-2.345-.998H6.845a3.246 3.246 0 0 0-2.231.875A4.078 4.078 0 0 1 5.19 4.02a3.946 3.946 0 0 1 5.618 0 4.095 4.095 0 0 1 .507 5.075Z"></path></svg>';
 
 export class IconLocationPinUser extends HTMLElement {
     constructor () {

package/icons/IconLocationPinUserLarge.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 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--locationPinUserLarge"><path d="M15.799 15.256a4.13 4.13 0 1 0-4.13-4.121 4.122 4.122 0 0 0 4.13 4.121Zm0-6.597a2.476 2.476 0 1 1 0 4.952 2.476 2.476 0 0 1 0-4.952Z"></path><path d="M23.586 6.13a10.65 10.65 0 0 0-15.172 0 10.92 10.92 0 0 0 0 15.321L16 29.125l7.586-7.674a10.92 10.92 0 0 0 0-15.321Zm-4.655 17.684-2.056 2.117-.875.875-2.765-2.791-3.57-3.64a4.908 4.908 0 0 1 3.833-1.82H18.1a4.847 4.847 0 0 1 4.025 2.065l-3.194 3.194Zm4.288-4.463a6.554 6.554 0 0 0-5.119-2.476h-4.603a6.564 6.564 0 0 0-4.9 2.179 9.275 9.275 0 0 1 .99-11.804 9.004 9.004 0 0 1 12.827 0 9.275 9.275 0 0 1 .805 12.101Z"></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--locationPinUserLarge"><path d="M15.799 15.256a4.13 4.13 0 1 0-4.13-4.121 4.122 4.122 0 0 0 4.13 4.121Zm0-6.597a2.476 2.476 0 1 1 0 4.952 2.476 2.476 0 0 1 0-4.952Z"></path><path d="M23.586 6.13a10.65 10.65 0 0 0-15.172 0 10.92 10.92 0 0 0 0 15.321L16 29.125l7.586-7.674a10.92 10.92 0 0 0 0-15.321Zm-4.655 17.684-2.056 2.117-.875.875-2.765-2.791-3.57-3.64a4.908 4.908 0 0 1 3.833-1.82H18.1a4.847 4.847 0 0 1 4.025 2.065l-3.194 3.194Zm4.288-4.463a6.554 6.554 0 0 0-5.119-2.476h-4.603a6.564 6.564 0 0 0-4.9 2.179 9.275 9.275 0 0 1 .99-11.804 9.004 9.004 0 0 1 12.827 0 9.275 9.275 0 0 1 .805 12.101Z"></path></svg>';
 
 export class IconLocationPinUserLarge extends HTMLElement {
     constructor () {

package/icons/IconLocationRestaurant.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 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--locationRestaurant"><path d="M12.727 7.834A3.22 3.22 0 0 0 8.194 12.4l2.266 2.302 2.267-2.302a3.246 3.246 0 0 0 0-4.567Zm-.928 3.649L10.46 12.83l-1.338-1.347a1.943 1.943 0 0 1 0-2.722 1.881 1.881 0 0 1 2.677 0 1.943 1.943 0 0 1 0 2.722ZM4.694 5.61a2.284 2.284 0 0 0 2.783 0 2.336 2.336 0 0 0 1.916.42 2.275 2.275 0 0 0 1.067-3.84l-.875-.832A1.251 1.251 0 0 0 8.71 1H3.46a1.234 1.234 0 0 0-.875.35l-.875.875a2.257 2.257 0 0 0 .167 3.43v4.751a.665.665 0 0 0 .656.657h3.552V9.75H3.242V6.075a2.24 2.24 0 0 0 1.452-.464ZM2.673 3.126l.787-.813h5.198l.875.875a.989.989 0 0 1 .297.708.927.927 0 0 1-.7.875.971.971 0 0 1-1.085-.49H6.908a.989.989 0 0 1-1.645 0H4.125a.945.945 0 0 1-1.05.447.919.919 0 0 1-.63-1.27c.053-.125.13-.237.228-.332Z"></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--locationRestaurant"><path d="M12.727 7.834A3.22 3.22 0 0 0 8.194 12.4l2.266 2.302 2.267-2.302a3.246 3.246 0 0 0 0-4.567Zm-.928 3.649L10.46 12.83l-1.338-1.347a1.943 1.943 0 0 1 0-2.722 1.881 1.881 0 0 1 2.677 0 1.943 1.943 0 0 1 0 2.722ZM4.694 5.61a2.284 2.284 0 0 0 2.783 0 2.336 2.336 0 0 0 1.916.42 2.275 2.275 0 0 0 1.067-3.84l-.875-.832A1.251 1.251 0 0 0 8.71 1H3.46a1.234 1.234 0 0 0-.875.35l-.875.875a2.257 2.257 0 0 0 .167 3.43v4.751a.665.665 0 0 0 .656.657h3.552V9.75H3.242V6.075a2.24 2.24 0 0 0 1.452-.464ZM2.673 3.126l.787-.813h5.198l.875.875a.989.989 0 0 1 .297.708.927.927 0 0 1-.7.875.971.971 0 0 1-1.085-.49H6.908a.989.989 0 0 1-1.645 0H4.125a.945.945 0 0 1-1.05.447.919.919 0 0 1-.63-1.27c.053-.125.13-.237.228-.332Z"></path></svg>';
 
 export class IconLocationRestaurant extends HTMLElement {
     constructor () {

package/icons/IconLocationRestaurantLarge.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 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--locationRestaurantLarge"><path d="m16 14.618 3.596-3.632a5.171 5.171 0 0 0 0-7.236 5.05 5.05 0 0 0-7.192 0 5.171 5.171 0 0 0 0 7.236L16 14.618Zm-2.345-9.625a3.3 3.3 0 0 1 4.69 0 3.404 3.404 0 0 1 0 4.777L16 12.133l-2.345-2.38a3.404 3.404 0 0 1 0-4.778v.018Zm13.3 10.132a3.982 3.982 0 0 0-1.453-3.036l-1.933-1.654a2.46 2.46 0 0 0-.875-.455l-1.112 1.645h.464a.542.542 0 0 1 .376.14l1.943 1.68a2.248 2.248 0 0 1 .875 1.75 2.468 2.468 0 0 1-2.1 2.293 3.028 3.028 0 0 1-3.168-1.173h-1.505A2.904 2.904 0 0 1 16 17.523a2.905 2.905 0 0 1-2.468-1.243h-1.47a3.028 3.028 0 0 1-3.167 1.173 2.467 2.467 0 0 1-2.1-2.328 2.266 2.266 0 0 1 .875-1.75l1.969-1.68a.603.603 0 0 1 .358-.07h.875L9.77 9.875a2.406 2.406 0 0 0-1.278.534l-1.977 1.706a3.998 3.998 0 0 0-1.47 3.01 4.051 4.051 0 0 0 2.205 3.5v10.5h17.5V18.686a4.069 4.069 0 0 0 2.205-3.56Zm-11.83 12.25V24.75a.875.875 0 1 1 1.75 0v2.625h-1.75Zm3.5 0V24.75a2.625 2.625 0 1 0-5.25 0v2.625H9V19.23a4.9 4.9 0 0 0 3.797-1.146 4.9 4.9 0 0 0 6.405 0A4.9 4.9 0 0 0 23 19.229v8.146h-4.375Z"></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--locationRestaurantLarge"><path d="m16 14.618 3.596-3.632a5.171 5.171 0 0 0 0-7.236 5.05 5.05 0 0 0-7.192 0 5.171 5.171 0 0 0 0 7.236L16 14.618Zm-2.345-9.625a3.3 3.3 0 0 1 4.69 0 3.404 3.404 0 0 1 0 4.777L16 12.133l-2.345-2.38a3.404 3.404 0 0 1 0-4.778v.018Zm13.3 10.132a3.982 3.982 0 0 0-1.453-3.036l-1.933-1.654a2.46 2.46 0 0 0-.875-.455l-1.112 1.645h.464a.542.542 0 0 1 .376.14l1.943 1.68a2.248 2.248 0 0 1 .875 1.75 2.468 2.468 0 0 1-2.1 2.293 3.028 3.028 0 0 1-3.168-1.173h-1.505A2.904 2.904 0 0 1 16 17.523a2.905 2.905 0 0 1-2.468-1.243h-1.47a3.028 3.028 0 0 1-3.167 1.173 2.467 2.467 0 0 1-2.1-2.328 2.266 2.266 0 0 1 .875-1.75l1.969-1.68a.603.603 0 0 1 .358-.07h.875L9.77 9.875a2.406 2.406 0 0 0-1.278.534l-1.977 1.706a3.998 3.998 0 0 0-1.47 3.01 4.051 4.051 0 0 0 2.205 3.5v10.5h17.5V18.686a4.069 4.069 0 0 0 2.205-3.56Zm-11.83 12.25V24.75a.875.875 0 1 1 1.75 0v2.625h-1.75Zm3.5 0V24.75a2.625 2.625 0 1 0-5.25 0v2.625H9V19.23a4.9 4.9 0 0 0 3.797-1.146 4.9 4.9 0 0 0 6.405 0A4.9 4.9 0 0 0 23 19.229v8.146h-4.375Z"></path></svg>';
 
 export class IconLocationRestaurantLarge extends HTMLElement {
     constructor () {

package/icons/IconLocationTarget.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 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--locationTarget"><path d="M14.624 7.344h-1.636a5.05 5.05 0 0 0-4.332-4.332V1.376H7.344v1.636a5.049 5.049 0 0 0-4.332 4.375H1.376V8.7h1.636a5.049 5.049 0 0 0 4.375 4.331v1.636H8.7v-1.68a5.049 5.049 0 0 0 4.288-4.33h1.636V7.343ZM8 11.719A3.719 3.719 0 1 1 11.719 8 3.728 3.728 0 0 1 8 11.719ZM9.417 8A1.417 1.417 0 1 1 8 6.582 1.409 1.409 0 0 1 9.417 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--locationTarget"><path d="M14.624 7.344h-1.636a5.05 5.05 0 0 0-4.332-4.332V1.376H7.344v1.636a5.049 5.049 0 0 0-4.332 4.375H1.376V8.7h1.636a5.049 5.049 0 0 0 4.375 4.331v1.636H8.7v-1.68a5.049 5.049 0 0 0 4.288-4.33h1.636V7.343ZM8 11.719A3.719 3.719 0 1 1 11.719 8 3.728 3.728 0 0 1 8 11.719ZM9.417 8A1.417 1.417 0 1 1 8 6.582 1.409 1.409 0 0 1 9.417 8Z"></path></svg>';
 
 export class IconLocationTarget extends HTMLElement {
     constructor () {

package/icons/IconLocationTargetLarge.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 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--locationTargetLarge"><path d="M29.125 15.125h-3.5a9.625 9.625 0 0 0-8.75-8.706V2.875h-1.75v3.544a9.625 9.625 0 0 0-8.706 8.706H2.875v1.75h3.544a9.625 9.625 0 0 0 8.706 8.75v3.5h1.75v-3.5a9.625 9.625 0 0 0 8.75-8.75h3.5v-1.75ZM16 23.875a7.875 7.875 0 1 1 0-15.75 7.875 7.875 0 0 1 0 15.75Zm0-12.25a4.375 4.375 0 1 0 0 8.75 4.375 4.375 0 0 0 0-8.75Zm0 7a2.625 2.625 0 1 1 0-5.25 2.625 2.625 0 0 1 0 5.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--locationTargetLarge"><path d="M29.125 15.125h-3.5a9.625 9.625 0 0 0-8.75-8.706V2.875h-1.75v3.544a9.625 9.625 0 0 0-8.706 8.706H2.875v1.75h3.544a9.625 9.625 0 0 0 8.706 8.75v3.5h1.75v-3.5a9.625 9.625 0 0 0 8.75-8.75h3.5v-1.75ZM16 23.875a7.875 7.875 0 1 1 0-15.75 7.875 7.875 0 0 1 0 15.75Zm0-12.25a4.375 4.375 0 1 0 0 8.75 4.375 4.375 0 0 0 0-8.75Zm0 7a2.625 2.625 0 1 1 0-5.25 2.625 2.625 0 0 1 0 5.25Z"></path></svg>';
 
 export class IconLocationTargetLarge extends HTMLElement {
     constructor () {

package/icons/IconLock.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 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--lock"><path d="M7.344 11.5V8.875h1.312V11.5H7.344Z"></path><path fill-rule="evenodd" d="M3.844 5.375v1.094h-1.75v6.221l.245.201A9.362 9.362 0 0 0 8 14.781a9.205 9.205 0 0 0 5.661-1.89l.245-.201V6.469h-1.75V5.375a4.156 4.156 0 1 0-8.312 0Zm7 0v1.094H5.156V5.375a2.844 2.844 0 1 1 5.688 0Zm-7.438 6.676A8.094 8.094 0 0 0 8 13.47a7.945 7.945 0 0 0 4.594-1.418v-4.27H3.406v4.27Z" 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--lock"><path d="M7.344 11.5V8.875h1.312V11.5H7.344Z"></path><path fill-rule="evenodd" d="M3.844 5.375v1.094h-1.75v6.221l.245.201A9.362 9.362 0 0 0 8 14.781a9.205 9.205 0 0 0 5.661-1.89l.245-.201V6.469h-1.75V5.375a4.156 4.156 0 1 0-8.312 0Zm7 0v1.094H5.156V5.375a2.844 2.844 0 1 1 5.688 0Zm-7.438 6.676A8.094 8.094 0 0 0 8 13.47a7.945 7.945 0 0 0 4.594-1.418v-4.27H3.406v4.27Z" clip-rule="evenodd"></path></svg>';
 
 export class IconLock extends HTMLElement {
     constructor () {

package/icons/IconLockLarge.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 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--lockLarge"><path d="M23.875 14.25h-1.75v-3.5a6.125 6.125 0 1 0-12.25 0v3.5h-1.75v-3.5a7.875 7.875 0 0 1 15.75 0v3.5Z"></path><path d="M16 29.125a18.209 18.209 0 0 1-11.043-3.692l-.332-.263V13.375h22.75V25.17l-.332.262A17.92 17.92 0 0 1 16 29.126Zm-9.625-4.804A16.625 16.625 0 0 0 16 27.375a16.267 16.267 0 0 0 9.625-3.054v-9.196H6.375v9.196Z"></path><path d="M16.875 17.75h-1.75V23h1.75v-5.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--lockLarge"><path d="M23.875 14.25h-1.75v-3.5a6.125 6.125 0 1 0-12.25 0v3.5h-1.75v-3.5a7.875 7.875 0 0 1 15.75 0v3.5Z"></path><path d="M16 29.125a18.209 18.209 0 0 1-11.043-3.692l-.332-.263V13.375h22.75V25.17l-.332.262A17.92 17.92 0 0 1 16 29.126Zm-9.625-4.804A16.625 16.625 0 0 0 16 27.375a16.267 16.267 0 0 0 9.625-3.054v-9.196H6.375v9.196Z"></path><path d="M16.875 17.75h-1.75V23h1.75v-5.25Z"></path></svg>';
 
 export class IconLockLarge extends HTMLElement {
     constructor () {

package/icons/IconLogOut.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 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--logOut"><path d="M13.906 8a5.906 5.906 0 1 1-8.531-5.25v1.487a4.594 4.594 0 1 0 5.25 0V2.75A5.915 5.915 0 0 1 13.906 8Zm-5.25-7H7.344v5.25h1.312V1Z"></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--logOut"><path d="M13.906 8a5.906 5.906 0 1 1-8.531-5.25v1.487a4.594 4.594 0 1 0 5.25 0V2.75A5.915 5.915 0 0 1 13.906 8Zm-5.25-7H7.344v5.25h1.312V1Z"></path></svg>';
 
 export class IconLogOut extends HTMLElement {
     constructor () {

package/icons/IconLogOutLarge.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 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--logOutLarge"><path d="M27.375 16.875a11.375 11.375 0 1 1-15.75-10.5v1.934a9.625 9.625 0 1 0 8.75 0V6.375a11.375 11.375 0 0 1 7 10.5Zm-10.5-14h-1.75v10.5h1.75v-10.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--logOutLarge"><path d="M27.375 16.875a11.375 11.375 0 1 1-15.75-10.5v1.934a9.625 9.625 0 1 0 8.75 0V6.375a11.375 11.375 0 0 1 7 10.5Zm-10.5-14h-1.75v10.5h1.75v-10.5Z"></path></svg>';
 
 export class IconLogOutLarge extends HTMLElement {
     constructor () {

package/icons/IconLogoPoints.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 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--points"><path d="M14.125 6.066c0-.84-.639-1.522-1.452-1.618.192-.254.332-.552.393-.875a1.743 1.743 0 0 0-.866-1.838c-1.4-.796-2.642.306-3.071.683-.446.393-.831.752-1.155 1.076A27.011 27.011 0 0 0 6.8 2.409c-.41-.368-1.653-1.47-3.053-.665A1.743 1.743 0 0 0 2.88 3.58c.062.324.202.622.403.884a1.637 1.637 0 0 0-1.391 1.61V8.84h1.11v4.043c0 .892.727 1.627 1.628 1.636l6.72.026a1.629 1.629 0 0 0 1.636-1.627V8.84h1.147V6.075l-.009-.009Zm-1.312 0V7.52H8.62V5.743h3.877c.175 0 .323.148.323.323h-.008Zm-2.8-2.686c.49-.437 1.015-.805 1.54-.507a.463.463 0 0 1 .227.455c-.07.35-.315.507-.359.542-.656.394-1.662.446-2.37.411.28-.271.603-.568.97-.892l-.008-.009Zm-5.627-.507a.824.824 0 0 1 .385-.105c.394 0 .78.288 1.164.63.35.315.674.603.954.875-.718.035-1.715-.018-2.371-.412a.777.777 0 0 1-.36-.533.445.445 0 0 1 .228-.455Zm-1.19 3.193c0-.175.15-.323.324-.323H7.3v1.776H3.188V6.066h.008Zm1.112 6.817V8.84h3v4.375H4.624a.343.343 0 0 1-.324-.332h.009Zm7.367.026a.326.326 0 0 1-.096.227.325.325 0 0 1-.228.097h-2.73V8.84h3.045v4.078l.01-.01Z"></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--points"><path d="M14.125 6.066c0-.84-.639-1.522-1.452-1.618.192-.254.332-.552.393-.875a1.743 1.743 0 0 0-.866-1.838c-1.4-.796-2.642.306-3.071.683-.446.393-.831.752-1.155 1.076A27.011 27.011 0 0 0 6.8 2.409c-.41-.368-1.653-1.47-3.053-.665A1.743 1.743 0 0 0 2.88 3.58c.062.324.202.622.403.884a1.637 1.637 0 0 0-1.391 1.61V8.84h1.11v4.043c0 .892.727 1.627 1.628 1.636l6.72.026a1.629 1.629 0 0 0 1.636-1.627V8.84h1.147V6.075l-.009-.009Zm-1.312 0V7.52H8.62V5.743h3.877c.175 0 .323.148.323.323h-.008Zm-2.8-2.686c.49-.437 1.015-.805 1.54-.507a.463.463 0 0 1 .227.455c-.07.35-.315.507-.359.542-.656.394-1.662.446-2.37.411.28-.271.603-.568.97-.892l-.008-.009Zm-5.627-.507a.824.824 0 0 1 .385-.105c.394 0 .78.288 1.164.63.35.315.674.603.954.875-.718.035-1.715-.018-2.371-.412a.777.777 0 0 1-.36-.533.445.445 0 0 1 .228-.455Zm-1.19 3.193c0-.175.15-.323.324-.323H7.3v1.776H3.188V6.066h.008Zm1.112 6.817V8.84h3v4.375H4.624a.343.343 0 0 1-.324-.332h.009Zm7.367.026a.326.326 0 0 1-.096.227.325.325 0 0 1-.228.097h-2.73V8.84h3.045v4.078l.01-.01Z"></path></svg>';
 
 export class IconLogoPoints extends HTMLElement {
     constructor () {

package/icons/IconLogoPointsLarge.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 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--pointsLarge"><path d="M26.614 12.535a2.627 2.627 0 0 0-2.625-2.625h-.298a3.602 3.602 0 0 0 1.033-1.89c.218-1.155-.35-2.38-1.4-2.975-2.328-1.321-4.428.542-5.154 1.19a45.752 45.752 0 0 0-2.266 2.117 48.599 48.599 0 0 0-2.31-2.152c-.692-.613-2.792-2.476-5.12-1.155-1.05.595-1.627 1.82-1.4 2.975.14.726.508 1.391 1.033 1.89h-.166a2.627 2.627 0 0 0-2.625 2.625v4.646h1.986v7.543a2.63 2.63 0 0 0 2.617 2.625l12.03.043h.01c.7 0 1.356-.27 1.855-.76.498-.5.77-1.156.77-1.856V17.19h2.056v-4.646l-.026-.009ZM19.36 7.504c.919-.814 2.004-1.558 3.089-.945.472.271.612.77.542 1.128-.114.578-.481.98-.787 1.164-1.514.901-3.824.858-5.067.718a49.913 49.913 0 0 1 2.223-2.065ZM9.332 6.559c.28-.158.56-.228.832-.228.805 0 1.583.578 2.3 1.208a51.69 51.69 0 0 1 2.18 2.03c-1.252.14-3.553.183-5.067-.718a1.781 1.781 0 0 1-.787-1.164c-.07-.35.07-.857.542-1.128ZM7.05 12.535c0-.481.393-.875.875-.875h7.087v3.78H7.05v-2.905Zm1.986 12.189V17.18h5.976v8.435L9.91 25.6a.87.87 0 0 1-.866-.875h-.01Zm13.781.043a.866.866 0 0 1-.866.875l-5.18-.017v-8.444h6.055v7.586h-.009Zm2.056-9.336h-8.11v-3.78h7.227c.48 0 .875.394.875.875v2.896l.008.01Z"></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--pointsLarge"><path d="M26.614 12.535a2.627 2.627 0 0 0-2.625-2.625h-.298a3.602 3.602 0 0 0 1.033-1.89c.218-1.155-.35-2.38-1.4-2.975-2.328-1.321-4.428.542-5.154 1.19a45.752 45.752 0 0 0-2.266 2.117 48.599 48.599 0 0 0-2.31-2.152c-.692-.613-2.792-2.476-5.12-1.155-1.05.595-1.627 1.82-1.4 2.975.14.726.508 1.391 1.033 1.89h-.166a2.627 2.627 0 0 0-2.625 2.625v4.646h1.986v7.543a2.63 2.63 0 0 0 2.617 2.625l12.03.043h.01c.7 0 1.356-.27 1.855-.76.498-.5.77-1.156.77-1.856V17.19h2.056v-4.646l-.026-.009ZM19.36 7.504c.919-.814 2.004-1.558 3.089-.945.472.271.612.77.542 1.128-.114.578-.481.98-.787 1.164-1.514.901-3.824.858-5.067.718a49.913 49.913 0 0 1 2.223-2.065ZM9.332 6.559c.28-.158.56-.228.832-.228.805 0 1.583.578 2.3 1.208a51.69 51.69 0 0 1 2.18 2.03c-1.252.14-3.553.183-5.067-.718a1.781 1.781 0 0 1-.787-1.164c-.07-.35.07-.857.542-1.128ZM7.05 12.535c0-.481.393-.875.875-.875h7.087v3.78H7.05v-2.905Zm1.986 12.189V17.18h5.976v8.435L9.91 25.6a.87.87 0 0 1-.866-.875h-.01Zm13.781.043a.866.866 0 0 1-.866.875l-5.18-.017v-8.444h6.055v7.586h-.009Zm2.056-9.336h-8.11v-3.78h7.227c.48 0 .875.394.875.875v2.896l.008.01Z"></path></svg>';
 
 export class IconLogoPointsLarge extends HTMLElement {
     constructor () {

package/icons/IconLogoSkip.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 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--skip"><path fill-rule="evenodd" d="M9.421 6.878c-.439-.542-.721-.928-.655-1.353.08-.529.429-1.063 1.04-1.063.672 0 .846.15 1.222.346a.303.303 0 0 0 .14.036c.129 0 .243-.09.28-.222L12 2.548l-.382-.198-.056-.028-.018-.01A3.245 3.245 0 0 0 10.105 2C8.024 2 6.131 3.655 5.82 5.69c-.218 1.423.603 2.427 1.202 3.16l.053.064c.433.516.737.917.663 1.382-.124.807-.721 1.073-1.22 1.073-.79 0-1.02-.137-1.455-.364-.061-.032-.176-.091-.274-.056a.308.308 0 0 0-.194.211l-.526 2-.068.257S5.035 14 6.233 14c1.774 0 3.307-.755 4.217-2.58.228-.467.363-.977.396-1.5.046-1.333-.884-2.38-1.425-3.042Z" 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--skip"><path fill-rule="evenodd" d="M9.421 6.878c-.439-.542-.721-.928-.655-1.353.08-.529.429-1.063 1.04-1.063.672 0 .846.15 1.222.346a.303.303 0 0 0 .14.036c.129 0 .243-.09.28-.222L12 2.548l-.382-.198-.056-.028-.018-.01A3.245 3.245 0 0 0 10.105 2C8.024 2 6.131 3.655 5.82 5.69c-.218 1.423.603 2.427 1.202 3.16l.053.064c.433.516.737.917.663 1.382-.124.807-.721 1.073-1.22 1.073-.79 0-1.02-.137-1.455-.364-.061-.032-.176-.091-.274-.056a.308.308 0 0 0-.194.211l-.526 2-.068.257S5.035 14 6.233 14c1.774 0 3.307-.755 4.217-2.58.228-.467.363-.977.396-1.5.046-1.333-.884-2.38-1.425-3.042Z" clip-rule="evenodd"></path></svg>';
 
 export class IconLogoSkip extends HTMLElement {
     constructor () {

package/icons/IconLogoSkipCircle.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 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--skipCircle"><path d="M8 1a7 7 0 1 0 7 7 7.01 7.01 0 0 0-7-7Zm0 12.645a5.645 5.645 0 1 1 0-11.29 5.645 5.645 0 0 1 0 11.29Z"></path><path fill-rule="evenodd" d="M8.86 7.368c-.268-.315-.442-.54-.401-.786.05-.307.263-.617.637-.617.412 0 .518.087.75.2a.18.18 0 0 0 .257-.108l.338-1.204-.234-.114-.035-.017-.01-.005a2.082 2.082 0 0 0-.882-.182c-1.276 0-2.436.961-2.627 2.142-.134.827.37 1.41.737 1.836l.032.036c.265.3.452.533.406.803-.076.469-.442.623-.747.623-.484 0-.625-.08-.892-.211-.038-.019-.108-.053-.168-.033a.183.183 0 0 0-.119.123l-.322 1.161-.042.149s.635.34 1.369.34c1.087 0 2.026-.44 2.584-1.5.14-.27.222-.566.243-.87.028-.774-.542-1.382-.873-1.766Z" 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--skipCircle"><path d="M8 1a7 7 0 1 0 7 7 7.01 7.01 0 0 0-7-7Zm0 12.645a5.645 5.645 0 1 1 0-11.29 5.645 5.645 0 0 1 0 11.29Z"></path><path fill-rule="evenodd" d="M8.86 7.368c-.268-.315-.442-.54-.401-.786.05-.307.263-.617.637-.617.412 0 .518.087.75.2a.18.18 0 0 0 .257-.108l.338-1.204-.234-.114-.035-.017-.01-.005a2.082 2.082 0 0 0-.882-.182c-1.276 0-2.436.961-2.627 2.142-.134.827.37 1.41.737 1.836l.032.036c.265.3.452.533.406.803-.076.469-.442.623-.747.623-.484 0-.625-.08-.892-.211-.038-.019-.108-.053-.168-.033a.183.183 0 0 0-.119.123l-.322 1.161-.042.149s.635.34 1.369.34c1.087 0 2.026-.44 2.584-1.5.14-.27.222-.566.243-.87.028-.774-.542-1.382-.873-1.766Z" clip-rule="evenodd"></path></svg>';
 
 export class IconLogoSkipCircle extends HTMLElement {
     constructor () {

package/icons/IconLogoSkipCircleFilled.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 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--skipCircleFilled"><g clip-path="url(#prefix__clip0_4813_3340)"><path fill-rule="evenodd" d="M8 1a7 7 0 1 0 7 7 7.01 7.01 0 0 0-7-7Zm.459 5.582c-.04.247.133.47.402.786l.059.068c.335.386.84.968.814 1.698-.02.304-.103.6-.243.87-.558 1.06-1.497 1.5-2.584 1.5-.734 0-1.369-.34-1.369-.34l.042-.149.322-1.161a.183.183 0 0 1 .119-.123c.06-.02.13.014.168.033l.032.016c.247.122.396.195.86.195.305 0 .671-.154.747-.623.046-.27-.14-.503-.406-.803l-.032-.036-.001-.001c-.367-.426-.87-1.01-.736-1.835.19-1.18 1.351-2.142 2.627-2.142.303-.004.604.058.881.182l.011.005.035.017.234.114-.339 1.205a.18.18 0 0 1-.257.107c-.03-.014-.058-.029-.085-.043-.179-.092-.306-.157-.664-.157-.374 0-.588.31-.637.617Z" clip-rule="evenodd"></path></g><defs><clipPath id="prefix__clip0_4813_3340"><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--skipCircleFilled"><g clip-path="url(#prefix__clip0_4813_3340)"><path fill-rule="evenodd" d="M8 1a7 7 0 1 0 7 7 7.01 7.01 0 0 0-7-7Zm.459 5.582c-.04.247.133.47.402.786l.059.068c.335.386.84.968.814 1.698-.02.304-.103.6-.243.87-.558 1.06-1.497 1.5-2.584 1.5-.734 0-1.369-.34-1.369-.34l.042-.149.322-1.161a.183.183 0 0 1 .119-.123c.06-.02.13.014.168.033l.032.016c.247.122.396.195.86.195.305 0 .671-.154.747-.623.046-.27-.14-.503-.406-.803l-.032-.036-.001-.001c-.367-.426-.87-1.01-.736-1.835.19-1.18 1.351-2.142 2.627-2.142.303-.004.604.058.881.182l.011.005.035.017.234.114-.339 1.205a.18.18 0 0 1-.257.107c-.03-.014-.058-.029-.085-.043-.179-.092-.306-.157-.664-.157-.374 0-.588.31-.637.617Z" clip-rule="evenodd"></path></g><defs><clipPath id="prefix__clip0_4813_3340"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
 
 export class IconLogoSkipCircleFilled extends HTMLElement {
     constructor () {

package/icons/IconLogoSkipCircleFilledLarge.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 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--skipCircleFilledLarge"><path fill-rule="evenodd" d="M28.5 16.25a12.25 12.25 0 1 1-24.499 0 12.25 12.25 0 0 1 24.499 0Zm-11.841-3.284c-.078.478.257.912.779 1.522l.114.132c.65.748 1.629 1.876 1.577 3.29-.04.589-.2 1.163-.47 1.687-1.08 2.053-2.901 2.903-5.007 2.903-1.423 0-2.652-.657-2.652-.657l.08-.288.626-2.25a.355.355 0 0 1 .23-.238c.116-.04.252.027.325.063l.063.03c.478.237.766.38 1.665.38.592 0 1.301-.3 1.448-1.208.088-.523-.273-.974-.787-1.555l-.063-.07-.001-.003c-.712-.825-1.685-1.954-1.427-3.554C13.53 10.862 15.78 9 18.25 9a4.033 4.033 0 0 1 1.709.352l.02.01.068.032.453.222-.656 2.334a.348.348 0 0 1-.498.209 11.178 11.178 0 0 1-.165-.084c-.346-.178-.593-.305-1.286-.305-.726 0-1.14.601-1.235 1.196Z" 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--skipCircleFilledLarge"><path fill-rule="evenodd" d="M28.5 16.25a12.25 12.25 0 1 1-24.499 0 12.25 12.25 0 0 1 24.499 0Zm-11.841-3.284c-.078.478.257.912.779 1.522l.114.132c.65.748 1.629 1.876 1.577 3.29-.04.589-.2 1.163-.47 1.687-1.08 2.053-2.901 2.903-5.007 2.903-1.423 0-2.652-.657-2.652-.657l.08-.288.626-2.25a.355.355 0 0 1 .23-.238c.116-.04.252.027.325.063l.063.03c.478.237.766.38 1.665.38.592 0 1.301-.3 1.448-1.208.088-.523-.273-.974-.787-1.555l-.063-.07-.001-.003c-.712-.825-1.685-1.954-1.427-3.554C13.53 10.862 15.78 9 18.25 9a4.033 4.033 0 0 1 1.709.352l.02.01.068.032.453.222-.656 2.334a.348.348 0 0 1-.498.209 11.178 11.178 0 0 1-.165-.084c-.346-.178-.593-.305-1.286-.305-.726 0-1.14.601-1.235 1.196Z" clip-rule="evenodd"></path></svg>';
 
 export class IconLogoSkipCircleFilledLarge extends HTMLElement {
     constructor () {

package/icons/IconLogoSkipCircleLarge.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 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--skipCircleLarge"><path d="M28.5 16.25a12.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><path fill-rule="evenodd" d="M17.438 14.488c-.522-.61-.857-1.044-.78-1.522.096-.595.51-1.196 1.236-1.196.798 0 1.004.168 1.451.389a.348.348 0 0 0 .498-.209l.656-2.334-.453-.222-.067-.032-.021-.01A4.033 4.033 0 0 0 18.248 9c-2.47 0-4.719 1.862-5.09 4.15-.258 1.601.717 2.73 1.428 3.556l.063.071c.514.581.875 1.032.787 1.555-.147.909-.856 1.208-1.448 1.208-.938 0-1.21-.155-1.728-.41-.073-.036-.21-.103-.325-.063a.355.355 0 0 0-.23.238l-.625 2.25-.081.288s1.23.657 2.652.657c2.106 0 3.926-.85 5.007-2.903.27-.524.43-1.098.47-1.687.055-1.5-1.05-2.677-1.692-3.422Z" 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--skipCircleLarge"><path d="M28.5 16.25a12.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><path fill-rule="evenodd" d="M17.438 14.488c-.522-.61-.857-1.044-.78-1.522.096-.595.51-1.196 1.236-1.196.798 0 1.004.168 1.451.389a.348.348 0 0 0 .498-.209l.656-2.334-.453-.222-.067-.032-.021-.01A4.033 4.033 0 0 0 18.248 9c-2.47 0-4.719 1.862-5.09 4.15-.258 1.601.717 2.73 1.428 3.556l.063.071c.514.581.875 1.032.787 1.555-.147.909-.856 1.208-1.448 1.208-.938 0-1.21-.155-1.728-.41-.073-.036-.21-.103-.325-.063a.355.355 0 0 0-.23.238l-.625 2.25-.081.288s1.23.657 2.652.657c2.106 0 3.926-.85 5.007-2.903.27-.524.43-1.098.47-1.687.055-1.5-1.05-2.677-1.692-3.422Z" clip-rule="evenodd"></path></svg>';
 
 export class IconLogoSkipCircleLarge extends HTMLElement {
     constructor () {

package/icons/IconLogoSkipLarge.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 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--skipLarge"><path fill-rule="evenodd" d="M18.535 14.036c-.81-.949-1.332-1.624-1.21-2.367.148-.926.791-1.861 1.921-1.861 1.24 0 1.562.261 2.257.605a.542.542 0 0 0 .775-.325l1.02-3.63-.705-.346-.104-.05-.034-.016a6.274 6.274 0 0 0-2.657-.546c-3.844 0-7.34 2.895-7.917 6.455-.403 2.49 1.114 4.247 2.221 5.531l.097.111c.8.903 1.361 1.605 1.224 2.42-.228 1.412-1.33 1.878-2.252 1.878-1.459 0-1.883-.241-2.688-.638-.113-.056-.325-.16-.506-.097a.551.551 0 0 0-.358.369l-.972 3.5-.125.448s1.912 1.023 4.125 1.023c3.275 0 6.107-1.322 7.788-4.516.421-.816.67-1.71.732-2.625.085-2.332-1.633-4.164-2.632-5.323Z" 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--skipLarge"><path fill-rule="evenodd" d="M18.535 14.036c-.81-.949-1.332-1.624-1.21-2.367.148-.926.791-1.861 1.921-1.861 1.24 0 1.562.261 2.257.605a.542.542 0 0 0 .775-.325l1.02-3.63-.705-.346-.104-.05-.034-.016a6.274 6.274 0 0 0-2.657-.546c-3.844 0-7.34 2.895-7.917 6.455-.403 2.49 1.114 4.247 2.221 5.531l.097.111c.8.903 1.361 1.605 1.224 2.42-.228 1.412-1.33 1.878-2.252 1.878-1.459 0-1.883-.241-2.688-.638-.113-.056-.325-.16-.506-.097a.551.551 0 0 0-.358.369l-.972 3.5-.125.448s1.912 1.023 4.125 1.023c3.275 0 6.107-1.322 7.788-4.516.421-.816.67-1.71.732-2.625.085-2.332-1.633-4.164-2.632-5.323Z" clip-rule="evenodd"></path></svg>';
 
 export class IconLogoSkipLarge extends HTMLElement {
     constructor () {

package/icons/IconMealVoucher.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 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--mealVoucher"><path d="M14.781 6.688v5.25a1.094 1.094 0 0 1-1.094 1.093H2.313a1.093 1.093 0 0 1-1.094-1.093v-5.25a1.094 1.094 0 0 1 1.093-1.094h1.313v1.312H2.531v4.813H13.47V6.906h-1.094V5.594h1.313a1.094 1.094 0 0 1 1.093 1.094Zm-5.11 1.04.517.115c0 .76-.053 1.426-.08 1.907h1.05c.08-1.444.176-4.375.062-6.405 0-.586-.158-.875-.411-1.015a.648.648 0 0 0-.508-.061.761.761 0 0 0-.42.35 7.875 7.875 0 0 0-.761 4.314.779.779 0 0 0 .551.796Zm-3.946-.997v3.02h1.05V6.73c.446-.13.875-.428.875-.927V2.26l-2.853.289v3.255c.035.49.482.787.928.927Z"></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--mealVoucher"><path d="M14.781 6.688v5.25a1.094 1.094 0 0 1-1.094 1.093H2.313a1.093 1.093 0 0 1-1.094-1.093v-5.25a1.094 1.094 0 0 1 1.093-1.094h1.313v1.312H2.531v4.813H13.47V6.906h-1.094V5.594h1.313a1.094 1.094 0 0 1 1.093 1.094Zm-5.11 1.04.517.115c0 .76-.053 1.426-.08 1.907h1.05c.08-1.444.176-4.375.062-6.405 0-.586-.158-.875-.411-1.015a.648.648 0 0 0-.508-.061.761.761 0 0 0-.42.35 7.875 7.875 0 0 0-.761 4.314.779.779 0 0 0 .551.796Zm-3.946-.997v3.02h1.05V6.73c.446-.13.875-.428.875-.927V2.26l-2.853.289v3.255c.035.49.482.787.928.927Z"></path></svg>';
 
 export class IconMealVoucher extends HTMLElement {
     constructor () {

package/icons/IconMealVoucherFilled.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 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--mealVoucherFilled"><path d="M9.12 6.932a7.875 7.875 0 0 1 .761-4.313.761.761 0 0 1 .42-.35.647.647 0 0 1 .508.061c.254.149.367.429.411 1.015.114 2.03 0 4.961-.061 6.405h-1.05c0-.481.052-1.146.079-1.908L9.67 7.73a.779.779 0 0 1-.551-.797Zm-3.395-.2V9.75h1.05V6.731c.446-.131.875-.429.875-.927V2.26l-2.853.289v3.255c.035.49.482.787.928.927Zm7.963-1.138h-1.103c0 1.636-.061 3.281-.114 4.226a1.321 1.321 0 0 1-1.312 1.242h-.534a1.75 1.75 0 0 1-1.75-1.75v-.875H8v.875a1.75 1.75 0 0 1-1.75 1.75 1.837 1.837 0 0 1-1.838-1.837V7.527a2.135 2.135 0 0 1-.874-1.75v-.183H2.313a1.094 1.094 0 0 0-1.094 1.093v5.25a1.094 1.094 0 0 0 1.093 1.094h11.376a1.094 1.094 0 0 0 1.093-1.094v-5.25a1.094 1.094 0 0 0-1.094-1.093Z"></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--mealVoucherFilled"><path d="M9.12 6.932a7.875 7.875 0 0 1 .761-4.313.761.761 0 0 1 .42-.35.647.647 0 0 1 .508.061c.254.149.367.429.411 1.015.114 2.03 0 4.961-.061 6.405h-1.05c0-.481.052-1.146.079-1.908L9.67 7.73a.779.779 0 0 1-.551-.797Zm-3.395-.2V9.75h1.05V6.731c.446-.131.875-.429.875-.927V2.26l-2.853.289v3.255c.035.49.482.787.928.927Zm7.963-1.138h-1.103c0 1.636-.061 3.281-.114 4.226a1.321 1.321 0 0 1-1.312 1.242h-.534a1.75 1.75 0 0 1-1.75-1.75v-.875H8v.875a1.75 1.75 0 0 1-1.75 1.75 1.837 1.837 0 0 1-1.838-1.837V7.527a2.135 2.135 0 0 1-.874-1.75v-.183H2.313a1.094 1.094 0 0 0-1.094 1.093v5.25a1.094 1.094 0 0 0 1.093 1.094h11.376a1.094 1.094 0 0 0 1.093-1.094v-5.25a1.094 1.094 0 0 0-1.094-1.093Z"></path></svg>';
 
 export class IconMealVoucherFilled extends HTMLElement {
     constructor () {

package/icons/IconMealVoucherFilledLarge.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 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--mealVoucherFilledLarge"><path d="M29.125 12.5v11.375a1.75 1.75 0 0 1-1.75 1.75H4.625a1.75 1.75 0 0 1-1.75-1.75V12.5a1.75 1.75 0 0 1 1.75-1.75H7.18v.875c.006.296.047.59.123.875 0 .105.052.21.096.341 0 0 .079.219.105.263a4.839 4.839 0 0 0 1.942 2.371.928.928 0 0 1 .429.752v5.023a.875.875 0 0 0 .875.875h3.5a.875.875 0 0 0 .875-.875v-5.119a.873.873 0 0 1 .332-.674 3.133 3.133 0 0 0 2.39 2.415l.507.097a84.104 84.104 0 0 1-.158 2.257l-.079.954a.875.875 0 0 0 .875.945h3.5a.875.875 0 0 0 .875-.805l.07-.805c.15-1.855.36-5.88.35-9.765h3.588a1.749 1.749 0 0 1 1.75 1.75ZM9.07 12.342l.053.132a3.5 3.5 0 0 0 2.502 2.056v5.845h1.75v-5.88a3.5 3.5 0 0 0 2.354-1.995l.052-.131c0-.07.044-.131.061-.201.056-.182.085-.37.088-.56V5.045l-1.75.875v5.591a1.051 1.051 0 0 1-.053.289.437.437 0 0 1-.385.254.438.438 0 0 1-.437-.438V5.045l-1.75.875v5.705a.447.447 0 0 1-.438.438.437.437 0 0 1-.393-.254 1.05 1.05 0 0 1-.044-.289V5.045l-1.75.875v5.705c0 .19.026.378.079.56-.009.026.043.088.061.157Zm8.032 2.354A16.949 16.949 0 0 1 19.36 4.8a1.33 1.33 0 0 1 1.68-.543c.35.167.761.543.875 1.995.212 4.708.139 9.424-.219 14.123h-1.75c.07-.875.158-2.231.228-3.859-.648-.113-1.698-.297-1.969-.358a1.452 1.452 0 0 1-1.102-1.462Zm1.75-.192 1.392.245c.079-2.564.105-5.443 0-7.805a16.414 16.414 0 0 0-1.4 7.56h.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--mealVoucherFilledLarge"><path d="M29.125 12.5v11.375a1.75 1.75 0 0 1-1.75 1.75H4.625a1.75 1.75 0 0 1-1.75-1.75V12.5a1.75 1.75 0 0 1 1.75-1.75H7.18v.875c.006.296.047.59.123.875 0 .105.052.21.096.341 0 0 .079.219.105.263a4.839 4.839 0 0 0 1.942 2.371.928.928 0 0 1 .429.752v5.023a.875.875 0 0 0 .875.875h3.5a.875.875 0 0 0 .875-.875v-5.119a.873.873 0 0 1 .332-.674 3.133 3.133 0 0 0 2.39 2.415l.507.097a84.104 84.104 0 0 1-.158 2.257l-.079.954a.875.875 0 0 0 .875.945h3.5a.875.875 0 0 0 .875-.805l.07-.805c.15-1.855.36-5.88.35-9.765h3.588a1.749 1.749 0 0 1 1.75 1.75ZM9.07 12.342l.053.132a3.5 3.5 0 0 0 2.502 2.056v5.845h1.75v-5.88a3.5 3.5 0 0 0 2.354-1.995l.052-.131c0-.07.044-.131.061-.201.056-.182.085-.37.088-.56V5.045l-1.75.875v5.591a1.051 1.051 0 0 1-.053.289.437.437 0 0 1-.385.254.438.438 0 0 1-.437-.438V5.045l-1.75.875v5.705a.447.447 0 0 1-.438.438.437.437 0 0 1-.393-.254 1.05 1.05 0 0 1-.044-.289V5.045l-1.75.875v5.705c0 .19.026.378.079.56-.009.026.043.088.061.157Zm8.032 2.354A16.949 16.949 0 0 1 19.36 4.8a1.33 1.33 0 0 1 1.68-.543c.35.167.761.543.875 1.995.212 4.708.139 9.424-.219 14.123h-1.75c.07-.875.158-2.231.228-3.859-.648-.113-1.698-.297-1.969-.358a1.452 1.452 0 0 1-1.102-1.462Zm1.75-.192 1.392.245c.079-2.564.105-5.443 0-7.805a16.414 16.414 0 0 0-1.4 7.56h.008Z"></path></svg>';
 
 export class IconMealVoucherFilledLarge extends HTMLElement {
     constructor () {

package/icons/IconMealVoucherLarge.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 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--mealVoucherLarge"><path d="m9.07 12.342.053.132a3.5 3.5 0 0 0 2.502 2.056v5.845h1.75v-5.88a3.5 3.5 0 0 0 2.354-1.995l.052-.131c0-.07.044-.131.061-.201.056-.182.085-.37.088-.56V5.045l-1.75.875v5.591a1.051 1.051 0 0 1-.053.289.438.438 0 0 1-.385.254.437.437 0 0 1-.437-.438V5.045l-1.75.875v5.705a.446.446 0 0 1-.438.438.438.438 0 0 1-.393-.254 1.05 1.05 0 0 1-.044-.289V5.045l-1.75.875v5.705c0 .19.026.378.079.56-.009.026.044.088.061.157Z"></path><path d="M18.205 16.157c.271.062 1.321.245 1.969.36a107.47 107.47 0 0 1-.228 3.858h1.75c.358-4.699.43-9.415.219-14.123-.114-1.452-.525-1.828-.875-1.995a1.33 1.33 0 0 0-1.68.543 16.949 16.949 0 0 0-2.258 9.896 1.453 1.453 0 0 0 1.103 1.461Zm2.004-9.213c.131 2.362.105 5.25 0 7.805l-1.392-.245a16.415 16.415 0 0 1 1.392-7.56Z"></path><path d="M27.375 10.75h-3.5v1.75h3.5v11.375H4.625V12.5H7.25v-1.75H4.625a1.75 1.75 0 0 0-1.75 1.75v11.375a1.75 1.75 0 0 0 1.75 1.75h22.75a1.75 1.75 0 0 0 1.75-1.75V12.5a1.75 1.75 0 0 0-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--mealVoucherLarge"><path d="m9.07 12.342.053.132a3.5 3.5 0 0 0 2.502 2.056v5.845h1.75v-5.88a3.5 3.5 0 0 0 2.354-1.995l.052-.131c0-.07.044-.131.061-.201.056-.182.085-.37.088-.56V5.045l-1.75.875v5.591a1.051 1.051 0 0 1-.053.289.438.438 0 0 1-.385.254.437.437 0 0 1-.437-.438V5.045l-1.75.875v5.705a.446.446 0 0 1-.438.438.438.438 0 0 1-.393-.254 1.05 1.05 0 0 1-.044-.289V5.045l-1.75.875v5.705c0 .19.026.378.079.56-.009.026.044.088.061.157Z"></path><path d="M18.205 16.157c.271.062 1.321.245 1.969.36a107.47 107.47 0 0 1-.228 3.858h1.75c.358-4.699.43-9.415.219-14.123-.114-1.452-.525-1.828-.875-1.995a1.33 1.33 0 0 0-1.68.543 16.949 16.949 0 0 0-2.258 9.896 1.453 1.453 0 0 0 1.103 1.461Zm2.004-9.213c.131 2.362.105 5.25 0 7.805l-1.392-.245a16.415 16.415 0 0 1 1.392-7.56Z"></path><path d="M27.375 10.75h-3.5v1.75h3.5v11.375H4.625V12.5H7.25v-1.75H4.625a1.75 1.75 0 0 0-1.75 1.75v11.375a1.75 1.75 0 0 0 1.75 1.75h22.75a1.75 1.75 0 0 0 1.75-1.75V12.5a1.75 1.75 0 0 0-1.75-1.75Z"></path></svg>';
 
 export class IconMealVoucherLarge extends HTMLElement {
     constructor () {

package/icons/IconMegaphone.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 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--megaphone"><path d="M14.781 7.125a2.835 2.835 0 0 0-2.625-2.817v-3.09h-1.479l-.175.15a27.627 27.627 0 0 1-1.986 1.46c-.682.456-1.137.692-1.75 1.016H2.75a1.54 1.54 0 0 0-1.531 1.531v3.5a1.531 1.531 0 0 0 1.093 1.461l.762 4.445h2.852l.744-4.375h.123c.586.324 1.163.656 1.75 1.015.586.359 1.356.945 1.986 1.462l.175.148h1.478V9.943a2.835 2.835 0 0 0 2.6-2.818Zm-12.25-1.75a.219.219 0 0 1 .219-.219h2.844v3.938H2.75a.219.219 0 0 1-.219-.219v-3.5Zm2.293 8.094h-.648l-.551-3.063h1.75l-.551 3.063Zm6.02-1.969a23.316 23.316 0 0 0-1.61-1.146A24.508 24.508 0 0 0 6.906 8.97V5.28a24.5 24.5 0 0 0 2.328-1.357c.516-.358 1.094-.743 1.61-1.172v8.75Zm1.312-2.844V5.62a1.523 1.523 0 0 1 0 3.01v.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--megaphone"><path d="M14.781 7.125a2.835 2.835 0 0 0-2.625-2.817v-3.09h-1.479l-.175.15a27.627 27.627 0 0 1-1.986 1.46c-.682.456-1.137.692-1.75 1.016H2.75a1.54 1.54 0 0 0-1.531 1.531v3.5a1.531 1.531 0 0 0 1.093 1.461l.762 4.445h2.852l.744-4.375h.123c.586.324 1.163.656 1.75 1.015.586.359 1.356.945 1.986 1.462l.175.148h1.478V9.943a2.835 2.835 0 0 0 2.6-2.818Zm-12.25-1.75a.219.219 0 0 1 .219-.219h2.844v3.938H2.75a.219.219 0 0 1-.219-.219v-3.5Zm2.293 8.094h-.648l-.551-3.063h1.75l-.551 3.063Zm6.02-1.969a23.316 23.316 0 0 0-1.61-1.146A24.508 24.508 0 0 0 6.906 8.97V5.28a24.5 24.5 0 0 0 2.328-1.357c.516-.358 1.094-.743 1.61-1.172v8.75Zm1.312-2.844V5.62a1.523 1.523 0 0 1 0 3.01v.026Z"></path></svg>';
 
 export class IconMegaphone extends HTMLElement {
     constructor () {

package/icons/IconMegaphoneLarge.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 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--megaphoneLarge"><path d="M28.25 14.25a4.524 4.524 0 0 0-4.375-4.506V2.875h-2.354l-.271.201a46.213 46.213 0 0 1-4.008 2.94A47.948 47.948 0 0 1 12.116 9H5.5a2.625 2.625 0 0 0-2.625 2.625v5.25A2.625 2.625 0 0 0 5.5 19.5h.236l1.4 7.683h4.375l1.243-7.298a48.465 48.465 0 0 1 4.497 2.625c1.384.9 2.72 1.872 3.999 2.914l.245.201h2.38v-6.869a4.524 4.524 0 0 0 4.375-4.506ZM4.625 16.875v-5.25a.875.875 0 0 1 .875-.875h6.125v7H5.5a.875.875 0 0 1-.875-.875Zm3.973 8.558L7.52 19.5h3.544l-1.015 5.933H8.597Zm13.527-1.558a46.084 46.084 0 0 0-3.894-2.835 52.012 52.012 0 0 0-4.856-2.835V10.33a49.054 49.054 0 0 0 4.856-2.809c1.348-.875 2.625-1.837 3.894-2.835v19.189Zm1.75-6.851V11.51a2.756 2.756 0 0 1 0 5.513Z"></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--megaphoneLarge"><path d="M28.25 14.25a4.524 4.524 0 0 0-4.375-4.506V2.875h-2.354l-.271.201a46.213 46.213 0 0 1-4.008 2.94A47.948 47.948 0 0 1 12.116 9H5.5a2.625 2.625 0 0 0-2.625 2.625v5.25A2.625 2.625 0 0 0 5.5 19.5h.236l1.4 7.683h4.375l1.243-7.298a48.465 48.465 0 0 1 4.497 2.625c1.384.9 2.72 1.872 3.999 2.914l.245.201h2.38v-6.869a4.524 4.524 0 0 0 4.375-4.506ZM4.625 16.875v-5.25a.875.875 0 0 1 .875-.875h6.125v7H5.5a.875.875 0 0 1-.875-.875Zm3.973 8.558L7.52 19.5h3.544l-1.015 5.933H8.597Zm13.527-1.558a46.084 46.084 0 0 0-3.894-2.835 52.012 52.012 0 0 0-4.856-2.835V10.33a49.054 49.054 0 0 0 4.856-2.809c1.348-.875 2.625-1.837 3.894-2.835v19.189Zm1.75-6.851V11.51a2.756 2.756 0 0 1 0 5.513Z"></path></svg>';
 
 export class IconMegaphoneLarge extends HTMLElement {
     constructor () {

package/icons/IconMenu.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 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--menu"><path d="M15 4.281H1V2.97h14V4.28Zm0 7.438H1v1.312h14V11.72Zm0-4.375H1v1.312h14V7.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--menu"><path d="M15 4.281H1V2.97h14V4.28Zm0 7.438H1v1.312h14V11.72Zm0-4.375H1v1.312h14V7.344Z"></path></svg>';
 
 export class IconMenu extends HTMLElement {
     constructor () {

package/icons/IconMenuLarge.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 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--menuLarge"><path d="M28.25 9H3.75V7.25h24.5V9Zm0 14H3.75v1.75h24.5V23Zm0-7.875H3.75v1.75h24.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--menuLarge"><path d="M28.25 9H3.75V7.25h24.5V9Zm0 14H3.75v1.75h24.5V23Zm0-7.875H3.75v1.75h24.5v-1.75Z"></path></svg>';
 
 export class IconMenuLarge extends HTMLElement {
     constructor () {

package/icons/IconMicrophone.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 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--microphone"><path d="M8.656 12.996V15H7.344v-2.004a5.915 5.915 0 0 1-5.25-5.871h1.312a4.594 4.594 0 0 0 9.188 0h1.312a5.915 5.915 0 0 1-5.25 5.871ZM4.72 7.125V4.5a3.281 3.281 0 1 1 6.562 0v2.625a3.281 3.281 0 0 1-6.562 0Zm1.312 0a1.969 1.969 0 0 0 3.938 0V4.5a1.969 1.969 0 0 0-3.938 0v2.625Z"></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--microphone"><path d="M8.656 12.996V15H7.344v-2.004a5.915 5.915 0 0 1-5.25-5.871h1.312a4.594 4.594 0 0 0 9.188 0h1.312a5.915 5.915 0 0 1-5.25 5.871ZM4.72 7.125V4.5a3.281 3.281 0 1 1 6.562 0v2.625a3.281 3.281 0 0 1-6.562 0Zm1.312 0a1.969 1.969 0 0 0 3.938 0V4.5a1.969 1.969 0 0 0-3.938 0v2.625Z"></path></svg>';
 
 export class IconMicrophone extends HTMLElement {
     constructor () {

package/icons/IconMicrophoneLarge.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 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--microphoneLarge"><path d="M16.875 24.75v2.625H19.5v1.75h-7v-1.75h2.625V24.75A10.5 10.5 0 0 1 5.5 14.25h1.75a8.75 8.75 0 0 0 17.5 0h1.75a10.5 10.5 0 0 1-9.625 10.5Zm-7-10.5V9a6.125 6.125 0 1 1 12.25 0v5.25a6.125 6.125 0 1 1-12.25 0Zm1.75 0a4.375 4.375 0 1 0 8.75 0V9a4.375 4.375 0 1 0-8.75 0v5.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--microphoneLarge"><path d="M16.875 24.75v2.625H19.5v1.75h-7v-1.75h2.625V24.75A10.5 10.5 0 0 1 5.5 14.25h1.75a8.75 8.75 0 0 0 17.5 0h1.75a10.5 10.5 0 0 1-9.625 10.5Zm-7-10.5V9a6.125 6.125 0 1 1 12.25 0v5.25a6.125 6.125 0 1 1-12.25 0Zm1.75 0a4.375 4.375 0 1 0 8.75 0V9a4.375 4.375 0 1 0-8.75 0v5.25Z"></path></svg>';
 
 export class IconMicrophoneLarge extends HTMLElement {
     constructor () {

package/icons/IconMilk.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 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--milk"><path d="m10.81 5.095-.697-1.046v-.888h.496V1.854H5.67V3.16h.427v.888L5.4 5.095c-.182.27-.27.583-.27.897v6.734c0 1.08.88 1.96 1.96 1.96h2.03c1.08 0 1.96-.88 1.96-1.96V5.992c0-.322-.095-.636-.27-.906v.009ZM8.806 3.16v1.28l.915 1.377a.314.314 0 0 1 .052.174v1.307c-.436.13-.81-.053-1.429-.375-.523-.279-1.159-.584-1.908-.618v-.314c0-.061.018-.122.052-.174l.915-1.377v-1.28h1.403Zm.313 10.219H7.09a.658.658 0 0 1-.653-.654V7.612c.444.026.863.244 1.298.47.514.27 1.09.576 1.76.576.096 0 .183-.009.279-.018v4.095a.658.658 0 0 1-.654.653v-.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 16 16" class="c-pieIcon c-pieIcon--milk"><path d="m10.81 5.095-.697-1.046v-.888h.496V1.854H5.67V3.16h.427v.888L5.4 5.095c-.182.27-.27.583-.27.897v6.734c0 1.08.88 1.96 1.96 1.96h2.03c1.08 0 1.96-.88 1.96-1.96V5.992c0-.322-.095-.636-.27-.906v.009ZM8.806 3.16v1.28l.915 1.377a.314.314 0 0 1 .052.174v1.307c-.436.13-.81-.053-1.429-.375-.523-.279-1.159-.584-1.908-.618v-.314c0-.061.018-.122.052-.174l.915-1.377v-1.28h1.403Zm.313 10.219H7.09a.658.658 0 0 1-.653-.654V7.612c.444.026.863.244 1.298.47.514.27 1.09.576 1.76.576.096 0 .183-.009.279-.018v4.095a.658.658 0 0 1-.654.653v-.008Z"></path></svg>';
 
 export class IconMilk extends HTMLElement {
     constructor () {

package/icons/IconMilkLarge.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 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--milkLarge"><path d="m21.285 9.582-1.55-2.336V4.71h.574V2.96h-8.592v1.743h.549v2.535l-1.551 2.336a2.902 2.902 0 0 0-.488 1.62v15.234a2.622 2.622 0 0 0 2.614 2.614h6.327a2.622 2.622 0 0 0 2.614-2.614V11.194c0-.575-.174-1.142-.488-1.621l-.009.009Zm-3.294-4.88v3.067l1.848 2.78c.13.192.2.418.2.654v1.176l-.026-.06c-1.168.417-2.126-.097-3.582-.968-1.054-.636-2.326-1.377-3.8-1.5l1.378-2.073V4.71h3.982v-.008Zm1.168 22.605h-6.327a.874.874 0 0 1-.871-.871V11.569c1.272-.105 2.44.592 3.564 1.272 1.133.68 2.283 1.368 3.643 1.368.279 0 .566-.043.854-.104v2.518h-3.19a2.622 2.622 0 0 0-2.614 2.614v2.24a2.622 2.622 0 0 0 2.614 2.614h3.19v2.336c0 .48-.392.872-.872.872l.009.008Zm.793-8.941v3.983h-3.12a.874.874 0 0 1-.871-.872v-2.24c0-.479.392-.871.871-.871h3.12Z"></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--milkLarge"><path d="m21.285 9.582-1.55-2.336V4.71h.574V2.96h-8.592v1.743h.549v2.535l-1.551 2.336a2.902 2.902 0 0 0-.488 1.62v15.234a2.622 2.622 0 0 0 2.614 2.614h6.327a2.622 2.622 0 0 0 2.614-2.614V11.194c0-.575-.174-1.142-.488-1.621l-.009.009Zm-3.294-4.88v3.067l1.848 2.78c.13.192.2.418.2.654v1.176l-.026-.06c-1.168.417-2.126-.097-3.582-.968-1.054-.636-2.326-1.377-3.8-1.5l1.378-2.073V4.71h3.982v-.008Zm1.168 22.605h-6.327a.874.874 0 0 1-.871-.871V11.569c1.272-.105 2.44.592 3.564 1.272 1.133.68 2.283 1.368 3.643 1.368.279 0 .566-.043.854-.104v2.518h-3.19a2.622 2.622 0 0 0-2.614 2.614v2.24a2.622 2.622 0 0 0 2.614 2.614h3.19v2.336c0 .48-.392.872-.872.872l.009.008Zm.793-8.941v3.983h-3.12a.874.874 0 0 1-.871-.872v-2.24c0-.479.392-.871.871-.871h3.12Z"></path></svg>';
 
 export class IconMilkLarge extends HTMLElement {
     constructor () {

package/icons/IconMinus.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 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--minus"><path d="M14.125 7.344H1.875v1.312h12.25V7.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--minus"><path d="M14.125 7.344H1.875v1.312h12.25V7.344Z"></path></svg>';
 
 export class IconMinus extends HTMLElement {
     constructor () {

package/icons/IconMinusCircle.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 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--minusCircle"><path d="M4.596 7.344v1.312h6.808V7.344H4.596Z"></path><path d="M12.795 3.205a6.781 6.781 0 1 0 0 9.625 6.792 6.792 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--minusCircle"><path d="M4.596 7.344v1.312h6.808V7.344H4.596Z"></path><path d="M12.795 3.205a6.781 6.781 0 1 0 0 9.625 6.792 6.792 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>';
 
 export class IconMinusCircle extends HTMLElement {
     constructor () {

package/icons/IconMinusCircleFilled.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 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--minusCircleFilled"><path d="M12.795 3.205a6.781 6.781 0 1 0 0 9.625 6.792 6.792 0 0 0 0-9.625Zm-1.391 5.451H4.596V7.344h6.808v1.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--minusCircleFilled"><path d="M12.795 3.205a6.781 6.781 0 1 0 0 9.625 6.792 6.792 0 0 0 0-9.625Zm-1.391 5.451H4.596V7.344h6.808v1.312Z"></path></svg>';
 
 export class IconMinusCircleFilled extends HTMLElement {
     constructor () {

package/icons/IconMinusCircleFilledLarge.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 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--minusCircleFilledLarge"><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.537H9.814v-1.75h12.372v1.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--minusCircleFilledLarge"><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.537H9.814v-1.75h12.372v1.75Z"></path></svg>';
 
 export class IconMinusCircleFilledLarge extends HTMLElement {
     constructor () {

package/icons/IconMinusCircleLarge.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 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--minusCircleLarge"><path d="M9.814 15.125v1.75h12.372v-1.75H9.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--minusCircleLarge"><path d="M9.814 15.125v1.75h12.372v-1.75H9.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>';
 
 export class IconMinusCircleLarge extends HTMLElement {
     constructor () {

package/icons/IconMinusLarge.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 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--minusLarge"><path d="M27.375 16.875v-1.75H4.625v1.75h22.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--minusLarge"><path d="M27.375 16.875v-1.75H4.625v1.75h22.75Z"></path></svg>';
 
 export class IconMinusLarge extends HTMLElement {
     constructor () {

package/icons/IconMolluscs.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 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--molluscs"><g clip-path="url(#prefix__clip0_8387_3631)"><path d="M13.563 4.72a1.548 1.548 0 0 0-.854-.627 1.586 1.586 0 0 0-.523-.784c-.81-.662-1.9-1.159-2.988-1.35-.427-.08-.863.052-1.202.304a1.528 1.528 0 0 0-1.203-.305c-1.089.2-2.178.689-2.988 1.36-.252.208-.435.479-.522.783a1.548 1.548 0 0 0-.854.628 7.082 7.082 0 0 0-1.08 2.787c0 .053-.018.105-.018.149-.044.296-.07.6-.07.932v.305l2.335 1.995v.392a1.966 1.966 0 0 0 1.96 1.96h.793l.375.313c.366.34.827.514 1.29.514.46 0 .923-.174 1.262-.514l.401-.348h.854a1.978 1.978 0 0 0 1.942-1.969v-.418l2.257-1.925v-.305a7.068 7.068 0 0 0-1.168-3.868V4.72Zm-1.717 4.913-1.55 1.325-1.107.94-.81.689c-.218.218-.566.218-.819-.035l-.74-.636-.776-.662-3.485-2.97a5.55 5.55 0 0 1 .114-.802c.026-.131.06-.262.096-.392.034-.122.07-.244.104-.358.096-.26.288-.723.601-1.193.026-.035.07-.07.105-.105l1.62 3.494h1.438L4.546 4.415c.026-.043.043-.087.07-.104.635-.523 1.524-.924 2.395-1.08.087-.018.2.034.235.095l.053.096.017 5.506h1.307L8.605 3.5l.088-.148c.052-.087.165-.14.252-.122.863.157 1.76.558 2.396 1.08.035.027.07.079.087.14L9.372 8.937h1.438l1.611-3.52s.026.017.035.026c.331.497.871 1.498.941 2.849L11.82 9.633h.026Z"></path></g><defs><clipPath id="prefix__clip0_8387_3631"><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--molluscs"><g clip-path="url(#prefix__clip0_8387_3631)"><path d="M13.563 4.72a1.548 1.548 0 0 0-.854-.627 1.586 1.586 0 0 0-.523-.784c-.81-.662-1.9-1.159-2.988-1.35-.427-.08-.863.052-1.202.304a1.528 1.528 0 0 0-1.203-.305c-1.089.2-2.178.689-2.988 1.36-.252.208-.435.479-.522.783a1.548 1.548 0 0 0-.854.628 7.082 7.082 0 0 0-1.08 2.787c0 .053-.018.105-.018.149-.044.296-.07.6-.07.932v.305l2.335 1.995v.392a1.966 1.966 0 0 0 1.96 1.96h.793l.375.313c.366.34.827.514 1.29.514.46 0 .923-.174 1.262-.514l.401-.348h.854a1.978 1.978 0 0 0 1.942-1.969v-.418l2.257-1.925v-.305a7.068 7.068 0 0 0-1.168-3.868V4.72Zm-1.717 4.913-1.55 1.325-1.107.94-.81.689c-.218.218-.566.218-.819-.035l-.74-.636-.776-.662-3.485-2.97a5.55 5.55 0 0 1 .114-.802c.026-.131.06-.262.096-.392.034-.122.07-.244.104-.358.096-.26.288-.723.601-1.193.026-.035.07-.07.105-.105l1.62 3.494h1.438L4.546 4.415c.026-.043.043-.087.07-.104.635-.523 1.524-.924 2.395-1.08.087-.018.2.034.235.095l.053.096.017 5.506h1.307L8.605 3.5l.088-.148c.052-.087.165-.14.252-.122.863.157 1.76.558 2.396 1.08.035.027.07.079.087.14L9.372 8.937h1.438l1.611-3.52s.026.017.035.026c.331.497.871 1.498.941 2.849L11.82 9.633h.026Z"></path></g><defs><clipPath id="prefix__clip0_8387_3631"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
 
 export class IconMolluscs extends HTMLElement {
     constructor () {

package/icons/IconMolluscsLarge.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 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--molluscsLarge"><path d="M26.244 10.863a2.584 2.584 0 0 0-1.63-1.09l-.035-.148a2.67 2.67 0 0 0-.888-1.377c-1.5-1.228-3.521-2.143-5.543-2.51a2.554 2.554 0 0 0-2.24.698 2.611 2.611 0 0 0-2.265-.663 12.91 12.91 0 0 0-4.445 1.743c-.427.27-.836.567-1.228.89a2.542 2.542 0 0 0-.88 1.524v.061a2.614 2.614 0 0 0-1.552 1.072c-1.098 1.63-1.551 3.216-1.568 3.268a12.469 12.469 0 0 0-.567 3.721v.401l3.617 3.085v2.31a2.622 2.622 0 0 0 2.614 2.614h3.163l.863.732a3.15 3.15 0 0 0 2.248.932c.855 0 1.648-.33 2.197-.88l.915-.784h3.154a2.622 2.622 0 0 0 2.615-2.614v-2.31l3.616-3.085v-.4c0-3.426-1.36-5.97-2.17-7.182l.009-.008ZM9.643 24.719a.874.874 0 0 1-.872-.872v-.827l1.987 1.699H9.643Zm13.412-.872c0 .48-.393.872-.872.872h-1.115l1.986-1.69v.819Zm.33-3.39L21.347 22.2l-2.954 2.519-1.455 1.246c-.54.54-1.438.593-2.074-.043l-1.403-1.203-2.955-2.519-2.039-1.742-3.285-2.798c.035-.959.192-1.9.48-2.823 0-.018.409-1.403 1.341-2.79a.835.835 0 0 1 .323-.278l3.294 7.111h1.917l-3.8-8.209.079-.427a.8.8 0 0 1 .27-.488c.331-.27.688-.532 1.054-.758a11.063 11.063 0 0 1 3.835-1.508.855.855 0 0 1 .897.418l.166.288.044 10.684h1.743L16.78 8.187l.192-.313c.183-.305.54-.48.871-.41 1.708.305 3.486 1.107 4.75 2.144a.94.94 0 0 1 .313.47l.166.62-3.852 8.19h1.926l3.416-7.267c.096.06.192.13.253.226a11.269 11.269 0 0 1 1.873 5.822l-3.285 2.797-.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--molluscsLarge"><path d="M26.244 10.863a2.584 2.584 0 0 0-1.63-1.09l-.035-.148a2.67 2.67 0 0 0-.888-1.377c-1.5-1.228-3.521-2.143-5.543-2.51a2.554 2.554 0 0 0-2.24.698 2.611 2.611 0 0 0-2.265-.663 12.91 12.91 0 0 0-4.445 1.743c-.427.27-.836.567-1.228.89a2.542 2.542 0 0 0-.88 1.524v.061a2.614 2.614 0 0 0-1.552 1.072c-1.098 1.63-1.551 3.216-1.568 3.268a12.469 12.469 0 0 0-.567 3.721v.401l3.617 3.085v2.31a2.622 2.622 0 0 0 2.614 2.614h3.163l.863.732a3.15 3.15 0 0 0 2.248.932c.855 0 1.648-.33 2.197-.88l.915-.784h3.154a2.622 2.622 0 0 0 2.615-2.614v-2.31l3.616-3.085v-.4c0-3.426-1.36-5.97-2.17-7.182l.009-.008ZM9.643 24.719a.874.874 0 0 1-.872-.872v-.827l1.987 1.699H9.643Zm13.412-.872c0 .48-.393.872-.872.872h-1.115l1.986-1.69v.819Zm.33-3.39L21.347 22.2l-2.954 2.519-1.455 1.246c-.54.54-1.438.593-2.074-.043l-1.403-1.203-2.955-2.519-2.039-1.742-3.285-2.798c.035-.959.192-1.9.48-2.823 0-.018.409-1.403 1.341-2.79a.835.835 0 0 1 .323-.278l3.294 7.111h1.917l-3.8-8.209.079-.427a.8.8 0 0 1 .27-.488c.331-.27.688-.532 1.054-.758a11.063 11.063 0 0 1 3.835-1.508.855.855 0 0 1 .897.418l.166.288.044 10.684h1.743L16.78 8.187l.192-.313c.183-.305.54-.48.871-.41 1.708.305 3.486 1.107 4.75 2.144a.94.94 0 0 1 .313.47l.166.62-3.852 8.19h1.926l3.416-7.267c.096.06.192.13.253.226a11.269 11.269 0 0 1 1.873 5.822l-3.285 2.797-.017-.009Z"></path></svg>';
 
 export class IconMolluscsLarge extends HTMLElement {
     constructor () {

package/icons/IconMoon.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 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--moon"><path d="M8.219 8a4.174 4.174 0 0 1 3.412-4.078 5.249 5.249 0 0 0-1.444-.927A5.39 5.39 0 0 0 8 2.531 5.469 5.469 0 0 0 8 13.47a5.39 5.39 0 0 0 2.188-.464 5.248 5.248 0 0 0 1.443-.928A4.174 4.174 0 0 1 8.22 8ZM8 12.156a4.155 4.155 0 0 1-3.689-6.18 4.156 4.156 0 0 1 4.433-2.054 5.443 5.443 0 0 0 0 8.155 4.12 4.12 0 0 1-.744.08Z"></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--moon"><path d="M8.219 8a4.174 4.174 0 0 1 3.412-4.078 5.249 5.249 0 0 0-1.444-.927A5.39 5.39 0 0 0 8 2.531 5.469 5.469 0 0 0 8 13.47a5.39 5.39 0 0 0 2.188-.464 5.248 5.248 0 0 0 1.443-.928A4.174 4.174 0 0 1 8.22 8ZM8 12.156a4.155 4.155 0 0 1-3.689-6.18 4.156 4.156 0 0 1 4.433-2.054 5.443 5.443 0 0 0 0 8.155 4.12 4.12 0 0 1-.744.08Z"></path></svg>';
 
 export class IconMoon extends HTMLElement {
     constructor () {