@justeattakeaway/pie-icons-webc 0.3.0 → 0.4.0

package/dist/IconUserShieldLarge.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--userShieldLarge"><path d="M22.816 21.25c-.717-2.328-2.738-3.894-5.031-3.894h-.595a3.72 3.72 0 0 0 1.418-.866 3.691 3.691 0 0 0 0-5.224c-1.444-1.435-3.79-1.443-5.224 0-.7.7-1.085 1.628-1.085 2.617 0 .988.385 1.916 1.085 2.616.402.402.892.691 1.417.866h-.595c-2.292 0-4.313 1.566-5.031 3.894L9 21.836h1.829l.017-.061c.49-1.584 1.838-2.651 3.351-2.651h3.57c1.514 0 2.87 1.067 3.352 2.651l.017.061h1.829l-.175-.577.026-.009Zm-8.19-5.994a1.933 1.933 0 0 1-.569-1.373 1.941 1.941 0 0 1 3.316-1.374 1.949 1.949 0 0 1 0 2.756c-.76.761-2.02.735-2.756 0l.01-.009Z"></path><path d="M25.957 7.933 16 2.77 6.043 7.933a2.617 2.617 0 0 0-1.418 2.327v7.114c0 .087.21 8.872 11.156 11.725l.219.061.219-.061c10.946-2.861 11.156-11.638 11.156-11.734V10.26c0-.98-.543-1.881-1.418-2.327Zm-.332 9.423c0 .306-.227 7.429-9.625 9.993-9.398-2.564-9.616-9.686-9.625-9.984V10.26c0-.332.184-.621.473-.779L16 4.74l9.152 4.742a.872.872 0 0 1 .473.779v7.096Z"></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--userShieldLarge"><path d="M22.816 21.25c-.717-2.328-2.738-3.894-5.031-3.894h-.595a3.72 3.72 0 0 0 1.418-.866 3.691 3.691 0 0 0 0-5.224c-1.444-1.435-3.79-1.443-5.224 0-.7.7-1.085 1.628-1.085 2.617 0 .988.385 1.916 1.085 2.616.402.402.892.691 1.417.866h-.595c-2.292 0-4.313 1.566-5.031 3.894L9 21.836h1.829l.017-.061c.49-1.584 1.838-2.651 3.351-2.651h3.57c1.514 0 2.87 1.067 3.352 2.651l.017.061h1.829l-.175-.577.026-.009Zm-8.19-5.994a1.933 1.933 0 0 1-.569-1.373 1.941 1.941 0 0 1 3.316-1.374 1.949 1.949 0 0 1 0 2.756c-.76.761-2.02.735-2.756 0l.01-.009Z"></path><path d="M25.957 7.933 16 2.77 6.043 7.933a2.617 2.617 0 0 0-1.418 2.327v7.114c0 .087.21 8.872 11.156 11.725l.219.061.219-.061c10.946-2.861 11.156-11.638 11.156-11.734V10.26c0-.98-.543-1.881-1.418-2.327Zm-.332 9.423c0 .306-.227 7.429-9.625 9.993-9.398-2.564-9.616-9.686-9.625-9.984V10.26c0-.332.184-.621.473-.779L16 4.74l9.152 4.742a.872.872 0 0 1 .473.779v7.096Z"></path></svg>';
 
 class IconUserShieldLarge extends HTMLElement {
     constructor () {

package/dist/IconUsers.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--users"><path d="m1.21 11.824.49-1.392a2.87 2.87 0 0 1 2.021-1.75 2.704 2.704 0 0 1-.481-.367 2.406 2.406 0 1 1 3.395 0 1.898 1.898 0 0 1-.324.271A2.905 2.905 0 0 1 8 9.085a2.94 2.94 0 0 1 1.697-.534 2.415 2.415 0 0 1-1.04-1.977 2.406 2.406 0 1 1 4.103 1.75c-.146.14-.308.263-.481.367a2.853 2.853 0 0 1 2.021 1.75l.49 1.391h-1.391l-.341-.953A1.584 1.584 0 0 0 11.5 9.855H9.75a1.584 1.584 0 0 0-1.523 1.015l-.34.954H6.46l.49-1.392c0-.122.105-.236.157-.35a1.654 1.654 0 0 0-.857-.227H4.5a1.584 1.584 0 0 0-1.523 1.015l-.34.954H1.21Zm8.75-5.25a1.094 1.094 0 1 0 .324-.77 1.084 1.084 0 0 0-.315.77H9.96Zm-6.125 0a1.094 1.094 0 1 0 .324-.77 1.085 1.085 0 0 0-.315.77h-.009Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--users"><path d="m1.21 11.824.49-1.392a2.87 2.87 0 0 1 2.021-1.75 2.704 2.704 0 0 1-.481-.367 2.406 2.406 0 1 1 3.395 0 1.898 1.898 0 0 1-.324.271A2.905 2.905 0 0 1 8 9.085a2.94 2.94 0 0 1 1.697-.534 2.415 2.415 0 0 1-1.04-1.977 2.406 2.406 0 1 1 4.103 1.75c-.146.14-.308.263-.481.367a2.853 2.853 0 0 1 2.021 1.75l.49 1.391h-1.391l-.341-.953A1.584 1.584 0 0 0 11.5 9.855H9.75a1.584 1.584 0 0 0-1.523 1.015l-.34.954H6.46l.49-1.392c0-.122.105-.236.157-.35a1.654 1.654 0 0 0-.857-.227H4.5a1.584 1.584 0 0 0-1.523 1.015l-.34.954H1.21Zm8.75-5.25a1.094 1.094 0 1 0 .324-.77 1.084 1.084 0 0 0-.315.77H9.96Zm-6.125 0a1.094 1.094 0 1 0 .324-.77 1.085 1.085 0 0 0-.315.77h-.009Z"></path></svg>';
 
 class IconUsers extends HTMLElement {
     constructor () {

package/dist/IconUsersLarge.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--usersLarge"><path d="M10.461 8.563a3.938 3.938 0 1 1 0 7.875 3.938 3.938 0 0 1 0-7.875Zm0 1.75a2.187 2.187 0 1 0 2.135 2.187 2.17 2.17 0 0 0-2.135-2.188Zm11.113-1.75A3.937 3.937 0 1 1 17.75 12.5a3.902 3.902 0 0 1 3.824-3.938Zm0 1.75a2.187 2.187 0 1 0 2.135 2.187 2.161 2.161 0 0 0-2.135-2.188ZM27.9 20.374a5.25 5.25 0 0 0-4.97-3.036h-3.57A5.767 5.767 0 0 0 16 18.363a5.67 5.67 0 0 0-3.351-1.05H9.105a5.25 5.25 0 0 0-4.979 3.062l-1.251 3.063h1.864l.971-2.415a3.605 3.605 0 0 1 3.395-1.96h3.561a4.21 4.21 0 0 1 2.109.56 4.14 4.14 0 0 0-.385.726l-1.242 3.088h1.846L16 21.023a3.614 3.614 0 0 1 3.395-1.96h3.57a3.614 3.614 0 0 1 3.395 1.96l.971 2.416h1.794L27.9 20.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--usersLarge"><path d="M10.461 8.563a3.938 3.938 0 1 1 0 7.875 3.938 3.938 0 0 1 0-7.875Zm0 1.75a2.187 2.187 0 1 0 2.135 2.187 2.17 2.17 0 0 0-2.135-2.188Zm11.113-1.75A3.937 3.937 0 1 1 17.75 12.5a3.902 3.902 0 0 1 3.824-3.938Zm0 1.75a2.187 2.187 0 1 0 2.135 2.187 2.161 2.161 0 0 0-2.135-2.188ZM27.9 20.374a5.25 5.25 0 0 0-4.97-3.036h-3.57A5.767 5.767 0 0 0 16 18.363a5.67 5.67 0 0 0-3.351-1.05H9.105a5.25 5.25 0 0 0-4.979 3.062l-1.251 3.063h1.864l.971-2.415a3.605 3.605 0 0 1 3.395-1.96h3.561a4.21 4.21 0 0 1 2.109.56 4.14 4.14 0 0 0-.385.726l-1.242 3.088h1.846L16 21.023a3.614 3.614 0 0 1 3.395-1.96h3.57a3.614 3.614 0 0 1 3.395 1.96l.971 2.416h1.794L27.9 20.375Z"></path></svg>';
 
 class IconUsersLarge extends HTMLElement {
     constructor () {

package/dist/IconVegan.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--vegan"><path d="m14.484 1.718-.158-.657-.656.184c-.473.131-4.672 1.348-5.933 3.5C6.25 3.214 3.162 2.418 2.75 2.321l-.656-.157-.14.665c-.079.429-.84 4.296.359 6.212a3.623 3.623 0 0 0 3.053 1.75c.14.009.28.009.42 0l1.339 3.255h1.75l1.409-3.561c.205.038.412.059.621.061a3.938 3.938 0 0 0 3.386-1.96c1.278-2.135.306-6.387.193-6.868ZM3.424 8.34c-.674-1.023-.482-3.228-.289-4.55 1.277.394 3.343 1.217 3.99 2.24.038.07.07.143.096.219a3.806 3.806 0 0 0 .088 1.505c.02.068.043.136.07.201a2.24 2.24 0 0 1-.621.919l-.64-1.645h-1.75l.876 2.196a2.319 2.319 0 0 1-1.82-1.085ZM8 12.244l-.787-2.065c.342-.236.639-.532.875-.875a3.5 3.5 0 0 0 .743.639L8 12.243Zm5.154-4.323A2.625 2.625 0 0 1 10.8 9.225l.787-1.995H9.925l-.543 1.444a2.415 2.415 0 0 1-.804-1.269 2.625 2.625 0 0 1 .297-2.03c.7-1.19 3.063-2.187 4.471-2.625.271 1.426.543 3.973-.166 5.171h-.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--vegan"><path d="m14.484 1.718-.158-.657-.656.184c-.473.131-4.672 1.348-5.933 3.5C6.25 3.214 3.162 2.418 2.75 2.321l-.656-.157-.14.665c-.079.429-.84 4.296.359 6.212a3.623 3.623 0 0 0 3.053 1.75c.14.009.28.009.42 0l1.339 3.255h1.75l1.409-3.561c.205.038.412.059.621.061a3.938 3.938 0 0 0 3.386-1.96c1.278-2.135.306-6.387.193-6.868ZM3.424 8.34c-.674-1.023-.482-3.228-.289-4.55 1.277.394 3.343 1.217 3.99 2.24.038.07.07.143.096.219a3.806 3.806 0 0 0 .088 1.505c.02.068.043.136.07.201a2.24 2.24 0 0 1-.621.919l-.64-1.645h-1.75l.876 2.196a2.319 2.319 0 0 1-1.82-1.085ZM8 12.244l-.787-2.065c.342-.236.639-.532.875-.875a3.5 3.5 0 0 0 .743.639L8 12.243Zm5.154-4.323A2.625 2.625 0 0 1 10.8 9.225l.787-1.995H9.925l-.543 1.444a2.415 2.415 0 0 1-.804-1.269 2.625 2.625 0 0 1 .297-2.03c.7-1.19 3.063-2.187 4.471-2.625.271 1.426.543 3.973-.166 5.171h-.026Z"></path></svg>';
 
 class IconVegan extends HTMLElement {
     constructor () {

package/dist/IconVeganLarge.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--veganLarge"><path d="m27.944 4.004-.21-.875-.875.236c-.359.105-9.109 2.573-11.603 6.764a6.2 6.2 0 0 0-.28.534C12.16 7.372 5.167 5.604 4.853 5.5l-.875-.21-.228.91c-.07.341-1.75 8.365.604 12.11a6.843 6.843 0 0 0 5.783 3.203c.367-.005.733-.04 1.094-.106l2.87 7.15h2.625l3.054-7.613c.485.11.981.17 1.479.175a7.465 7.465 0 0 0 6.405-3.701c2.458-4.2.367-13.038.28-13.414ZM5.876 17.383c-1.435-2.258-.98-7.298-.551-9.914 2.546.752 7.245 2.52 8.689 4.821.105.166.198.338.28.516a7.453 7.453 0 0 0 .14 3.01c.052.175.105.359.166.534a4.708 4.708 0 0 1-1.986 2.695l-1.637-4.139H8.624l1.942 4.83a5.049 5.049 0 0 1-4.69-2.354Zm9.625 8.88-2.196-5.582.263-.14a6.405 6.405 0 0 0 2.126-2.205 7 7 0 0 0 2.039 1.82l.148.07-2.38 6.038Zm10.64-9.738a5.68 5.68 0 0 1-5.722 2.774l1.75-4.375h-2.232l-1.443 3.701a5.25 5.25 0 0 1-2.363-3.203 5.687 5.687 0 0 1 .63-4.375c1.707-2.922 7.455-5.004 9.678-5.722.569 2.87 1.268 8.54-.298 11.2Z"></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--veganLarge"><path d="m27.944 4.004-.21-.875-.875.236c-.359.105-9.109 2.573-11.603 6.764a6.2 6.2 0 0 0-.28.534C12.16 7.372 5.167 5.604 4.853 5.5l-.875-.21-.228.91c-.07.341-1.75 8.365.604 12.11a6.843 6.843 0 0 0 5.783 3.203c.367-.005.733-.04 1.094-.106l2.87 7.15h2.625l3.054-7.613c.485.11.981.17 1.479.175a7.465 7.465 0 0 0 6.405-3.701c2.458-4.2.367-13.038.28-13.414ZM5.876 17.383c-1.435-2.258-.98-7.298-.551-9.914 2.546.752 7.245 2.52 8.689 4.821.105.166.198.338.28.516a7.453 7.453 0 0 0 .14 3.01c.052.175.105.359.166.534a4.708 4.708 0 0 1-1.986 2.695l-1.637-4.139H8.624l1.942 4.83a5.049 5.049 0 0 1-4.69-2.354Zm9.625 8.88-2.196-5.582.263-.14a6.405 6.405 0 0 0 2.126-2.205 7 7 0 0 0 2.039 1.82l.148.07-2.38 6.038Zm10.64-9.738a5.68 5.68 0 0 1-5.722 2.774l1.75-4.375h-2.232l-1.443 3.701a5.25 5.25 0 0 1-2.363-3.203 5.687 5.687 0 0 1 .63-4.375c1.707-2.922 7.455-5.004 9.678-5.722.569 2.87 1.268 8.54-.298 11.2Z"></path></svg>';
 
 class IconVeganLarge extends HTMLElement {
     constructor () {

package/dist/IconVegetarian.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--vegetarian"><path fill-rule="evenodd" d="m10.844 1.044.324.568c.007.016.025.048.05.097.43.798 3.179 5.91 2.33 8.986a5.18 5.18 0 0 1-4.97 3.806 4.96 4.96 0 0 1-1.374-.192 4.86 4.86 0 0 1-1.059-.42 6.606 6.606 0 0 1-2.992.735A6.414 6.414 0 0 1 2 14.509v-1.334a5.197 5.197 0 0 0 2.938-.179A5.18 5.18 0 0 1 3.625 8c.857-3.23 6.186-6.36 6.629-6.62l.021-.013.569-.323Zm-.367 11.644a3.859 3.859 0 0 0 1.81-2.325v-.01c.552-2.03-.997-5.678-1.942-7.498C8.604 3.94 5.375 6.25 4.859 8.35a3.85 3.85 0 0 0 1.312 4.025 5.163 5.163 0 0 0 2.03-2.984l1.269.359a6.431 6.431 0 0 1-2.048 3.255l.132.052a3.859 3.859 0 0 0 2.923-.37Z" 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--vegetarian"><path fill-rule="evenodd" d="m10.844 1.044.324.568c.007.016.025.048.05.097.43.798 3.179 5.91 2.33 8.986a5.18 5.18 0 0 1-4.97 3.806 4.96 4.96 0 0 1-1.374-.192 4.86 4.86 0 0 1-1.059-.42 6.606 6.606 0 0 1-2.992.735A6.414 6.414 0 0 1 2 14.509v-1.334a5.197 5.197 0 0 0 2.938-.179A5.18 5.18 0 0 1 3.625 8c.857-3.23 6.186-6.36 6.629-6.62l.021-.013.569-.323Zm-.367 11.644a3.859 3.859 0 0 0 1.81-2.325v-.01c.552-2.03-.997-5.678-1.942-7.498C8.604 3.94 5.375 6.25 4.859 8.35a3.85 3.85 0 0 0 1.312 4.025 5.163 5.163 0 0 0 2.03-2.984l1.269.359a6.431 6.431 0 0 1-2.048 3.255l.132.052a3.859 3.859 0 0 0 2.923-.37Z" clip-rule="evenodd"></path></svg>';
 
 class IconVegetarian extends HTMLElement {
     constructor () {

package/dist/IconVegetarianFilled.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--vegetarianFilled"><path d="m10.844 1.052.324.57.01.018c.242.437 3.254 5.86 2.378 9.09a5.18 5.18 0 0 1-4.978 3.806 5.29 5.29 0 0 1-1.374-.184 5.438 5.438 0 0 1-1.068-.428l.35-.175.359-.237c.21-.145.411-.303.604-.472A6.458 6.458 0 0 0 9.47 9.75L8.201 9.4a5.171 5.171 0 0 1-2.047 2.94c-.05.034-.098.072-.147.11-.062.05-.126.1-.194.144l-.22.114c-.21.116-.43.216-.655.297A5.162 5.162 0 0 1 3.625 8c.857-3.221 6.185-6.35 6.628-6.611l.022-.013.569-.324Z"></path><path d="M2 14.518c.386.073.777.111 1.17.114a6.529 6.529 0 0 0 2.966-.734 5.25 5.25 0 0 1-1.199-.875A5.154 5.154 0 0 1 2 13.185v1.333Z"></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--vegetarianFilled"><path d="m10.844 1.052.324.57.01.018c.242.437 3.254 5.86 2.378 9.09a5.18 5.18 0 0 1-4.978 3.806 5.29 5.29 0 0 1-1.374-.184 5.438 5.438 0 0 1-1.068-.428l.35-.175.359-.237c.21-.145.411-.303.604-.472A6.458 6.458 0 0 0 9.47 9.75L8.201 9.4a5.171 5.171 0 0 1-2.047 2.94c-.05.034-.098.072-.147.11-.062.05-.126.1-.194.144l-.22.114c-.21.116-.43.216-.655.297A5.162 5.162 0 0 1 3.625 8c.857-3.221 6.185-6.35 6.628-6.611l.022-.013.569-.324Z"></path><path d="M2 14.518c.386.073.777.111 1.17.114a6.529 6.529 0 0 0 2.966-.734 5.25 5.25 0 0 1-1.199-.875A5.154 5.154 0 0 1 2 13.185v1.333Z"></path></svg>';
 
 class IconVegetarianFilled extends HTMLElement {
     constructor () {

package/dist/IconVegetarianFilledLarge.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--vegetarianFilledLarge"><path d="m23.166 3.155-.428-.753-.762.473c-.463.262-11.375 6.562-13.125 12.924a9.905 9.905 0 0 0 3.316 10.281c.28-.131.57-.289.876-.446l.078-.044c.254-.149.481-.306.718-.473a10.818 10.818 0 0 0 1.522-1.294 2.922 2.922 0 0 0 .525-2.258 4.017 4.017 0 0 0-1.802-2.625l.971-1.461a5.933 5.933 0 0 1 2.424 3.202c.254-.564.46-1.15.612-1.75l.534-2.564 1.75.42-.639 2.547a12.627 12.627 0 0 1-2.992 5.486l-.271.262c-.314.31-.644.602-.99.875-.253.21-.524.412-.804.604-.28.193-.464.324-.709.473l-.158.087c.62.322 1.27.577 1.943.762.854.24 1.738.36 2.625.358a9.914 9.914 0 0 0 9.538-7.28c1.715-6.343-4.49-17.334-4.752-17.806Z"></path><path d="M5.5 26.859v1.75a12.364 12.364 0 0 0 8.295-1.505A9.784 9.784 0 0 1 12.133 26a10.684 10.684 0 0 1-6.633.858Z"></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--vegetarianFilledLarge"><path d="m23.166 3.155-.428-.753-.762.473c-.463.262-11.375 6.562-13.125 12.924a9.905 9.905 0 0 0 3.316 10.281c.28-.131.57-.289.876-.446l.078-.044c.254-.149.481-.306.718-.473a10.818 10.818 0 0 0 1.522-1.294 2.922 2.922 0 0 0 .525-2.258 4.017 4.017 0 0 0-1.802-2.625l.971-1.461a5.933 5.933 0 0 1 2.424 3.202c.254-.564.46-1.15.612-1.75l.534-2.564 1.75.42-.639 2.547a12.627 12.627 0 0 1-2.992 5.486l-.271.262c-.314.31-.644.602-.99.875-.253.21-.524.412-.804.604-.28.193-.464.324-.709.473l-.158.087c.62.322 1.27.577 1.943.762.854.24 1.738.36 2.625.358a9.914 9.914 0 0 0 9.538-7.28c1.715-6.343-4.49-17.334-4.752-17.806Z"></path><path d="M5.5 26.859v1.75a12.364 12.364 0 0 0 8.295-1.505A9.784 9.784 0 0 1 12.133 26a10.684 10.684 0 0 1-6.633.858Z"></path></svg>';
 
 class IconVegetarianFilledLarge extends HTMLElement {
     constructor () {

package/dist/IconVegetarianLarge.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--vegetarianLarge"><path d="m23.166 3.146-.428-.761-.762.438c-.463.262-11.375 6.562-13.125 12.923a9.87 9.87 0 0 0 .945 7.508c.612 1.06 1.413 2 2.363 2.773a10.754 10.754 0 0 1-7.28.692l-.438 1.697c1.027.26 2.082.393 3.141.394a12.574 12.574 0 0 0 6.248-1.68 9.724 9.724 0 0 0 1.951.761 9.994 9.994 0 0 0 2.625.359 9.905 9.905 0 0 0 9.52-7.28c1.707-6.361-4.497-17.36-4.76-17.824Zm3.037 17.36A8.146 8.146 0 0 1 16.2 26.203l-.735-.237c.34-.273.664-.565.972-.875l.253-.114.053-.183a12.477 12.477 0 0 0 2.975-5.469l.639-2.537-1.733-.438-.639 2.537c-.153.6-.358 1.186-.612 1.75a5.932 5.932 0 0 0-2.424-3.202l-.971 1.461a4.015 4.015 0 0 1 1.802 2.625 2.921 2.921 0 0 1-.525 2.258c-.467.48-.98.913-1.531 1.295a8.111 8.111 0 0 1-3.22-8.873c1.313-4.76 9.074-9.826 11.568-11.401 1.364 2.59 5.442 10.938 4.13 15.706Z"></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--vegetarianLarge"><path d="m23.166 3.146-.428-.761-.762.438c-.463.262-11.375 6.562-13.125 12.923a9.87 9.87 0 0 0 .945 7.508c.612 1.06 1.413 2 2.363 2.773a10.754 10.754 0 0 1-7.28.692l-.438 1.697c1.027.26 2.082.393 3.141.394a12.574 12.574 0 0 0 6.248-1.68 9.724 9.724 0 0 0 1.951.761 9.994 9.994 0 0 0 2.625.359 9.905 9.905 0 0 0 9.52-7.28c1.707-6.361-4.497-17.36-4.76-17.824Zm3.037 17.36A8.146 8.146 0 0 1 16.2 26.203l-.735-.237c.34-.273.664-.565.972-.875l.253-.114.053-.183a12.477 12.477 0 0 0 2.975-5.469l.639-2.537-1.733-.438-.639 2.537c-.153.6-.358 1.186-.612 1.75a5.932 5.932 0 0 0-2.424-3.202l-.971 1.461a4.015 4.015 0 0 1 1.802 2.625 2.921 2.921 0 0 1-.525 2.258c-.467.48-.98.913-1.531 1.295a8.111 8.111 0 0 1-3.22-8.873c1.313-4.76 9.074-9.826 11.568-11.401 1.364 2.59 5.442 10.938 4.13 15.706Z"></path></svg>';
 
 class IconVegetarianLarge extends HTMLElement {
     constructor () {

package/dist/IconVision.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--vision"><path d="M14.379 4.01a3.8 3.8 0 0 0-2.284-1.872 2.992 2.992 0 0 0-2.345.27c-.205.122-.396.265-.569.43l-6.43 4.935a1.19 1.19 0 0 0-.325 1.513v.053l-.962.499L2.068 11l.988-.507a1.19 1.19 0 0 0 1.007.586.875.875 0 0 0 .262 0l1.715-.455-1.33 3.5H6.12l1.33-3.5 1.33 3.5h1.409l-1.558-4.06 3.815-.875c.306-.058.6-.16.875-.306A3.605 3.605 0 0 0 14.38 4.01ZM4.159 9.75l-.534-.997 4.568-3.5a3.999 3.999 0 0 0 .49 2.012c.27.475.634.892 1.067 1.225L4.16 9.75Zm8.496-2.012a1.671 1.671 0 0 1-1.339.148A2.468 2.468 0 0 1 9.83 6.644a2.275 2.275 0 0 1 .577-3.089c.25-.146.534-.222.823-.219.174.003.347.027.516.07A2.572 2.572 0 0 1 13.25 4.64a2.284 2.284 0 0 1-.595 3.089v.009Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--vision"><path d="M14.379 4.01a3.8 3.8 0 0 0-2.284-1.872 2.992 2.992 0 0 0-2.345.27c-.205.122-.396.265-.569.43l-6.43 4.935a1.19 1.19 0 0 0-.325 1.513v.053l-.962.499L2.068 11l.988-.507a1.19 1.19 0 0 0 1.007.586.875.875 0 0 0 .262 0l1.715-.455-1.33 3.5H6.12l1.33-3.5 1.33 3.5h1.409l-1.558-4.06 3.815-.875c.306-.058.6-.16.875-.306A3.605 3.605 0 0 0 14.38 4.01ZM4.159 9.75l-.534-.997 4.568-3.5a3.999 3.999 0 0 0 .49 2.012c.27.475.634.892 1.067 1.225L4.16 9.75Zm8.496-2.012a1.671 1.671 0 0 1-1.339.148A2.468 2.468 0 0 1 9.83 6.644a2.275 2.275 0 0 1 .577-3.089c.25-.146.534-.222.823-.219.174.003.347.027.516.07A2.572 2.572 0 0 1 13.25 4.64a2.284 2.284 0 0 1-.595 3.089v.009Z"></path></svg>';
 
 class IconVision extends HTMLElement {
     constructor () {

package/dist/IconVisionLarge.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--visionLarge"><path d="M27.296 8.002A7.191 7.191 0 0 0 23 4.46a5.591 5.591 0 0 0-4.375.498c-.403.241-.77.535-1.094.875L4.625 15.66a1.933 1.933 0 0 0-.525 2.458l.28.508-1.505.779.805 1.557 1.54-.796.184.324a1.881 1.881 0 0 0 1.671.988c.141-.001.282-.016.42-.043l4.209-.963L8.71 28.25h1.873l3.176-8.251h.096l3.185 8.251h1.873l-3.334-8.663 7.998-1.837h.113a5.251 5.251 0 0 0 1.619-.604c2.94-1.706 3.815-5.792 1.986-9.144ZM7.093 19.727a.148.148 0 0 1-.14-.078l-1.296-2.372a.175.175 0 0 1 .044-.227l10.08-7.718a7.604 7.604 0 0 0 .875 4.743 7.438 7.438 0 0 0 2.739 2.861L7.093 19.727Zm17.342-4.12a3.887 3.887 0 0 1-3.01.332 5.46 5.46 0 0 1-3.238-2.695C16.805 10.75 17.4 7.679 19.5 6.47a3.798 3.798 0 0 1 1.881-.49c.385.001.767.054 1.138.158a5.46 5.46 0 0 1 3.237 2.695c1.383 2.529.788 5.565-1.321 6.772Z"></path><path d="M22.125 8.125a6.24 6.24 0 0 1-.945 1.68 6.24 6.24 0 0 1-1.68.945 6.24 6.24 0 0 1 1.68.945c.4.508.719 1.074.945 1.68a6.24 6.24 0 0 1 .945-1.68 6.24 6.24 0 0 1 1.68-.945 6.24 6.24 0 0 1-1.68-.945 6.24 6.24 0 0 1-.945-1.68Z"></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--visionLarge"><path d="M27.296 8.002A7.191 7.191 0 0 0 23 4.46a5.591 5.591 0 0 0-4.375.498c-.403.241-.77.535-1.094.875L4.625 15.66a1.933 1.933 0 0 0-.525 2.458l.28.508-1.505.779.805 1.557 1.54-.796.184.324a1.881 1.881 0 0 0 1.671.988c.141-.001.282-.016.42-.043l4.209-.963L8.71 28.25h1.873l3.176-8.251h.096l3.185 8.251h1.873l-3.334-8.663 7.998-1.837h.113a5.251 5.251 0 0 0 1.619-.604c2.94-1.706 3.815-5.792 1.986-9.144ZM7.093 19.727a.148.148 0 0 1-.14-.078l-1.296-2.372a.175.175 0 0 1 .044-.227l10.08-7.718a7.604 7.604 0 0 0 .875 4.743 7.438 7.438 0 0 0 2.739 2.861L7.093 19.727Zm17.342-4.12a3.887 3.887 0 0 1-3.01.332 5.46 5.46 0 0 1-3.238-2.695C16.805 10.75 17.4 7.679 19.5 6.47a3.798 3.798 0 0 1 1.881-.49c.385.001.767.054 1.138.158a5.46 5.46 0 0 1 3.237 2.695c1.383 2.529.788 5.565-1.321 6.772Z"></path><path d="M22.125 8.125a6.24 6.24 0 0 1-.945 1.68 6.24 6.24 0 0 1-1.68.945 6.24 6.24 0 0 1 1.68.945c.4.508.719 1.074.945 1.68a6.24 6.24 0 0 1 .945-1.68 6.24 6.24 0 0 1 1.68-.945 6.24 6.24 0 0 1-1.68-.945 6.24 6.24 0 0 1-.945-1.68Z"></path></svg>';
 
 class IconVisionLarge extends HTMLElement {
     constructor () {

package/dist/IconVoucher.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--voucher"><path d="M10.214 8A3.938 3.938 0 0 0 8 10.214 3.938 3.938 0 0 0 5.786 8 3.937 3.937 0 0 0 8 5.786 3.937 3.937 0 0 0 10.214 8Zm4.567-3.421v6.842l-1.61 1.61H2.83l-1.61-1.61V4.58l1.61-1.61H13.17l1.61 1.61Zm-1.312.551-.875-.875H3.38l-.875.875v5.74l.875.875h9.24l.875-.875-.026-5.74Z"></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--voucher"><path d="M10.214 8A3.938 3.938 0 0 0 8 10.214 3.938 3.938 0 0 0 5.786 8 3.937 3.937 0 0 0 8 5.786 3.937 3.937 0 0 0 10.214 8Zm4.567-3.421v6.842l-1.61 1.61H2.83l-1.61-1.61V4.58l1.61-1.61H13.17l1.61 1.61Zm-1.312.551-.875-.875H3.38l-.875.875v5.74l.875.875h9.24l.875-.875-.026-5.74Z"></path></svg>';
 
 class IconVoucher extends HTMLElement {
     constructor () {

package/dist/IconVoucherFilled.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--voucherFilled"><path fill-rule="evenodd" d="M14.781 4.579v6.842l-1.61 1.61H2.83l-1.61-1.61V4.58l1.61-1.61H13.17l1.61 1.61ZM10.214 8A3.938 3.938 0 0 0 8 10.214 3.937 3.937 0 0 0 5.786 8 3.938 3.938 0 0 0 8 5.786 3.938 3.938 0 0 0 10.214 8Z" 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--voucherFilled"><path fill-rule="evenodd" d="M14.781 4.579v6.842l-1.61 1.61H2.83l-1.61-1.61V4.58l1.61-1.61H13.17l1.61 1.61ZM10.214 8A3.938 3.938 0 0 0 8 10.214 3.937 3.937 0 0 0 5.786 8 3.938 3.938 0 0 0 8 5.786 3.938 3.938 0 0 0 10.214 8Z" clip-rule="evenodd"></path></svg>';
 
 class IconVoucherFilled extends HTMLElement {
     constructor () {

package/dist/IconVoucherFilledLarge.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--voucherFilledLarge"><path fill-rule="evenodd" d="M5.641 5.5h20.843l3.141 3.141V23.36L26.484 26.5H5.64L2.5 23.359V8.64L5.641 5.5ZM22.75 9.875h1.75v-3.5h-1.75v3.5Zm-6.396 3.77a6.922 6.922 0 0 0 2.345 1.541.875.875 0 0 1 0 1.628 6.919 6.919 0 0 0-3.885 3.885.875.875 0 0 1-1.628 0 6.92 6.92 0 0 0-3.885-3.885.875.875 0 0 1 0-1.628 6.922 6.922 0 0 0 3.885-3.885.875.875 0 0 1 1.628 0 6.922 6.922 0 0 0 1.54 2.345Zm6.396 8.48h1.75v3.5h-1.75v-3.5Zm1.75-5.25h-1.75v3.5h1.75v-3.5Zm-1.75-5.25h1.75v3.5h-1.75v-3.5Z" clip-rule="evenodd"></path><path d="M11.515 16A8.62 8.62 0 0 1 14 18.485 8.62 8.62 0 0 1 16.485 16 8.62 8.62 0 0 1 14 13.515 8.62 8.62 0 0 1 11.515 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--voucherFilledLarge"><path fill-rule="evenodd" d="M5.641 5.5h20.843l3.141 3.141V23.36L26.484 26.5H5.64L2.5 23.359V8.64L5.641 5.5ZM22.75 9.875h1.75v-3.5h-1.75v3.5Zm-6.396 3.77a6.922 6.922 0 0 0 2.345 1.541.875.875 0 0 1 0 1.628 6.919 6.919 0 0 0-3.885 3.885.875.875 0 0 1-1.628 0 6.92 6.92 0 0 0-3.885-3.885.875.875 0 0 1 0-1.628 6.922 6.922 0 0 0 3.885-3.885.875.875 0 0 1 1.628 0 6.922 6.922 0 0 0 1.54 2.345Zm6.396 8.48h1.75v3.5h-1.75v-3.5Zm1.75-5.25h-1.75v3.5h1.75v-3.5Zm-1.75-5.25h1.75v3.5h-1.75v-3.5Z" clip-rule="evenodd"></path><path d="M11.515 16A8.62 8.62 0 0 1 14 18.485 8.62 8.62 0 0 1 16.485 16 8.62 8.62 0 0 1 14 13.515 8.62 8.62 0 0 1 11.515 16Z"></path></svg>';
 
 class IconVoucherFilledLarge extends HTMLElement {
     constructor () {

package/dist/IconVoucherLarge.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--voucherLarge"><path d="M17.199 15.186a6.921 6.921 0 0 1-3.885-3.885.875.875 0 0 0-1.628 0 6.921 6.921 0 0 1-3.885 3.885.875.875 0 0 0 0 1.628 6.921 6.921 0 0 1 3.885 3.885.875.875 0 0 0 1.628 0 6.921 6.921 0 0 1 3.885-3.885.875.875 0 0 0 0-1.628ZM12.5 18.485A8.62 8.62 0 0 0 10.015 16a8.62 8.62 0 0 0 2.485-2.485A8.62 8.62 0 0 0 14.985 16a8.62 8.62 0 0 0-2.485 2.485ZM25.984 5.5H5.14L2 8.641V23.36L5.141 26.5h20.843l3.141-3.141V8.64L25.984 5.5Zm1.391 17.141-2.109 2.109H23v-2.625h-1.75v2.625H5.859L3.75 22.641V9.36L5.859 7.25H21.25v2.625H23V7.25h2.266l2.109 2.109V22.64Zm-6.125-5.766H23v3.5h-1.75v-3.5Zm0-5.25H23v3.5h-1.75v-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--voucherLarge"><path d="M17.199 15.186a6.921 6.921 0 0 1-3.885-3.885.875.875 0 0 0-1.628 0 6.921 6.921 0 0 1-3.885 3.885.875.875 0 0 0 0 1.628 6.921 6.921 0 0 1 3.885 3.885.875.875 0 0 0 1.628 0 6.921 6.921 0 0 1 3.885-3.885.875.875 0 0 0 0-1.628ZM12.5 18.485A8.62 8.62 0 0 0 10.015 16a8.62 8.62 0 0 0 2.485-2.485A8.62 8.62 0 0 0 14.985 16a8.62 8.62 0 0 0-2.485 2.485ZM25.984 5.5H5.14L2 8.641V23.36L5.141 26.5h20.843l3.141-3.141V8.64L25.984 5.5Zm1.391 17.141-2.109 2.109H23v-2.625h-1.75v2.625H5.859L3.75 22.641V9.36L5.859 7.25H21.25v2.625H23V7.25h2.266l2.109 2.109V22.64Zm-6.125-5.766H23v3.5h-1.75v-3.5Zm0-5.25H23v3.5h-1.75v-3.5Z"></path></svg>';
 
 class IconVoucherLarge extends HTMLElement {
     constructor () {

package/dist/IconWalking.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--walking"><g clip-path="url(#prefix__clip0_751_191)"><path d="M12.646 7.125A4.086 4.086 0 0 1 9.89 4.937l-.14-.376h-.245a2.083 2.083 0 1 0-3.255.184A5.18 5.18 0 0 0 2.934 7.44L2.286 8.7l1.164.595L4.106 8a3.841 3.841 0 0 1 1.645-1.654v2.529a2.757 2.757 0 0 0 1.094 2.179 6.61 6.61 0 0 1-.787.42L3.23 12.777l.56 1.182 2.8-1.322a5.576 5.576 0 0 0 1.365-.875l1.138.77 1.146 2.687 1.207-.516-1.216-2.862a.666.666 0 0 0-.236-.28l-1.12-.717c.172-.25.315-.516.429-.796.133-.328.219-.673.253-1.024l.193-2.03a5.311 5.311 0 0 0 2.546 1.426l.639.184.35-1.269-.639-.21ZM7.79 2.61a.77.77 0 1 1 0 1.54.77.77 0 0 1 0-1.54Zm-.088 7.438a1.461 1.461 0 0 1-.638-1.173V5.909c.177-.013.356-.013.534 0h.97l-.306 2.966a2.625 2.625 0 0 1-.166.665c-.08.19-.18.372-.297.543l-.097-.036Z"></path></g><defs><clipPath id="prefix__clip0_751_191"><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--walking"><g clip-path="url(#prefix__clip0_751_191)"><path d="M12.646 7.125A4.086 4.086 0 0 1 9.89 4.937l-.14-.376h-.245a2.083 2.083 0 1 0-3.255.184A5.18 5.18 0 0 0 2.934 7.44L2.286 8.7l1.164.595L4.106 8a3.841 3.841 0 0 1 1.645-1.654v2.529a2.757 2.757 0 0 0 1.094 2.179 6.61 6.61 0 0 1-.787.42L3.23 12.777l.56 1.182 2.8-1.322a5.576 5.576 0 0 0 1.365-.875l1.138.77 1.146 2.687 1.207-.516-1.216-2.862a.666.666 0 0 0-.236-.28l-1.12-.717c.172-.25.315-.516.429-.796.133-.328.219-.673.253-1.024l.193-2.03a5.311 5.311 0 0 0 2.546 1.426l.639.184.35-1.269-.639-.21ZM7.79 2.61a.77.77 0 1 1 0 1.54.77.77 0 0 1 0-1.54Zm-.088 7.438a1.461 1.461 0 0 1-.638-1.173V5.909c.177-.013.356-.013.534 0h.97l-.306 2.966a2.625 2.625 0 0 1-.166.665c-.08.19-.18.372-.297.543l-.097-.036Z"></path></g><defs><clipPath id="prefix__clip0_751_191"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
 
 class IconWalking extends HTMLElement {
     constructor () {

package/dist/IconWalkingLarge.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--walkingLarge"><g clip-path="url(#prefix__clip0_751_188)"><path d="M16.219 9.061a3.404 3.404 0 1 0 0-6.808 3.404 3.404 0 0 0 0 6.808Zm0-5.057a1.654 1.654 0 1 1 0 3.308 1.654 1.654 0 0 1 0-3.308Z"></path><path d="M25.73 15.178a8.9 8.9 0 0 1-6.029-4.848l-.201-.455h-4.095a10.255 10.255 0 0 0-9.214 5.688l-.997 1.872 1.548.814 1.007-1.934a8.54 8.54 0 0 1 4.322-4.051v4.27a5.181 5.181 0 0 0 2.302 4.322l.253.175a9.69 9.69 0 0 1-2.205 1.295l-5.845 2.756.744 1.584 5.819-2.739a11.57 11.57 0 0 0 3.001-1.872l2.739 1.872 2.808 6.502 1.61-.691L20.375 23a.876.876 0 0 0-.306-.376l-2.713-1.846a7.455 7.455 0 0 0 1.628-3.903L19.5 13.2a10.648 10.648 0 0 0 5.828 3.675l.507.122.402-1.706-.507-.114Zm-10.378 4.226a3.43 3.43 0 0 1-1.53-2.87v-4.786a8.602 8.602 0 0 1 1.583-.123h2.511l-.674 5.093a5.785 5.785 0 0 1-1.33 3.114l-.56-.428Z"></path></g><defs><clipPath id="prefix__clip0_751_188"><rect width="28" height="28" transform="translate(2 2)"></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 32 32" class="c-pieIcon c-pieIcon--walkingLarge"><g clip-path="url(#prefix__clip0_751_188)"><path d="M16.219 9.061a3.404 3.404 0 1 0 0-6.808 3.404 3.404 0 0 0 0 6.808Zm0-5.057a1.654 1.654 0 1 1 0 3.308 1.654 1.654 0 0 1 0-3.308Z"></path><path d="M25.73 15.178a8.9 8.9 0 0 1-6.029-4.848l-.201-.455h-4.095a10.255 10.255 0 0 0-9.214 5.688l-.997 1.872 1.548.814 1.007-1.934a8.54 8.54 0 0 1 4.322-4.051v4.27a5.181 5.181 0 0 0 2.302 4.322l.253.175a9.69 9.69 0 0 1-2.205 1.295l-5.845 2.756.744 1.584 5.819-2.739a11.57 11.57 0 0 0 3.001-1.872l2.739 1.872 2.808 6.502 1.61-.691L20.375 23a.876.876 0 0 0-.306-.376l-2.713-1.846a7.455 7.455 0 0 0 1.628-3.903L19.5 13.2a10.648 10.648 0 0 0 5.828 3.675l.507.122.402-1.706-.507-.114Zm-10.378 4.226a3.43 3.43 0 0 1-1.53-2.87v-4.786a8.602 8.602 0 0 1 1.583-.123h2.511l-.674 5.093a5.785 5.785 0 0 1-1.33 3.114l-.56-.428Z"></path></g><defs><clipPath id="prefix__clip0_751_188"><rect width="28" height="28" transform="translate(2 2)"></rect></clipPath></defs></svg>';
 
 class IconWalkingLarge extends HTMLElement {
     constructor () {

package/dist/IconWallet.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--wallet"><g clip-path="url(#prefix__clip0_4814_3596)"><path fill-rule="evenodd" d="M8 2.75a.131.131 0 0 1 .079 0h.087a.201.201 0 0 1 .114.114l.096.227h1.418l-.298-.726a1.549 1.549 0 0 0-.875-.831 1.514 1.514 0 0 0-1.172 0l-3.693 1.54h3.43L8 2.75Zm4.857 8.584H12.2v1.584a.219.219 0 0 1-.218.218h-8.97a.219.219 0 0 1-.218-.218v-7a.219.219 0 0 1 .219-.22h8.969a.219.219 0 0 1 .218.22v1.478h1.313V5.918a1.531 1.531 0 0 0-1.531-1.532h-8.97a1.531 1.531 0 0 0-1.426.989c-.065.17-.1.351-.105.534v7a1.531 1.531 0 0 0 1.532 1.54h8.969a1.53 1.53 0 0 0 1.53-1.531v-1.584h-.655Zm.612-2.625h.901v1.312h-3.036V8.71H13.469Z" clip-rule="evenodd"></path></g><defs><clipPath id="prefix__clip0_4814_3596"><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--wallet"><g clip-path="url(#prefix__clip0_4814_3596)"><path fill-rule="evenodd" d="M8 2.75a.131.131 0 0 1 .079 0h.087a.201.201 0 0 1 .114.114l.096.227h1.418l-.298-.726a1.549 1.549 0 0 0-.875-.831 1.514 1.514 0 0 0-1.172 0l-3.693 1.54h3.43L8 2.75Zm4.857 8.584H12.2v1.584a.219.219 0 0 1-.218.218h-8.97a.219.219 0 0 1-.218-.218v-7a.219.219 0 0 1 .219-.22h8.969a.219.219 0 0 1 .218.22v1.478h1.313V5.918a1.531 1.531 0 0 0-1.531-1.532h-8.97a1.531 1.531 0 0 0-1.426.989c-.065.17-.1.351-.105.534v7a1.531 1.531 0 0 0 1.532 1.54h8.969a1.53 1.53 0 0 0 1.53-1.531v-1.584h-.655Zm.612-2.625h.901v1.312h-3.036V8.71H13.469Z" clip-rule="evenodd"></path></g><defs><clipPath id="prefix__clip0_4814_3596"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
 
 class IconWallet extends HTMLElement {
     constructor () {

package/dist/IconWalletFilled.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--walletFilled"><path d="m9.75 3.065-.263-.735a1.531 1.531 0 0 0-1.995-.831L3.73 3.065h6.02Z"></path><path d="M10.397 11.325a.394.394 0 0 1-.394-.394v-3.15c.001-.075.025-.149.07-.21a.385.385 0 0 1 .298-.184h3.115V5.91a1.531 1.531 0 0 0-1.531-1.532h-8.97a1.549 1.549 0 0 0-.664.123 1.496 1.496 0 0 0-.761.875c-.071.169-.107.35-.105.534v7a1.54 1.54 0 0 0 1.53 1.531h8.97a1.54 1.54 0 0 0 1.53-1.531v-1.584h-3.088Z"></path><path d="M11.316 8.7v1.304h3.019V8.7h-3.02Z"></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--walletFilled"><path d="m9.75 3.065-.263-.735a1.531 1.531 0 0 0-1.995-.831L3.73 3.065h6.02Z"></path><path d="M10.397 11.325a.394.394 0 0 1-.394-.394v-3.15c.001-.075.025-.149.07-.21a.385.385 0 0 1 .298-.184h3.115V5.91a1.531 1.531 0 0 0-1.531-1.532h-8.97a1.549 1.549 0 0 0-.664.123 1.496 1.496 0 0 0-.761.875c-.071.169-.107.35-.105.534v7a1.54 1.54 0 0 0 1.53 1.531h8.97a1.54 1.54 0 0 0 1.53-1.531v-1.584h-3.088Z"></path><path d="M11.316 8.7v1.304h3.019V8.7h-3.02Z"></path></svg>';
 
 class IconWalletFilled extends HTMLElement {
     constructor () {

package/dist/IconWalletFilledLarge.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--walletFilledLarge"><path d="m21.04 7.005-.787-1.899a2.626 2.626 0 0 0-3.43-1.426L8.808 7.005H21.04Z"></path><path d="M25.625 23.446h-6.562a.718.718 0 0 1-.718-.717v-9.021a.718.718 0 0 1 .718-.71h7.525v-1.67a2.625 2.625 0 0 0-.254-1.112 2.625 2.625 0 0 0-2.459-1.627H5.5c-.558.003-1.1.184-1.549.516a3.176 3.176 0 0 0-.428.411l-.158.21-.07.088c-.086.126-.16.261-.219.402a2.625 2.625 0 0 0-.253 1.112v13.886A2.678 2.678 0 0 0 5.5 27.89h18.375a2.677 2.677 0 0 0 2.678-2.677v-1.75h-.928v-.018Z"></path><path d="M20.095 14.749v6.947h9.03V14.75h-9.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 32 32" class="c-pieIcon c-pieIcon--walletFilledLarge"><path d="m21.04 7.005-.787-1.899a2.626 2.626 0 0 0-3.43-1.426L8.808 7.005H21.04Z"></path><path d="M25.625 23.446h-6.562a.718.718 0 0 1-.718-.717v-9.021a.718.718 0 0 1 .718-.71h7.525v-1.67a2.625 2.625 0 0 0-.254-1.112 2.625 2.625 0 0 0-2.459-1.627H5.5c-.558.003-1.1.184-1.549.516a3.176 3.176 0 0 0-.428.411l-.158.21-.07.088c-.086.126-.16.261-.219.402a2.625 2.625 0 0 0-.253 1.112v13.886A2.678 2.678 0 0 0 5.5 27.89h18.375a2.677 2.677 0 0 0 2.678-2.677v-1.75h-.928v-.018Z"></path><path d="M20.095 14.749v6.947h9.03V14.75h-9.03Z"></path></svg>';
 
 class IconWalletFilledLarge extends HTMLElement {
     constructor () {

package/dist/IconWalletLarge.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--walletLarge"><path d="M17.496 5.299a.871.871 0 0 1 .332-.07.87.87 0 0 1 .333.07.837.837 0 0 1 .473.472l.507 1.234h1.89l-.787-1.899a2.619 2.619 0 0 0-3.43-1.417L8.807 7.005h4.576l4.113-1.706Z"></path><path d="M25.669 23.446h-.875v1.768a.878.878 0 0 1-.875.875H5.498a.878.878 0 0 1-.874-.875V11.223a.872.872 0 0 1 .499-.788c.017 0 .026-.018.035-.026a.88.88 0 0 1 .34-.07h18.42c.48 0 .875.393.875.875v1.785h1.802v-1.671a2.59 2.59 0 0 0-.254-1.112 2.617 2.617 0 0 0-2.423-1.618H5.498a2.61 2.61 0 0 0-1.574.533 2.56 2.56 0 0 0-.411.403c-.053.061-.105.131-.158.201-.017.026-.044.053-.061.079a2.156 2.156 0 0 0-.219.393 2.652 2.652 0 0 0-.254 1.112v13.886A2.677 2.677 0 0 0 5.5 27.883h18.419a2.677 2.677 0 0 0 2.677-2.678v-1.767h-.927v.008Z"></path><path d="M20.104 14.749v6.947h9.03V14.75h-9.03Zm1.75 1.75h5.53v3.447h-5.53V16.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--walletLarge"><path d="M17.496 5.299a.871.871 0 0 1 .332-.07.87.87 0 0 1 .333.07.837.837 0 0 1 .473.472l.507 1.234h1.89l-.787-1.899a2.619 2.619 0 0 0-3.43-1.417L8.807 7.005h4.576l4.113-1.706Z"></path><path d="M25.669 23.446h-.875v1.768a.878.878 0 0 1-.875.875H5.498a.878.878 0 0 1-.874-.875V11.223a.872.872 0 0 1 .499-.788c.017 0 .026-.018.035-.026a.88.88 0 0 1 .34-.07h18.42c.48 0 .875.393.875.875v1.785h1.802v-1.671a2.59 2.59 0 0 0-.254-1.112 2.617 2.617 0 0 0-2.423-1.618H5.498a2.61 2.61 0 0 0-1.574.533 2.56 2.56 0 0 0-.411.403c-.053.061-.105.131-.158.201-.017.026-.044.053-.061.079a2.156 2.156 0 0 0-.219.393 2.652 2.652 0 0 0-.254 1.112v13.886A2.677 2.677 0 0 0 5.5 27.883h18.419a2.677 2.677 0 0 0 2.677-2.678v-1.767h-.927v.008Z"></path><path d="M20.104 14.749v6.947h9.03V14.75h-9.03Zm1.75 1.75h5.53v3.447h-5.53V16.5Z"></path></svg>';
 
 class IconWalletLarge extends HTMLElement {
     constructor () {

package/dist/IconWifi.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--wifi"><g clip-path="url(#prefix__clip0_15_321)"><path d="M11.832 10.231A5.023 5.023 0 0 0 8 8.333a5.023 5.023 0 0 0-3.833 1.898l-1.006-.875A6.326 6.326 0 0 1 8 7.02a6.326 6.326 0 0 1 4.839 2.363l-1.007.848Z"></path><path d="M13.95 8.096A7.788 7.788 0 0 0 8 5.156a7.787 7.787 0 0 0-5.95 2.94l-1.006-.875a9.074 9.074 0 0 1 7-3.412 9.074 9.074 0 0 1 7 3.412l-1.094.875Z"></path><path d="M9.794 12.576a2.292 2.292 0 0 0-3.588 0L5.2 11.701A3.666 3.666 0 0 1 8 10.354a3.665 3.665 0 0 1 2.8 1.373l-1.006.85Z"></path></g><defs><clipPath id="prefix__clip0_15_321"><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--wifi"><g clip-path="url(#prefix__clip0_15_321)"><path d="M11.832 10.231A5.023 5.023 0 0 0 8 8.333a5.023 5.023 0 0 0-3.833 1.898l-1.006-.875A6.326 6.326 0 0 1 8 7.02a6.326 6.326 0 0 1 4.839 2.363l-1.007.848Z"></path><path d="M13.95 8.096A7.788 7.788 0 0 0 8 5.156a7.787 7.787 0 0 0-5.95 2.94l-1.006-.875a9.074 9.074 0 0 1 7-3.412 9.074 9.074 0 0 1 7 3.412l-1.094.875Z"></path><path d="M9.794 12.576a2.292 2.292 0 0 0-3.588 0L5.2 11.701A3.666 3.666 0 0 1 8 10.354a3.665 3.665 0 0 1 2.8 1.373l-1.006.85Z"></path></g><defs><clipPath id="prefix__clip0_15_321"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
 
 class IconWifi extends HTMLElement {
     constructor () {

package/dist/IconWifiAlert.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--wifiAlert"><path d="M5.935 9.006a2.03 2.03 0 0 1 .166-.796 6.746 6.746 0 0 0-2.94 2.047l1.006.876A5.6 5.6 0 0 1 6.05 9.645a2.17 2.17 0 0 1-.114-.639Z"></path><path d="M9.899 8.21a1.925 1.925 0 0 1 .052 1.435 5.6 5.6 0 0 1 1.882 1.461l1.006-.875a6.746 6.746 0 0 0-2.94-2.021Z"></path><path d="M6.049 4.946a9.441 9.441 0 0 0-5.005 3.185l1.006.875A8.251 8.251 0 0 1 6.18 6.25l-.131-1.304Z"></path><path d="M9.951 4.946 9.82 6.25a8.251 8.251 0 0 1 4.13 2.721l1.006-.875a9.442 9.442 0 0 0-5.005-3.15Z"></path><path d="m5.2 12.602 1.006.875a2.293 2.293 0 0 1 3.588 0l1.006-.875A3.667 3.667 0 0 0 8 11.23a3.666 3.666 0 0 0-2.8 1.373Z"></path><path d="m8.402 7.256.43-4.375A2.564 2.564 0 0 0 8 2.75a2.625 2.625 0 0 0-.875.14l.429 4.375.848-.009Z"></path><path d="M7.247 9.006a.752.752 0 1 0 1.505 0 .752.752 0 0 0-1.505 0Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--wifiAlert"><path d="M5.935 9.006a2.03 2.03 0 0 1 .166-.796 6.746 6.746 0 0 0-2.94 2.047l1.006.876A5.6 5.6 0 0 1 6.05 9.645a2.17 2.17 0 0 1-.114-.639Z"></path><path d="M9.899 8.21a1.925 1.925 0 0 1 .052 1.435 5.6 5.6 0 0 1 1.882 1.461l1.006-.875a6.746 6.746 0 0 0-2.94-2.021Z"></path><path d="M6.049 4.946a9.441 9.441 0 0 0-5.005 3.185l1.006.875A8.251 8.251 0 0 1 6.18 6.25l-.131-1.304Z"></path><path d="M9.951 4.946 9.82 6.25a8.251 8.251 0 0 1 4.13 2.721l1.006-.875a9.442 9.442 0 0 0-5.005-3.15Z"></path><path d="m5.2 12.602 1.006.875a2.293 2.293 0 0 1 3.588 0l1.006-.875A3.667 3.667 0 0 0 8 11.23a3.666 3.666 0 0 0-2.8 1.373Z"></path><path d="m8.402 7.256.43-4.375A2.564 2.564 0 0 0 8 2.75a2.625 2.625 0 0 0-.875.14l.429 4.375.848-.009Z"></path><path d="M7.247 9.006a.752.752 0 1 0 1.505 0 .752.752 0 0 0-1.505 0Z"></path></svg>';
 
 class IconWifiAlert extends HTMLElement {
     constructor () {

package/dist/IconWifiAlertLarge.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 28 28" class="c-pieIcon c-pieIcon--wifiAlertLarge"><path d="M17.78 16.188A6.291 6.291 0 0 0 14 14.874 6.65 6.65 0 0 0 8.864 17.5l1.356 1.111A4.917 4.917 0 0 1 14 16.625a4.918 4.918 0 0 1 3.78 1.942l.359-.288a3.01 3.01 0 0 1-.42-1.523c.003-.19.024-.381.06-.569Z"></path><path d="M17.447 4.777A15.006 15.006 0 0 0 14 4.375a15.952 15.952 0 0 0-12.381 6.169l1.347 1.111A14.254 14.254 0 0 1 14 6.125a13.23 13.23 0 0 1 3.622.525v-.411l-.122-1.33"></path><path d="m23.809 7.963-.184 2.17c.51.477.988.986 1.435 1.522l1.347-1.111a18.87 18.87 0 0 0-2.598-2.581Z"></path><path d="M14 9.625a11.463 11.463 0 0 0-8.873 4.498l1.348 1.11A9.767 9.767 0 0 1 14 11.376a8.864 8.864 0 0 1 4.191 1.076L18 10.43a10.5 10.5 0 0 0-4-.805Z"></path><path d="M14 23.406a1.531 1.531 0 1 0 0-3.062 1.531 1.531 0 0 0 0 3.062Z"></path><path d="M19.329 6.072a4.585 4.585 0 0 1 2.905 0l-.744 7.64h-1.418l-.743-7.64Zm2.765 10.702a1.312 1.312 0 1 1-2.625 0 1.312 1.312 0 0 1 2.625 0Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 28 28" class="c-pieIcon c-pieIcon--wifiAlertLarge"><path d="M17.78 16.188A6.291 6.291 0 0 0 14 14.874 6.65 6.65 0 0 0 8.864 17.5l1.356 1.111A4.917 4.917 0 0 1 14 16.625a4.918 4.918 0 0 1 3.78 1.942l.359-.288a3.01 3.01 0 0 1-.42-1.523c.003-.19.024-.381.06-.569Z"></path><path d="M17.447 4.777A15.006 15.006 0 0 0 14 4.375a15.952 15.952 0 0 0-12.381 6.169l1.347 1.111A14.254 14.254 0 0 1 14 6.125a13.23 13.23 0 0 1 3.622.525v-.411l-.122-1.33"></path><path d="m23.809 7.963-.184 2.17c.51.477.988.986 1.435 1.522l1.347-1.111a18.87 18.87 0 0 0-2.598-2.581Z"></path><path d="M14 9.625a11.463 11.463 0 0 0-8.873 4.498l1.348 1.11A9.767 9.767 0 0 1 14 11.376a8.864 8.864 0 0 1 4.191 1.076L18 10.43a10.5 10.5 0 0 0-4-.805Z"></path><path d="M14 23.406a1.531 1.531 0 1 0 0-3.062 1.531 1.531 0 0 0 0 3.062Z"></path><path d="M19.329 6.072a4.585 4.585 0 0 1 2.905 0l-.744 7.64h-1.418l-.743-7.64Zm2.765 10.702a1.312 1.312 0 1 1-2.625 0 1.312 1.312 0 0 1 2.625 0Z"></path></svg>';
 
 class IconWifiAlertLarge extends HTMLElement {
     constructor () {

package/dist/IconWifiLarge.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--wifiLarge"><path d="M19.78 20.585a4.916 4.916 0 0 0-3.78-1.96 4.918 4.918 0 0 0-3.78 1.942L10.864 19.5A6.652 6.652 0 0 1 16 16.875a6.65 6.65 0 0 1 5.136 2.625l-1.356 1.085Z"></path><path d="M27.034 13.655A14.254 14.254 0 0 0 16 8.125a14.254 14.254 0 0 0-11.034 5.53L3.62 12.544a15.95 15.95 0 0 1 12.38-6.169 15.952 15.952 0 0 1 12.382 6.169l-1.347 1.111Z"></path><path d="M23.525 17.234A9.767 9.767 0 0 0 16 13.375a9.764 9.764 0 0 0-7.525 3.841l-1.348-1.094A11.463 11.463 0 0 1 16 11.625a11.461 11.461 0 0 1 8.872 4.48l-1.347 1.129Z"></path><path d="M16 25.406a1.531 1.531 0 1 0 0-3.062 1.531 1.531 0 0 0 0 3.062Z"></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--wifiLarge"><path d="M19.78 20.585a4.916 4.916 0 0 0-3.78-1.96 4.918 4.918 0 0 0-3.78 1.942L10.864 19.5A6.652 6.652 0 0 1 16 16.875a6.65 6.65 0 0 1 5.136 2.625l-1.356 1.085Z"></path><path d="M27.034 13.655A14.254 14.254 0 0 0 16 8.125a14.254 14.254 0 0 0-11.034 5.53L3.62 12.544a15.95 15.95 0 0 1 12.38-6.169 15.952 15.952 0 0 1 12.382 6.169l-1.347 1.111Z"></path><path d="M23.525 17.234A9.767 9.767 0 0 0 16 13.375a9.764 9.764 0 0 0-7.525 3.841l-1.348-1.094A11.463 11.463 0 0 1 16 11.625a11.461 11.461 0 0 1 8.872 4.48l-1.347 1.129Z"></path><path d="M16 25.406a1.531 1.531 0 1 0 0-3.062 1.531 1.531 0 0 0 0 3.062Z"></path></svg>';
 
 class IconWifiLarge extends HTMLElement {
     constructor () {

package/dist/IconWorld.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--world"><path d="M8 1.28a6.72 6.72 0 1 0 0 13.44A6.72 6.72 0 0 0 8 1.28Zm4.594 3.876c.206.346.377.713.507 1.094l-1.724 1.986V6.154l-1.12-.175a.386.386 0 0 1-.262-.175.543.543 0 0 1-.122-.429.367.367 0 0 1 .385-.245l2.336.026Zm-7-1.995v1.812l-1.488.813-.105.377-.875-.464A5.46 5.46 0 0 1 5.594 3.16Zm.455 5.495h.621l.586.49-.428 1.479a2.423 2.423 0 0 1-1.392-1.453l.613-.516ZM8 13.408A5.408 5.408 0 0 1 2.593 8c-.002-.35.034-.699.105-1.041l1.312.691c.122.227.288.426.49.586l-.446.377v.323c0 .097.114 2.345 3.019 3.194l.63.184 1.04-3.632-1.618-1.338H5.743a.569.569 0 0 1-.604-.368l.087-.306 1.68-.875V2.75h-.183A5.548 5.548 0 0 1 8 2.592a5.399 5.399 0 0 1 3.5 1.252h-1.242A1.636 1.636 0 0 0 8.595 5.12a1.811 1.811 0 0 0 .777 1.916c.197.123.419.204.65.237l.07 2.625 1.504.157L13.4 7.87a.963.963 0 0 1 0 .157A5.407 5.407 0 0 1 8 13.408Z"></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--world"><path d="M8 1.28a6.72 6.72 0 1 0 0 13.44A6.72 6.72 0 0 0 8 1.28Zm4.594 3.876c.206.346.377.713.507 1.094l-1.724 1.986V6.154l-1.12-.175a.386.386 0 0 1-.262-.175.543.543 0 0 1-.122-.429.367.367 0 0 1 .385-.245l2.336.026Zm-7-1.995v1.812l-1.488.813-.105.377-.875-.464A5.46 5.46 0 0 1 5.594 3.16Zm.455 5.495h.621l.586.49-.428 1.479a2.423 2.423 0 0 1-1.392-1.453l.613-.516ZM8 13.408A5.408 5.408 0 0 1 2.593 8c-.002-.35.034-.699.105-1.041l1.312.691c.122.227.288.426.49.586l-.446.377v.323c0 .097.114 2.345 3.019 3.194l.63.184 1.04-3.632-1.618-1.338H5.743a.569.569 0 0 1-.604-.368l.087-.306 1.68-.875V2.75h-.183A5.548 5.548 0 0 1 8 2.592a5.399 5.399 0 0 1 3.5 1.252h-1.242A1.636 1.636 0 0 0 8.595 5.12a1.811 1.811 0 0 0 .777 1.916c.197.123.419.204.65.237l.07 2.625 1.504.157L13.4 7.87a.963.963 0 0 1 0 .157A5.407 5.407 0 0 1 8 13.408Z"></path></svg>';
 
 class IconWorld extends HTMLElement {
     constructor () {

package/dist/IconWorldLarge.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--worldLarge"><path d="M16 3.811a12.25 12.25 0 1 0 0 24.5 12.25 12.25 0 0 0 0-24.5Zm7.551 6.598.727-.77a10.378 10.378 0 0 1 1.898 3.955l-4.06 4.375-.105-4.892-1.828-.288a1.156 1.156 0 0 1-.805-.499 1.426 1.426 0 0 1-.21-1.111 1.085 1.085 0 0 1 1.146-.805l3.237.035ZM11.88 6.375v3.841L8.842 11.87l-.306 1.103-2.161-1.13a10.5 10.5 0 0 1 5.504-5.468ZM16 26.5A10.5 10.5 0 0 1 5.5 16c.007-.844.112-1.684.315-2.502l2.756 1.452c.304.633.8 1.153 1.418 1.488l-1.182.988v.429c0 .175.21 4.375 5.723 5.985l.875.245 1.864-6.571-2.888-2.389h-2.625a1.557 1.557 0 0 1-1.627-1.076l.271-1.015 3.299-1.75V5.84A10.597 10.597 0 0 1 16 5.561c2.63-.001 5.161.993 7.087 2.783l-.297.315h-2.476a2.835 2.835 0 0 0-2.861 2.178 3.193 3.193 0 0 0 .49 2.486 2.912 2.912 0 0 0 1.977 1.233l.376.062.079 5.048 2.336.254 3.789-4.06v.166A10.5 10.5 0 0 1 16 26.5Zm-3.806-9.625h1.557l1.505 1.26-1.059 3.736c-2.694-1.067-3.394-2.887-3.57-3.692l1.567-1.304Z"></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--worldLarge"><path d="M16 3.811a12.25 12.25 0 1 0 0 24.5 12.25 12.25 0 0 0 0-24.5Zm7.551 6.598.727-.77a10.378 10.378 0 0 1 1.898 3.955l-4.06 4.375-.105-4.892-1.828-.288a1.156 1.156 0 0 1-.805-.499 1.426 1.426 0 0 1-.21-1.111 1.085 1.085 0 0 1 1.146-.805l3.237.035ZM11.88 6.375v3.841L8.842 11.87l-.306 1.103-2.161-1.13a10.5 10.5 0 0 1 5.504-5.468ZM16 26.5A10.5 10.5 0 0 1 5.5 16c.007-.844.112-1.684.315-2.502l2.756 1.452c.304.633.8 1.153 1.418 1.488l-1.182.988v.429c0 .175.21 4.375 5.723 5.985l.875.245 1.864-6.571-2.888-2.389h-2.625a1.557 1.557 0 0 1-1.627-1.076l.271-1.015 3.299-1.75V5.84A10.597 10.597 0 0 1 16 5.561c2.63-.001 5.161.993 7.087 2.783l-.297.315h-2.476a2.835 2.835 0 0 0-2.861 2.178 3.193 3.193 0 0 0 .49 2.486 2.912 2.912 0 0 0 1.977 1.233l.376.062.079 5.048 2.336.254 3.789-4.06v.166A10.5 10.5 0 0 1 16 26.5Zm-3.806-9.625h1.557l1.505 1.26-1.059 3.736c-2.694-1.067-3.394-2.887-3.57-3.692l1.567-1.304Z"></path></svg>';
 
 class IconWorldLarge extends HTMLElement {
     constructor () {

package/dist/IconWrap.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--wrap"><path d="M14.947 4.693a1.794 1.794 0 0 0-1.154-1.584 1.75 1.75 0 0 0-.98-1.759A1.75 1.75 0 0 0 11 1.604a1.75 1.75 0 0 0-1.181-.525 1.654 1.654 0 0 0-1.636 1.19c-.07.157-.131.317-.184.481L1.263 9.339a.665.665 0 0 0-.184.516.061.061 0 0 0 0 .044c.254 3.202 1.837 5.005 4.462 5.057a.647.647 0 0 0 .438-.175L13.1 8.28c.262-.075.507-.203.718-.376a1.53 1.53 0 0 0 .568-1.269 1.672 1.672 0 0 0-.14-.516 1.75 1.75 0 0 0 .7-1.426Zm-7.183.148v1.077c.052 1.295.087 2.143-.875 3.106-1.216 1.19-2.958.875-3.99.56L7.764 4.84Zm-2.45 8.803c-1.479-.123-2.406-1.068-2.774-2.8.68.227 1.392.348 2.109.359A4.374 4.374 0 0 0 7.808 9.96a3.981 3.981 0 0 0 1.294-2.791 6.248 6.248 0 0 0 2.136 1.059l-5.924 5.416Zm7.796-8.435a.665.665 0 0 0-.56.499.647.647 0 0 0 .28.7c.088.06.262.236.262.332 0 .096 0 .105-.14.193-.332.18-.722.22-1.085.113a4.533 4.533 0 0 1-2.79-1.828 7.21 7.21 0 0 1 .35-2.538c.104-.306.27-.289.332-.297a.551.551 0 0 1 .472.428.675.675 0 0 0 .534.508.647.647 0 0 0 .665-.298s.438-.656.875-.472c.438.184.14.875.14.875a.648.648 0 0 0 .3.778c.088.05.186.08.286.088.446 0 .613.263.621.473.01.21-.2.402-.542.446Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--wrap"><path d="M14.947 4.693a1.794 1.794 0 0 0-1.154-1.584 1.75 1.75 0 0 0-.98-1.759A1.75 1.75 0 0 0 11 1.604a1.75 1.75 0 0 0-1.181-.525 1.654 1.654 0 0 0-1.636 1.19c-.07.157-.131.317-.184.481L1.263 9.339a.665.665 0 0 0-.184.516.061.061 0 0 0 0 .044c.254 3.202 1.837 5.005 4.462 5.057a.647.647 0 0 0 .438-.175L13.1 8.28c.262-.075.507-.203.718-.376a1.53 1.53 0 0 0 .568-1.269 1.672 1.672 0 0 0-.14-.516 1.75 1.75 0 0 0 .7-1.426Zm-7.183.148v1.077c.052 1.295.087 2.143-.875 3.106-1.216 1.19-2.958.875-3.99.56L7.764 4.84Zm-2.45 8.803c-1.479-.123-2.406-1.068-2.774-2.8.68.227 1.392.348 2.109.359A4.374 4.374 0 0 0 7.808 9.96a3.981 3.981 0 0 0 1.294-2.791 6.248 6.248 0 0 0 2.136 1.059l-5.924 5.416Zm7.796-8.435a.665.665 0 0 0-.56.499.647.647 0 0 0 .28.7c.088.06.262.236.262.332 0 .096 0 .105-.14.193-.332.18-.722.22-1.085.113a4.533 4.533 0 0 1-2.79-1.828 7.21 7.21 0 0 1 .35-2.538c.104-.306.27-.289.332-.297a.551.551 0 0 1 .472.428.675.675 0 0 0 .534.508.647.647 0 0 0 .665-.298s.438-.656.875-.472c.438.184.14.875.14.875a.648.648 0 0 0 .3.778c.088.05.186.08.286.088.446 0 .613.263.621.473.01.21-.2.402-.542.446Z"></path></svg>';
 
 class IconWrap extends HTMLElement {
     constructor () {

package/dist/IconWrapLarge.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--wrapLarge"><path d="M29.615 9.543a3.133 3.133 0 0 0-2.327-2.88 3.132 3.132 0 0 0-1.663-3.42 3.238 3.238 0 0 0-3.5.7 3.177 3.177 0 0 0-2.345-1.208 2.8 2.8 0 0 0-2.853 2.083c-.113.35-.21.682-.297 1.023l-13.641 13.3a.874.874 0 0 0-.245.692c.463 6.22 3.5 9.703 8.522 9.808a.875.875 0 0 0 .586-.236L26.23 16.28a2.739 2.739 0 0 0 1.295-.604 2.485 2.485 0 0 0 .595-3.395 3.036 3.036 0 0 0 1.496-2.738ZM21.6 11.625c.63 0 1.041.123 1.155.306.114.184.061.823-.499 1.75a9.524 9.524 0 0 1-1.496-.875c.327-.385.607-.778.84-1.181Zm-1.286-1.234c-.252.46-.545.896-.875 1.304a6.404 6.404 0 0 1-1.488-2.17c.919-.612 2.24-.752 2.625-.455.193.14.088.656-.262 1.321Zm-4.13-1.671v3.229c.122 2.73.245 5.556-1.75 7.875a5.715 5.715 0 0 1-4.226 2.266h-.088c-2.231 0-4.261-1.47-5.25-2.319L16.184 8.72Zm-5.25 19.154c-3.868-.228-5.504-3.019-6.125-5.959a9.528 9.528 0 0 0 5.328 1.908h.14a7.395 7.395 0 0 0 5.53-2.88c2.188-2.554 2.267-5.52 2.17-8.233.308.309.633.6.972.875a12.491 12.491 0 0 0 3.298 2.012 9.858 9.858 0 0 0 1.532.517l-12.845 11.76Zm15.487-16.87a.874.874 0 0 0-.7 1.184.874.874 0 0 0 .324.408c.365.235.63.596.744 1.015a.997.997 0 0 1-.429.726c-.341.307-1.225.394-2.468 0 .753-1.347.875-2.467.36-3.325a2.54 2.54 0 0 0-1.908-1.12 2.135 2.135 0 0 0-.692-2.248 3.885 3.885 0 0 0-3.578-.158c.052-.341.113-.682.192-1.015.079-.332.193-.743.324-1.128a1.094 1.094 0 0 1 1.102-.875 1.514 1.514 0 0 1 1.357 1.198.875.875 0 0 0 1.601.272s1.041-1.637 2.258-1.112c1.067.473.516 2.24.507 2.258a.876.876 0 0 0 .788 1.146c1.19.061 1.636.77 1.662 1.365.026.595-.341 1.269-1.444 1.409Z"></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--wrapLarge"><path d="M29.615 9.543a3.133 3.133 0 0 0-2.327-2.88 3.132 3.132 0 0 0-1.663-3.42 3.238 3.238 0 0 0-3.5.7 3.177 3.177 0 0 0-2.345-1.208 2.8 2.8 0 0 0-2.853 2.083c-.113.35-.21.682-.297 1.023l-13.641 13.3a.874.874 0 0 0-.245.692c.463 6.22 3.5 9.703 8.522 9.808a.875.875 0 0 0 .586-.236L26.23 16.28a2.739 2.739 0 0 0 1.295-.604 2.485 2.485 0 0 0 .595-3.395 3.036 3.036 0 0 0 1.496-2.738ZM21.6 11.625c.63 0 1.041.123 1.155.306.114.184.061.823-.499 1.75a9.524 9.524 0 0 1-1.496-.875c.327-.385.607-.778.84-1.181Zm-1.286-1.234c-.252.46-.545.896-.875 1.304a6.404 6.404 0 0 1-1.488-2.17c.919-.612 2.24-.752 2.625-.455.193.14.088.656-.262 1.321Zm-4.13-1.671v3.229c.122 2.73.245 5.556-1.75 7.875a5.715 5.715 0 0 1-4.226 2.266h-.088c-2.231 0-4.261-1.47-5.25-2.319L16.184 8.72Zm-5.25 19.154c-3.868-.228-5.504-3.019-6.125-5.959a9.528 9.528 0 0 0 5.328 1.908h.14a7.395 7.395 0 0 0 5.53-2.88c2.188-2.554 2.267-5.52 2.17-8.233.308.309.633.6.972.875a12.491 12.491 0 0 0 3.298 2.012 9.858 9.858 0 0 0 1.532.517l-12.845 11.76Zm15.487-16.87a.874.874 0 0 0-.7 1.184.874.874 0 0 0 .324.408c.365.235.63.596.744 1.015a.997.997 0 0 1-.429.726c-.341.307-1.225.394-2.468 0 .753-1.347.875-2.467.36-3.325a2.54 2.54 0 0 0-1.908-1.12 2.135 2.135 0 0 0-.692-2.248 3.885 3.885 0 0 0-3.578-.158c.052-.341.113-.682.192-1.015.079-.332.193-.743.324-1.128a1.094 1.094 0 0 1 1.102-.875 1.514 1.514 0 0 1 1.357 1.198.875.875 0 0 0 1.601.272s1.041-1.637 2.258-1.112c1.067.473.516 2.24.507 2.258a.876.876 0 0 0 .788 1.146c1.19.061 1.636.77 1.662 1.365.026.595-.341 1.269-1.444 1.409Z"></path></svg>';
 
 class IconWrapLarge extends HTMLElement {
     constructor () {

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

package/icons/IconAlcoholFilled.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--alcoholFilled"><path d="M6.396 5.28V2.576c0-.419-.17-.82-.47-1.115A1.623 1.623 0 0 0 4.788 1h-.68c-.426 0-.834.166-1.136.462-.301.295-.47.696-.47 1.115v2.702a2.111 2.111 0 0 1-.533 1.424 4.668 4.668 0 0 0-.964 3.08v3.604c-.015.401.132.792.409 1.087.277.295.66.471 1.07.49h3.93a1.565 1.565 0 0 0 1.069-.49c.277-.295.424-.686.409-1.087V9.784a4.613 4.613 0 0 0-.918-3.054 2.113 2.113 0 0 1-.579-1.45ZM5.02 5.026v.252c-.008.797.268 1.571.78 2.19.161.225.302.463.423.711H2.677c.124-.248.268-.487.432-.712A3.427 3.427 0 0 0 3.88 5.28v-.225l1.139-.027Z"></path><path d="M8.6 3.081v4c0 .713.249 1.405.705 1.96a3.196 3.196 0 0 0 1.802 1.094v3.514h-1.46V15h4.297v-1.351h-1.46v-3.514a3.205 3.205 0 0 0 1.806-1.093 3.098 3.098 0 0 0 .71-1.96v-4H8.6Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--alcoholFilled"><path d="M6.396 5.28V2.576c0-.419-.17-.82-.47-1.115A1.623 1.623 0 0 0 4.788 1h-.68c-.426 0-.834.166-1.136.462-.301.295-.47.696-.47 1.115v2.702a2.111 2.111 0 0 1-.533 1.424 4.668 4.668 0 0 0-.964 3.08v3.604c-.015.401.132.792.409 1.087.277.295.66.471 1.07.49h3.93a1.565 1.565 0 0 0 1.069-.49c.277-.295.424-.686.409-1.087V9.784a4.613 4.613 0 0 0-.918-3.054 2.113 2.113 0 0 1-.579-1.45ZM5.02 5.026v.252c-.008.797.268 1.571.78 2.19.161.225.302.463.423.711H2.677c.124-.248.268-.487.432-.712A3.427 3.427 0 0 0 3.88 5.28v-.225l1.139-.027Z"></path><path d="M8.6 3.081v4c0 .713.249 1.405.705 1.96a3.196 3.196 0 0 0 1.802 1.094v3.514h-1.46V15h4.297v-1.351h-1.46v-3.514a3.205 3.205 0 0 0 1.806-1.093 3.098 3.098 0 0 0 .71-1.96v-4H8.6Z"></path></svg>';
 
 export class IconAlcoholFilled extends HTMLElement {
     constructor () {

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

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

package/icons/IconAlertCircle.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--alertCircle"><path d="M8 14.781A6.782 6.782 0 1 1 14.781 8 6.79 6.79 0 0 1 8 14.781Zm0-12.25A5.469 5.469 0 1 0 8 13.47 5.469 5.469 0 0 0 8 2.53Z"></path><path d="M7.055 4.631a3.5 3.5 0 0 1 1.89 0l-.481 4.244h-.928l-.481-4.244Zm1.82 5.994a.875.875 0 1 1-1.75 0 .875.875 0 0 1 1.75 0Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--alertCircle"><path d="M8 14.781A6.782 6.782 0 1 1 14.781 8 6.79 6.79 0 0 1 8 14.781Zm0-12.25A5.469 5.469 0 1 0 8 13.47 5.469 5.469 0 0 0 8 2.53Z"></path><path d="M7.055 4.631a3.5 3.5 0 0 1 1.89 0l-.481 4.244h-.928l-.481-4.244Zm1.82 5.994a.875.875 0 1 1-1.75 0 .875.875 0 0 1 1.75 0Z"></path></svg>';
 
 export class IconAlertCircle extends HTMLElement {
     constructor () {

package/icons/IconAlertCircleFilled.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--alertCircleFilled"><path d="M8 1.219A6.781 6.781 0 1 0 14.781 8 6.79 6.79 0 0 0 8 1.219ZM8 11.5a.875.875 0 1 1 0-1.75.875.875 0 0 1 0 1.75Zm.464-2.625h-.928l-.481-4.244a3.5 3.5 0 0 1 1.89 0l-.481 4.244Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--alertCircleFilled"><path d="M8 1.219A6.781 6.781 0 1 0 14.781 8 6.79 6.79 0 0 0 8 1.219ZM8 11.5a.875.875 0 1 1 0-1.75.875.875 0 0 1 0 1.75Zm.464-2.625h-.928l-.481-4.244a3.5 3.5 0 0 1 1.89 0l-.481 4.244Z"></path></svg>';
 
 export class IconAlertCircleFilled extends HTMLElement {
     constructor () {

package/icons/IconAlertCircleFilledLarge.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--alertCircleFilledLarge"><path d="M16 3.75a12.25 12.25 0 1 0 0 24.5 12.25 12.25 0 0 0 0-24.5Zm-1.313 17.063a1.313 1.313 0 1 1 2.626 0 1.313 1.313 0 0 1-2.625 0Zm2.022-3.063H15.29l-.744-7.639a4.586 4.586 0 0 1 2.905 0l-.743 7.639Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--alertCircleFilledLarge"><path d="M16 3.75a12.25 12.25 0 1 0 0 24.5 12.25 12.25 0 0 0 0-24.5Zm-1.313 17.063a1.313 1.313 0 1 1 2.626 0 1.313 1.313 0 0 1-2.625 0Zm2.022-3.063H15.29l-.744-7.639a4.586 4.586 0 0 1 2.905 0l-.743 7.639Z"></path></svg>';
 
 export class IconAlertCircleFilledLarge extends HTMLElement {
     constructor () {

package/icons/IconAlertCircleLarge.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--alertCircleLarge"><path d="M16 28.25a12.25 12.25 0 1 1 0-24.5 12.25 12.25 0 0 1 0 24.5ZM16 5.5a10.5 10.5 0 1 0 0 21 10.5 10.5 0 0 0 0-21Z"></path><path d="M14.547 10.111a4.584 4.584 0 0 1 2.905 0l-.743 7.639H15.29l-.744-7.639Zm2.765 10.701a1.313 1.313 0 1 1-2.625 0 1.313 1.313 0 0 1 2.626 0Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--alertCircleLarge"><path d="M16 28.25a12.25 12.25 0 1 1 0-24.5 12.25 12.25 0 0 1 0 24.5ZM16 5.5a10.5 10.5 0 1 0 0 21 10.5 10.5 0 0 0 0-21Z"></path><path d="M14.547 10.111a4.584 4.584 0 0 1 2.905 0l-.743 7.639H15.29l-.744-7.639Zm2.765 10.701a1.313 1.313 0 1 1-2.625 0 1.313 1.313 0 0 1 2.626 0Z"></path></svg>';
 
 export class IconAlertCircleLarge extends HTMLElement {
     constructor () {

package/icons/IconAlertTriangle.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--alertTriangle"><path d="M8.656 5.375H7.344V8h1.312V5.375Z"></path><path d="M8 10.625a.875.875 0 1 0 0-1.75.875.875 0 0 0 0 1.75Z"></path><path d="M13.408 13.031H2.591a1.496 1.496 0 0 1-1.33-.796 1.593 1.593 0 0 1 .044-1.61l5.408-8.662A1.505 1.505 0 0 1 8 1.219a1.505 1.505 0 0 1 1.286.726l5.408 8.68a1.593 1.593 0 0 1 0 1.627 1.496 1.496 0 0 1-1.287.78ZM8 2.531a.192.192 0 0 0-.175.105l-5.408 8.671a.297.297 0 0 0 0 .298.2.2 0 0 0 .184.114h10.806a.2.2 0 0 0 .184-.114.297.297 0 0 0 0-.298l-5.416-8.67A.192.192 0 0 0 8 2.53Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--alertTriangle"><path d="M8.656 5.375H7.344V8h1.312V5.375Z"></path><path d="M8 10.625a.875.875 0 1 0 0-1.75.875.875 0 0 0 0 1.75Z"></path><path d="M13.408 13.031H2.591a1.496 1.496 0 0 1-1.33-.796 1.593 1.593 0 0 1 .044-1.61l5.408-8.662A1.505 1.505 0 0 1 8 1.219a1.505 1.505 0 0 1 1.286.726l5.408 8.68a1.593 1.593 0 0 1 0 1.627 1.496 1.496 0 0 1-1.287.78ZM8 2.531a.192.192 0 0 0-.175.105l-5.408 8.671a.297.297 0 0 0 0 .298.2.2 0 0 0 .184.114h10.806a.2.2 0 0 0 .184-.114.297.297 0 0 0 0-.298l-5.416-8.67A.192.192 0 0 0 8 2.53Z"></path></svg>';
 
 export class IconAlertTriangle extends HTMLElement {
     constructor () {

package/icons/IconAlertTriangleFilled.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--alertTriangleFilled"><path d="m14.694 10.625-5.408-8.68a1.505 1.505 0 0 0-2.572 0l-5.408 8.68a1.592 1.592 0 0 0 0 1.627 1.497 1.497 0 0 0 1.33.797h10.771a1.497 1.497 0 0 0 1.33-.796 1.592 1.592 0 0 0-.043-1.628Zm-6.694 0a.875.875 0 1 1 0-1.75.875.875 0 0 1 0 1.75ZM7.344 8V5.375h1.312V8H7.344Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--alertTriangleFilled"><path d="m14.694 10.625-5.408-8.68a1.505 1.505 0 0 0-2.572 0l-5.408 8.68a1.592 1.592 0 0 0 0 1.627 1.497 1.497 0 0 0 1.33.797h10.771a1.497 1.497 0 0 0 1.33-.796 1.592 1.592 0 0 0-.043-1.628Zm-6.694 0a.875.875 0 1 1 0-1.75.875.875 0 0 1 0 1.75ZM7.344 8V5.375h1.312V8H7.344Z"></path></svg>';
 
 export class IconAlertTriangleFilled extends HTMLElement {
     constructor () {

package/icons/IconAlertTriangleFilledLarge.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--alertTriangleFilledLarge"><path d="m28.582 21.731-10.5-16.817a2.432 2.432 0 0 0-4.147 0L3.435 21.73a2.573 2.573 0 0 0-.07 2.625A2.415 2.415 0 0 0 5.5 25.625h21a2.415 2.415 0 0 0 2.135-1.277 2.573 2.573 0 0 0-.053-2.617ZM16 21.906a1.53 1.53 0 1 1 0-3.061 1.53 1.53 0 0 1 0 3.061Zm.875-11.156v6.125h-1.75V10.75h1.75Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--alertTriangleFilledLarge"><path d="m28.582 21.731-10.5-16.817a2.432 2.432 0 0 0-4.147 0L3.435 21.73a2.573 2.573 0 0 0-.07 2.625A2.415 2.415 0 0 0 5.5 25.625h21a2.415 2.415 0 0 0 2.135-1.277 2.573 2.573 0 0 0-.053-2.617ZM16 21.906a1.53 1.53 0 1 1 0-3.061 1.53 1.53 0 0 1 0 3.061Zm.875-11.156v6.125h-1.75V10.75h1.75Z"></path></svg>';
 
 export class IconAlertTriangleFilledLarge extends HTMLElement {
     constructor () {