@justeattakeaway/pie-icons-webc 0.3.0 → 0.4.0

package/dist/IconFlagUnitedStates.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--unitedStates"><g clip-path="url(#prefix__clip0_3446_3207)"><path fill="#D80027" d="M7.893 2.95v1.123h5.902a7.06 7.06 0 0 0-.947-1.122H7.893Z"></path><path fill="#D80027" d="M7.893 5.195v1.122h6.903a6.947 6.947 0 0 0-.382-1.122h-6.52Z"></path><path fill="#D80027" d="M8 15a6.968 6.968 0 0 0 3.307-.83H4.694A6.969 6.969 0 0 0 8 15Z"></path><path fill="#D80027" d="M3.152 13.049h9.696c.354-.34.672-.716.948-1.122H2.205c.276.406.593.782.947 1.122Z"></path><path fill="#D80027" d="M11.307 1.829A6.969 6.969 0 0 0 8 1l-.107.001v.828h3.414Z"></path><path fill="#D80027" d="M14.978 7.439H7.893V8.56h7.085a6.936 6.936 0 0 0 0-1.122Z"></path><path fill="#D80027" d="M1.585 10.805h12.83a6.95 6.95 0 0 0 .38-1.122H1.206c.094.384.222.76.38 1.122Z"></path><path fill="#fff" d="M3.813 13.61c.279.209.573.396.88.56h6.614a6.994 6.994 0 0 0 1.541-1.121H3.152c.209.2.43.388.66.56Z"></path><path fill="#fff" d="M1.861 11.366c.106.193.22.38.344.56h11.59a6.99 6.99 0 0 0 .62-1.121H1.584c.084.191.176.379.276.56Z"></path><path fill="#fff" d="M1.09 9.122c.03.19.068.377.114.56h13.592a6.901 6.901 0 0 0 .182-1.122H1.023c.015.19.037.377.067.562Z"></path><path fill="#fff" d="M7.893 2.95h4.955a6.993 6.993 0 0 0-1.541-1.121H7.893V2.95Z"></path><path fill="#fff" d="M7.893 7.439h7.085a6.916 6.916 0 0 0-.182-1.122H7.893v1.122Z"></path><path fill="#fff" d="M7.893 5.195h6.521a6.998 6.998 0 0 0-.619-1.122H7.893v1.122Z"></path><path fill="#0052B4" d="M7.893 8.56V1.002a7.047 7.047 0 0 0-.913.073l-.021.003c-.092.014-.184.03-.274.047l.098.302h.675l-.546.396.04.122.169.52-.546-.397-.546.397.169-.52.04-.122-.546-.396h.675l.082-.253c-.398.09-.787.215-1.163.373l-.002.002a5.998 5.998 0 0 0-.381.175 7.193 7.193 0 0 0-.622.347l.17.523h.673l-.546.397.209.641-.546-.396-.545.396.168-.519.04-.122-.44-.32c-.045.038-.09.076-.135.116-.05.045-.101.09-.15.138h-.007l-.002.008-.02.019a7.057 7.057 0 0 0-.683.76H2.45l.005.015-.015.02h.35l-.545.397.208.641-.48-.348a6.296 6.296 0 0 0-.29.542l-.005.011a6.937 6.937 0 0 0-.408 1.077h.404l.208-.641.209.641h.674l-.545.397.04.123.169.519-.546-.397-.546.397.169-.52.04-.122-.32-.232c-.007.028-.014.057-.023.086a6.919 6.919 0 0 0-.195 1.32H1l.008.006a7.41 7.41 0 0 0 .015.918h6.87ZM6.366 3.747l.208-.641.209.641h.675l-.546.397.04.122.169.519-.546-.396-.546.396.169-.519.04-.122-.546-.397h.674Zm-.026 2.32.208-.64.209.64h.673l-.544.397.208.642-.546-.397-.545.397.208-.642-.546-.396h.675ZM4.033 4.914l.209-.641.208.641h.674l-.546.397.209.64-.546-.395-.545.396.208-.641-.546-.397h.675Zm-.026 2.32.209-.64.208.64h.673l-.544.397.208.641-.545-.396-.546.396.209-.64-.546-.397h.674Z"></path><path fill="#0052B4" d="m4.183 2.132-.01.007-.096.063a7.627 7.627 0 0 0-.522.39h.478l.15-.46Z"></path><path fill="#fff" d="m5.692 1.426.546.396-.04.122-.169.52.546-.397.546.397-.169-.52-.04-.122.546-.396h-.675l-.098-.302c-.08.015-.158.031-.236.049l-.082.253h-.675Z"></path><path fill="#fff" d="m6.003 7.105.545-.397.546.397-.208-.642.545-.396h-.674l-.209-.642-.208.642h-.675l.546.396-.208.642Z"></path><path fill="#fff" d="m6.198 4.265-.169.519.546-.396.546.396-.169-.519-.04-.122.546-.397h-.675l-.209-.641-.208.641h-.674l.546.397-.04.122Z"></path><path fill="#fff" d="m1.506 6.586-.169.519.546-.397.546.397-.169-.52-.04-.122.546-.396h-.675l-.208-.642-.208.642H1.27a8.04 8.04 0 0 0-.045.164l.32.232-.04.123Z"></path><path fill="#fff" d="m2.286 4.265-.04-.122.546-.397h-.35a7.17 7.17 0 0 0-.237.327l-.068.102a6.57 6.57 0 0 0-.161.26l.477.35-.167-.52Z"></path><path fill="#fff" d="m3.864 3.112-.168.52.545-.397.546.396-.209-.641.546-.397h-.673l-.17-.523-.003.002-.095.06-.149.46h-.478l-.091.077.44.32-.04.123Z"></path><path fill="#fff" d="m3.67 8.271.546-.396.545.396-.208-.64.546-.397h-.675l-.208-.642-.209.642h-.674l.546.396-.209.641Z"></path><path fill="#fff" d="m3.696 5.95.545-.395.546.396-.209-.641.546-.397H4.45l-.208-.641-.209.641h-.675l.546.397-.208.64Z"></path></g><defs><clipPath id="prefix__clip0_3446_3207"><rect width="14" height="14" fill="#fff" 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--unitedStates"><g clip-path="url(#prefix__clip0_3446_3207)"><path fill="#D80027" d="M7.893 2.95v1.123h5.902a7.06 7.06 0 0 0-.947-1.122H7.893Z"></path><path fill="#D80027" d="M7.893 5.195v1.122h6.903a6.947 6.947 0 0 0-.382-1.122h-6.52Z"></path><path fill="#D80027" d="M8 15a6.968 6.968 0 0 0 3.307-.83H4.694A6.969 6.969 0 0 0 8 15Z"></path><path fill="#D80027" d="M3.152 13.049h9.696c.354-.34.672-.716.948-1.122H2.205c.276.406.593.782.947 1.122Z"></path><path fill="#D80027" d="M11.307 1.829A6.969 6.969 0 0 0 8 1l-.107.001v.828h3.414Z"></path><path fill="#D80027" d="M14.978 7.439H7.893V8.56h7.085a6.936 6.936 0 0 0 0-1.122Z"></path><path fill="#D80027" d="M1.585 10.805h12.83a6.95 6.95 0 0 0 .38-1.122H1.206c.094.384.222.76.38 1.122Z"></path><path fill="#fff" d="M3.813 13.61c.279.209.573.396.88.56h6.614a6.994 6.994 0 0 0 1.541-1.121H3.152c.209.2.43.388.66.56Z"></path><path fill="#fff" d="M1.861 11.366c.106.193.22.38.344.56h11.59a6.99 6.99 0 0 0 .62-1.121H1.584c.084.191.176.379.276.56Z"></path><path fill="#fff" d="M1.09 9.122c.03.19.068.377.114.56h13.592a6.901 6.901 0 0 0 .182-1.122H1.023c.015.19.037.377.067.562Z"></path><path fill="#fff" d="M7.893 2.95h4.955a6.993 6.993 0 0 0-1.541-1.121H7.893V2.95Z"></path><path fill="#fff" d="M7.893 7.439h7.085a6.916 6.916 0 0 0-.182-1.122H7.893v1.122Z"></path><path fill="#fff" d="M7.893 5.195h6.521a6.998 6.998 0 0 0-.619-1.122H7.893v1.122Z"></path><path fill="#0052B4" d="M7.893 8.56V1.002a7.047 7.047 0 0 0-.913.073l-.021.003c-.092.014-.184.03-.274.047l.098.302h.675l-.546.396.04.122.169.52-.546-.397-.546.397.169-.52.04-.122-.546-.396h.675l.082-.253c-.398.09-.787.215-1.163.373l-.002.002a5.998 5.998 0 0 0-.381.175 7.193 7.193 0 0 0-.622.347l.17.523h.673l-.546.397.209.641-.546-.396-.545.396.168-.519.04-.122-.44-.32c-.045.038-.09.076-.135.116-.05.045-.101.09-.15.138h-.007l-.002.008-.02.019a7.057 7.057 0 0 0-.683.76H2.45l.005.015-.015.02h.35l-.545.397.208.641-.48-.348a6.296 6.296 0 0 0-.29.542l-.005.011a6.937 6.937 0 0 0-.408 1.077h.404l.208-.641.209.641h.674l-.545.397.04.123.169.519-.546-.397-.546.397.169-.52.04-.122-.32-.232c-.007.028-.014.057-.023.086a6.919 6.919 0 0 0-.195 1.32H1l.008.006a7.41 7.41 0 0 0 .015.918h6.87ZM6.366 3.747l.208-.641.209.641h.675l-.546.397.04.122.169.519-.546-.396-.546.396.169-.519.04-.122-.546-.397h.674Zm-.026 2.32.208-.64.209.64h.673l-.544.397.208.642-.546-.397-.545.397.208-.642-.546-.396h.675ZM4.033 4.914l.209-.641.208.641h.674l-.546.397.209.64-.546-.395-.545.396.208-.641-.546-.397h.675Zm-.026 2.32.209-.64.208.64h.673l-.544.397.208.641-.545-.396-.546.396.209-.64-.546-.397h.674Z"></path><path fill="#0052B4" d="m4.183 2.132-.01.007-.096.063a7.627 7.627 0 0 0-.522.39h.478l.15-.46Z"></path><path fill="#fff" d="m5.692 1.426.546.396-.04.122-.169.52.546-.397.546.397-.169-.52-.04-.122.546-.396h-.675l-.098-.302c-.08.015-.158.031-.236.049l-.082.253h-.675Z"></path><path fill="#fff" d="m6.003 7.105.545-.397.546.397-.208-.642.545-.396h-.674l-.209-.642-.208.642h-.675l.546.396-.208.642Z"></path><path fill="#fff" d="m6.198 4.265-.169.519.546-.396.546.396-.169-.519-.04-.122.546-.397h-.675l-.209-.641-.208.641h-.674l.546.397-.04.122Z"></path><path fill="#fff" d="m1.506 6.586-.169.519.546-.397.546.397-.169-.52-.04-.122.546-.396h-.675l-.208-.642-.208.642H1.27a8.04 8.04 0 0 0-.045.164l.32.232-.04.123Z"></path><path fill="#fff" d="m2.286 4.265-.04-.122.546-.397h-.35a7.17 7.17 0 0 0-.237.327l-.068.102a6.57 6.57 0 0 0-.161.26l.477.35-.167-.52Z"></path><path fill="#fff" d="m3.864 3.112-.168.52.545-.397.546.396-.209-.641.546-.397h-.673l-.17-.523-.003.002-.095.06-.149.46h-.478l-.091.077.44.32-.04.123Z"></path><path fill="#fff" d="m3.67 8.271.546-.396.545.396-.208-.64.546-.397h-.675l-.208-.642-.209.642h-.674l.546.396-.209.641Z"></path><path fill="#fff" d="m3.696 5.95.545-.395.546.396-.209-.641.546-.397H4.45l-.208-.641-.209.641h-.675l.546.397-.208.64Z"></path></g><defs><clipPath id="prefix__clip0_3446_3207"><rect width="14" height="14" fill="#fff" transform="translate(1 1)"></rect></clipPath></defs></svg>';
 
 class IconFlagUnitedStates extends HTMLElement {
     constructor () {

package/dist/IconFlowers.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--flowers"><path d="m9.732 11.561 2.783-6.737h-2.004c.289-.438.455-.963.455-1.531 0-.683-.376-1.304-.98-1.62a1.835 1.835 0 0 0-1.89.115l-.026.017-.018-.017a1.835 1.835 0 0 0-1.89-.114c-.603.315-.98.936-.98 1.619 0 .218.035.437.08.647-.036.018-.07.026-.097.044L3.179 5.043l3.202 6.545-.359.918a1.62 1.62 0 0 0 .175 1.505c.307.438.805.709 1.34.709H8.63c.542 0 1.05-.271 1.347-.726.298-.455.35-1.024.14-1.523l-.385-.91Zm-1.146-.656H8.42l-.674-4.742h.175c.053 0 .105.017.158.017.061 0 .113-.017.175-.017l2.292-.018-1.96 4.76ZM6.775 2.838a.522.522 0 0 1 .245-.062c.087 0 .184.027.289.097l.77.525.77-.525a.512.512 0 0 1 .533-.035c.08.043.28.175.28.455 0 .805-.612 1.47-1.4 1.557H7.93a1.392 1.392 0 0 1-.429-.096 1.605 1.605 0 0 0-.814-.849c-.017-.009-.043-.009-.06-.017a1.502 1.502 0 0 1-.115-.595c0-.28.193-.412.28-.455h-.017ZM5.83 5.12h.017c.15.175.307.333.49.473l.587 4.121L4.92 5.611l.919-.49H5.83Zm3.045 8.146a.3.3 0 0 1-.254.14H7.527a.318.318 0 0 1-.253-.13.31.31 0 0 1-.035-.28l.297-.77h1.041l.324.76a.334.334 0 0 1-.026.29v-.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--flowers"><path d="m9.732 11.561 2.783-6.737h-2.004c.289-.438.455-.963.455-1.531 0-.683-.376-1.304-.98-1.62a1.835 1.835 0 0 0-1.89.115l-.026.017-.018-.017a1.835 1.835 0 0 0-1.89-.114c-.603.315-.98.936-.98 1.619 0 .218.035.437.08.647-.036.018-.07.026-.097.044L3.179 5.043l3.202 6.545-.359.918a1.62 1.62 0 0 0 .175 1.505c.307.438.805.709 1.34.709H8.63c.542 0 1.05-.271 1.347-.726.298-.455.35-1.024.14-1.523l-.385-.91Zm-1.146-.656H8.42l-.674-4.742h.175c.053 0 .105.017.158.017.061 0 .113-.017.175-.017l2.292-.018-1.96 4.76ZM6.775 2.838a.522.522 0 0 1 .245-.062c.087 0 .184.027.289.097l.77.525.77-.525a.512.512 0 0 1 .533-.035c.08.043.28.175.28.455 0 .805-.612 1.47-1.4 1.557H7.93a1.392 1.392 0 0 1-.429-.096 1.605 1.605 0 0 0-.814-.849c-.017-.009-.043-.009-.06-.017a1.502 1.502 0 0 1-.115-.595c0-.28.193-.412.28-.455h-.017ZM5.83 5.12h.017c.15.175.307.333.49.473l.587 4.121L4.92 5.611l.919-.49H5.83Zm3.045 8.146a.3.3 0 0 1-.254.14H7.527a.318.318 0 0 1-.253-.13.31.31 0 0 1-.035-.28l.297-.77h1.041l.324.76a.334.334 0 0 1-.026.29v-.01Z"></path></svg>';
 
 class IconFlowers extends HTMLElement {
     constructor () {

package/dist/IconFlowersLarge.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--flowersLarge"><path d="M22.554 11.791a3.232 3.232 0 0 0 1.04-.691 2.075 2.075 0 0 0 .517-2.1 2.1 2.1 0 0 0-1.514-1.418A2.072 2.072 0 0 0 21.19 6.07a2.05 2.05 0 0 0-1.427.087c.08-.297.132-.612.132-.936 0-.875-.482-1.671-1.26-2.083a2.347 2.347 0 0 0-2.424.14 2.344 2.344 0 0 0-2.424-.14 2.349 2.349 0 0 0-1.26 2.083c0 .122.026.236.035.35a2.04 2.04 0 0 0-.971.052 2.072 2.072 0 0 0-1.409 1.514c-.717.166-1.295.7-1.514 1.418a2.094 2.094 0 0 0 .517 2.1c.13.131.27.245.42.35L7.722 12.01l5.74 11.751-.7 1.794a2.63 2.63 0 0 0 2.45 3.579H17.2c.883 0 1.697-.438 2.187-1.173.49-.735.578-1.662.228-2.476l-.744-1.767 4.926-11.927h-1.251.009ZM14.52 9.22a.584.584 0 0 1 .228-.237.593.593 0 0 1 .262-.07.54.54 0 0 1 .315.105l.98.674.971-.674a.551.551 0 0 1 .578-.035.546.546 0 0 1 .297.49 1.852 1.852 0 0 1-1.846 1.847 1.852 1.852 0 0 1-1.846-1.847c0-.035.009-.06.017-.087.018-.053.035-.114.053-.166h-.009Zm5.801-1.374a.335.335 0 0 1 .237-.105c.043 0 .078 0 .105.017.07.027.2.088.236.263l.201 1.076 1.076.201a.332.332 0 0 1 .263.237.313.313 0 0 1-.088.341 1.436 1.436 0 0 1-2.03-2.03ZM14.61 4.704a.655.655 0 0 1 .288-.07.59.59 0 0 1 .333.105l.989.682.988-.682a.588.588 0 0 1 .622-.035.588.588 0 0 1 .323.533 1.925 1.925 0 1 1-3.85 0 .6.6 0 0 1 .324-.533h-.017Zm-4.262 4.375a.345.345 0 0 1 .263-.237l1.076-.2.201-1.077a.332.332 0 0 1 .237-.263c.026 0 .06-.017.105-.017.07 0 .157.026.236.105a1.448 1.448 0 0 1 .394 1.295 3.417 3.417 0 0 0-.088.28c-.07.166-.175.324-.306.455-.543.542-1.488.542-2.03 0a.35.35 0 0 1-.088-.341Zm-.297 3.675 1.916-1.024a.877.877 0 0 1 .849-.061.87.87 0 0 1 .499.7l1.4 9.922-4.664-9.537Zm7.892 14.236a.87.87 0 0 1-.726.394H15.23a.847.847 0 0 1-.718-.385.87.87 0 0 1-.096-.814l.621-1.592h2.32l.664 1.575a.862.862 0 0 1-.079.822Zm-.595-4.147h-.796l-1.304-9.25 5.933-.034-3.833 9.284Z"></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--flowersLarge"><path d="M22.554 11.791a3.232 3.232 0 0 0 1.04-.691 2.075 2.075 0 0 0 .517-2.1 2.1 2.1 0 0 0-1.514-1.418A2.072 2.072 0 0 0 21.19 6.07a2.05 2.05 0 0 0-1.427.087c.08-.297.132-.612.132-.936 0-.875-.482-1.671-1.26-2.083a2.347 2.347 0 0 0-2.424.14 2.344 2.344 0 0 0-2.424-.14 2.349 2.349 0 0 0-1.26 2.083c0 .122.026.236.035.35a2.04 2.04 0 0 0-.971.052 2.072 2.072 0 0 0-1.409 1.514c-.717.166-1.295.7-1.514 1.418a2.094 2.094 0 0 0 .517 2.1c.13.131.27.245.42.35L7.722 12.01l5.74 11.751-.7 1.794a2.63 2.63 0 0 0 2.45 3.579H17.2c.883 0 1.697-.438 2.187-1.173.49-.735.578-1.662.228-2.476l-.744-1.767 4.926-11.927h-1.251.009ZM14.52 9.22a.584.584 0 0 1 .228-.237.593.593 0 0 1 .262-.07.54.54 0 0 1 .315.105l.98.674.971-.674a.551.551 0 0 1 .578-.035.546.546 0 0 1 .297.49 1.852 1.852 0 0 1-1.846 1.847 1.852 1.852 0 0 1-1.846-1.847c0-.035.009-.06.017-.087.018-.053.035-.114.053-.166h-.009Zm5.801-1.374a.335.335 0 0 1 .237-.105c.043 0 .078 0 .105.017.07.027.2.088.236.263l.201 1.076 1.076.201a.332.332 0 0 1 .263.237.313.313 0 0 1-.088.341 1.436 1.436 0 0 1-2.03-2.03ZM14.61 4.704a.655.655 0 0 1 .288-.07.59.59 0 0 1 .333.105l.989.682.988-.682a.588.588 0 0 1 .622-.035.588.588 0 0 1 .323.533 1.925 1.925 0 1 1-3.85 0 .6.6 0 0 1 .324-.533h-.017Zm-4.262 4.375a.345.345 0 0 1 .263-.237l1.076-.2.201-1.077a.332.332 0 0 1 .237-.263c.026 0 .06-.017.105-.017.07 0 .157.026.236.105a1.448 1.448 0 0 1 .394 1.295 3.417 3.417 0 0 0-.088.28c-.07.166-.175.324-.306.455-.543.542-1.488.542-2.03 0a.35.35 0 0 1-.088-.341Zm-.297 3.675 1.916-1.024a.877.877 0 0 1 .849-.061.87.87 0 0 1 .499.7l1.4 9.922-4.664-9.537Zm7.892 14.236a.87.87 0 0 1-.726.394H15.23a.847.847 0 0 1-.718-.385.87.87 0 0 1-.096-.814l.621-1.592h2.32l.664 1.575a.862.862 0 0 1-.079.822Zm-.595-4.147h-.796l-1.304-9.25 5.933-.034-3.833 9.284Z"></path></svg>';
 
 class IconFlowersLarge extends HTMLElement {
     constructor () {

package/dist/IconFood.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--food"><path d="M1.962 10.713A1.522 1.522 0 0 0 1 10.405V9.094a2.774 2.774 0 0 1 1.654.507c.28.208.622.315.971.306a1.54 1.54 0 0 0 .963-.306 2.791 2.791 0 0 1 1.662-.507 2.783 2.783 0 0 1 1.662.507c.278.207.617.315.963.306a1.54 1.54 0 0 0 .963-.306 2.826 2.826 0 0 1 1.662-.507v1.312a1.566 1.566 0 0 0-.971.306 2.774 2.774 0 0 1-1.654.508 2.8 2.8 0 0 1-1.662-.508 1.548 1.548 0 0 0-.963-.306 1.54 1.54 0 0 0-.963.306 2.774 2.774 0 0 1-1.662.508 2.8 2.8 0 0 1-1.663-.508Zm10.194-7.744V1h-1.312v1.969h-3.15l.28 2.625a6.125 6.125 0 0 0-1.724-.219c-2.362 0-4.279 1.225-4.576 2.905l1.295.228c.183-1.024 1.61-1.82 3.281-1.82s3.089.796 3.264 1.82l1.295-.228a3.107 3.107 0 0 0-1.444-2.03l-.21-1.969h4.375l-.717 8.094a.219.219 0 0 1-.22.201h-1.828c.04-.231.06-.465.061-.7H9.514c0 1.015 0 1.575-3.281 1.575-3.282 0-3.282-.56-3.282-1.575H1.64c0 2.442 1.548 2.888 4.593 2.888 1.882 0 3.186-.175 3.912-.875h2.45a1.514 1.514 0 0 0 1.531-1.374L15 2.969h-2.844Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--food"><path d="M1.962 10.713A1.522 1.522 0 0 0 1 10.405V9.094a2.774 2.774 0 0 1 1.654.507c.28.208.622.315.971.306a1.54 1.54 0 0 0 .963-.306 2.791 2.791 0 0 1 1.662-.507 2.783 2.783 0 0 1 1.662.507c.278.207.617.315.963.306a1.54 1.54 0 0 0 .963-.306 2.826 2.826 0 0 1 1.662-.507v1.312a1.566 1.566 0 0 0-.971.306 2.774 2.774 0 0 1-1.654.508 2.8 2.8 0 0 1-1.662-.508 1.548 1.548 0 0 0-.963-.306 1.54 1.54 0 0 0-.963.306 2.774 2.774 0 0 1-1.662.508 2.8 2.8 0 0 1-1.663-.508Zm10.194-7.744V1h-1.312v1.969h-3.15l.28 2.625a6.125 6.125 0 0 0-1.724-.219c-2.362 0-4.279 1.225-4.576 2.905l1.295.228c.183-1.024 1.61-1.82 3.281-1.82s3.089.796 3.264 1.82l1.295-.228a3.107 3.107 0 0 0-1.444-2.03l-.21-1.969h4.375l-.717 8.094a.219.219 0 0 1-.22.201h-1.828c.04-.231.06-.465.061-.7H9.514c0 1.015 0 1.575-3.281 1.575-3.282 0-3.282-.56-3.282-1.575H1.64c0 2.442 1.548 2.888 4.593 2.888 1.882 0 3.186-.175 3.912-.875h2.45a1.514 1.514 0 0 0 1.531-1.374L15 2.969h-2.844Z"></path></svg>';
 
 class IconFood extends HTMLElement {
     constructor () {

package/dist/IconFoodFilled.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--foodFilled"><g clip-path="url(#prefix__clip0_2_2302)"><path d="M6.521 11.832a1.508 1.508 0 0 0-.183-.113h-.193c-.062.029-.12.064-.175.105a4.078 4.078 0 0 1-2.345.7 3.981 3.981 0 0 1-1.969-.481c.07 2.3 1.601 2.738 4.594 2.738 2.992 0 4.506-.437 4.585-2.712a4.042 4.042 0 0 1-1.96.463 4.138 4.138 0 0 1-2.354-.7Z"></path><path d="M3.529 8.595h.192c.062-.029.12-.064.175-.105a4.13 4.13 0 0 1 2.354-.709 4.139 4.139 0 0 1 2.354.7c.058.043.12.08.184.114h.192a.77.77 0 0 0 .175-.105c.446-.3.945-.515 1.47-.63-.473-1.461-2.249-2.485-4.375-2.485S2.33 6.399 1.805 7.851c.55.106 1.074.32 1.54.63.058.043.12.08.184.114Z"></path><path d="M8.875 9.908a1.549 1.549 0 0 1-.971-.307 2.782 2.782 0 0 0-1.654-.507 2.791 2.791 0 0 0-1.654.507 1.54 1.54 0 0 1-.962.306 1.566 1.566 0 0 1-.971-.306A2.774 2.774 0 0 0 1 9.094v1.312c.346-.01.686.098.962.306a2.8 2.8 0 0 0 1.663.508 2.774 2.774 0 0 0 1.654-.508c.28-.209.622-.317.971-.306.349-.01.691.098.971.306a2.8 2.8 0 0 0 1.663.508 2.774 2.774 0 0 0 1.653-.508c.279-.205.617-.313.963-.306V9.094a2.826 2.826 0 0 0-1.662.507 1.54 1.54 0 0 1-.963.306Z"></path><path d="M12.156 2.969V1h-1.312v1.969h-3.15l.131 1.26a5.197 5.197 0 0 1 4.2 3.552h.787v3.938h-.673v.166a4.664 4.664 0 0 1-.403 2.021h.875a1.514 1.514 0 0 0 1.514-1.391L15 2.969h-2.844Z"></path></g><defs><clipPath id="prefix__clip0_2_2302"><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--foodFilled"><g clip-path="url(#prefix__clip0_2_2302)"><path d="M6.521 11.832a1.508 1.508 0 0 0-.183-.113h-.193c-.062.029-.12.064-.175.105a4.078 4.078 0 0 1-2.345.7 3.981 3.981 0 0 1-1.969-.481c.07 2.3 1.601 2.738 4.594 2.738 2.992 0 4.506-.437 4.585-2.712a4.042 4.042 0 0 1-1.96.463 4.138 4.138 0 0 1-2.354-.7Z"></path><path d="M3.529 8.595h.192c.062-.029.12-.064.175-.105a4.13 4.13 0 0 1 2.354-.709 4.139 4.139 0 0 1 2.354.7c.058.043.12.08.184.114h.192a.77.77 0 0 0 .175-.105c.446-.3.945-.515 1.47-.63-.473-1.461-2.249-2.485-4.375-2.485S2.33 6.399 1.805 7.851c.55.106 1.074.32 1.54.63.058.043.12.08.184.114Z"></path><path d="M8.875 9.908a1.549 1.549 0 0 1-.971-.307 2.782 2.782 0 0 0-1.654-.507 2.791 2.791 0 0 0-1.654.507 1.54 1.54 0 0 1-.962.306 1.566 1.566 0 0 1-.971-.306A2.774 2.774 0 0 0 1 9.094v1.312c.346-.01.686.098.962.306a2.8 2.8 0 0 0 1.663.508 2.774 2.774 0 0 0 1.654-.508c.28-.209.622-.317.971-.306.349-.01.691.098.971.306a2.8 2.8 0 0 0 1.663.508 2.774 2.774 0 0 0 1.653-.508c.279-.205.617-.313.963-.306V9.094a2.826 2.826 0 0 0-1.662.507 1.54 1.54 0 0 1-.963.306Z"></path><path d="M12.156 2.969V1h-1.312v1.969h-3.15l.131 1.26a5.197 5.197 0 0 1 4.2 3.552h.787v3.938h-.673v.166a4.664 4.664 0 0 1-.403 2.021h.875a1.514 1.514 0 0 0 1.514-1.391L15 2.969h-2.844Z"></path></g><defs><clipPath id="prefix__clip0_2_2302"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
 
 class IconFoodFilled extends HTMLElement {
     constructor () {

package/dist/IconFoodFilledLarge.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--foodFilledLarge"><path d="M28.25 24.986a2.625 2.625 0 0 1-2.625 2.389h-3.36A6.903 6.903 0 0 0 23 24.05V23h.875a.875.875 0 0 0 .875-.875v-3.5a.875.875 0 0 0-.875-.875h-1.041v-.184c-.639-2.878-3.124-5.118-6.51-6.125l-.525-5.066h6.326V3.75h-3.5V2h5.25v4.375H30l-1.75 18.611Zm-21-5.74c.433.015.855-.143 1.172-.437a6.694 6.694 0 0 1 4.078-1.313 6.729 6.729 0 0 1 4.086 1.313 1.75 1.75 0 0 0 2.337 0 7.052 7.052 0 0 1 2.222-1.059v-.044c-.665-3.001-4.27-5.206-8.645-5.206s-7.98 2.223-8.619 5.25c.788.228 1.53.59 2.196 1.067.32.293.74.447 1.173.43Zm10.5 5.25a6.782 6.782 0 0 1-4.086-1.312 1.61 1.61 0 0 0-1.173-.438 1.6 1.6 0 0 0-1.163.438 6.782 6.782 0 0 1-4.087 1.312 6.459 6.459 0 0 1-3.491-.918v.297c0 4.454 2.809 5.25 8.75 5.25s8.75-.788 8.75-5.25v-.332a6.431 6.431 0 0 1-3.5.953Zm-10.5-1.75a5.032 5.032 0 0 0 3.115-1.023 3.334 3.334 0 0 1 2.135-.727 3.343 3.343 0 0 1 2.144.727 5.25 5.25 0 0 0 6.221 0A3.342 3.342 0 0 1 23 20.995v-1.75a5.075 5.075 0 0 0-3.115 1.024 3.5 3.5 0 0 1-4.279 0 5.03 5.03 0 0 0-3.106-1.024 5.022 5.022 0 0 0-3.106 1.024 3.343 3.343 0 0 1-2.144.726 3.335 3.335 0 0 1-2.135-.726A5.022 5.022 0 0 0 2 19.246v1.75c.775-.016 1.53.241 2.135.727a5.023 5.023 0 0 0 3.115 1.023Z"></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--foodFilledLarge"><path d="M28.25 24.986a2.625 2.625 0 0 1-2.625 2.389h-3.36A6.903 6.903 0 0 0 23 24.05V23h.875a.875.875 0 0 0 .875-.875v-3.5a.875.875 0 0 0-.875-.875h-1.041v-.184c-.639-2.878-3.124-5.118-6.51-6.125l-.525-5.066h6.326V3.75h-3.5V2h5.25v4.375H30l-1.75 18.611Zm-21-5.74c.433.015.855-.143 1.172-.437a6.694 6.694 0 0 1 4.078-1.313 6.729 6.729 0 0 1 4.086 1.313 1.75 1.75 0 0 0 2.337 0 7.052 7.052 0 0 1 2.222-1.059v-.044c-.665-3.001-4.27-5.206-8.645-5.206s-7.98 2.223-8.619 5.25c.788.228 1.53.59 2.196 1.067.32.293.74.447 1.173.43Zm10.5 5.25a6.782 6.782 0 0 1-4.086-1.312 1.61 1.61 0 0 0-1.173-.438 1.6 1.6 0 0 0-1.163.438 6.782 6.782 0 0 1-4.087 1.312 6.459 6.459 0 0 1-3.491-.918v.297c0 4.454 2.809 5.25 8.75 5.25s8.75-.788 8.75-5.25v-.332a6.431 6.431 0 0 1-3.5.953Zm-10.5-1.75a5.032 5.032 0 0 0 3.115-1.023 3.334 3.334 0 0 1 2.135-.727 3.343 3.343 0 0 1 2.144.727 5.25 5.25 0 0 0 6.221 0A3.342 3.342 0 0 1 23 20.995v-1.75a5.075 5.075 0 0 0-3.115 1.024 3.5 3.5 0 0 1-4.279 0 5.03 5.03 0 0 0-3.106-1.024 5.022 5.022 0 0 0-3.106 1.024 3.343 3.343 0 0 1-2.144.726 3.335 3.335 0 0 1-2.135-.726A5.022 5.022 0 0 0 2 19.246v1.75c.775-.016 1.53.241 2.135.727a5.023 5.023 0 0 0 3.115 1.023Z"></path></svg>';
 
 class IconFoodFilledLarge extends HTMLElement {
     constructor () {

package/dist/IconFoodLarge.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--foodLarge"><path d="M4.135 21.723A3.299 3.299 0 0 0 2 20.995v-1.75a5.023 5.023 0 0 1 3.106 1.024 3.333 3.333 0 0 0 2.144.726 3.343 3.343 0 0 0 2.144-.726 5.023 5.023 0 0 1 3.106-1.024 5.032 5.032 0 0 1 3.115 1.024 3.5 3.5 0 0 0 4.279 0A5.075 5.075 0 0 1 23 19.246v1.75a3.343 3.343 0 0 0-2.144.727 5.25 5.25 0 0 1-6.221 0 3.343 3.343 0 0 0-2.135-.727 3.335 3.335 0 0 0-2.135.727 5.031 5.031 0 0 1-3.115 1.023 5.022 5.022 0 0 1-3.115-1.023ZM23.919 6.374V2h-5.25v1.75h3.5v2.625h-6.23l.761 6.851a11.954 11.954 0 0 0-4.2-.726c-4.375 0-8.024 2.196-8.654 5.25l1.75.35c.447-2.17 3.492-3.85 6.904-3.85s6.457 1.627 6.939 3.789l1.75-.377a5.82 5.82 0 0 0-2.625-3.5l-.674-6.037h10.185l-1.523 16.704a.875.875 0 0 1-.875.796h-4.584c.14-.573.208-1.16.2-1.75h-1.75c0 2.301-.314 3.5-7 3.5-6.684 0-7-1.199-7-3.5h-1.75c0 4.462 2.818 5.25 8.75 5.25 3.807 0 6.327-.332 7.648-1.75h5.495a2.625 2.625 0 0 0 2.625-2.389L30 6.375h-6.081Z"></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--foodLarge"><path d="M4.135 21.723A3.299 3.299 0 0 0 2 20.995v-1.75a5.023 5.023 0 0 1 3.106 1.024 3.333 3.333 0 0 0 2.144.726 3.343 3.343 0 0 0 2.144-.726 5.023 5.023 0 0 1 3.106-1.024 5.032 5.032 0 0 1 3.115 1.024 3.5 3.5 0 0 0 4.279 0A5.075 5.075 0 0 1 23 19.246v1.75a3.343 3.343 0 0 0-2.144.727 5.25 5.25 0 0 1-6.221 0 3.343 3.343 0 0 0-2.135-.727 3.335 3.335 0 0 0-2.135.727 5.031 5.031 0 0 1-3.115 1.023 5.022 5.022 0 0 1-3.115-1.023ZM23.919 6.374V2h-5.25v1.75h3.5v2.625h-6.23l.761 6.851a11.954 11.954 0 0 0-4.2-.726c-4.375 0-8.024 2.196-8.654 5.25l1.75.35c.447-2.17 3.492-3.85 6.904-3.85s6.457 1.627 6.939 3.789l1.75-.377a5.82 5.82 0 0 0-2.625-3.5l-.674-6.037h10.185l-1.523 16.704a.875.875 0 0 1-.875.796h-4.584c.14-.573.208-1.16.2-1.75h-1.75c0 2.301-.314 3.5-7 3.5-6.684 0-7-1.199-7-3.5h-1.75c0 4.462 2.818 5.25 8.75 5.25 3.807 0 6.327-.332 7.648-1.75h5.495a2.625 2.625 0 0 0 2.625-2.389L30 6.375h-6.081Z"></path></svg>';
 
 class IconFoodLarge extends HTMLElement {
     constructor () {

package/dist/IconFoodReady.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--foodReady"><path d="M13.941 12.935v-2.923a5.95 5.95 0 0 0-5.25-5.897 1.278 1.278 0 1 0-1.347 0 5.95 5.95 0 0 0-5.25 5.897v2.923h-.656v1.313h13.124v-1.313h-.62Zm-10.57-2.923a4.629 4.629 0 0 1 9.258 0v2.923H3.37v-2.923Z"></path><path d="M7.151 10.152 5.944 8.937 4.98 9.9l2.17 2.17L11.02 8.2l-.963-.953-2.905 2.904Z"></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--foodReady"><path d="M13.941 12.935v-2.923a5.95 5.95 0 0 0-5.25-5.897 1.278 1.278 0 1 0-1.347 0 5.95 5.95 0 0 0-5.25 5.897v2.923h-.656v1.313h13.124v-1.313h-.62Zm-10.57-2.923a4.629 4.629 0 0 1 9.258 0v2.923H3.37v-2.923Z"></path><path d="M7.151 10.152 5.944 8.937 4.98 9.9l2.17 2.17L11.02 8.2l-.963-.953-2.905 2.904Z"></path></svg>';
 
 class IconFoodReady extends HTMLElement {
     constructor () {

package/dist/IconFoodReadyLarge.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--foodReadyLarge"><path d="m9.376 13.996 1.374 1.129A7 7 0 0 1 16 12.719v-1.75a8.75 8.75 0 0 0-6.624 3.027Z"></path><path d="M13.874 21.25c.06-.596.186-1.183.376-1.75H5.937a10.054 10.054 0 0 1 18.585-5.329 8.006 8.006 0 0 1 2.564 1.304 11.83 11.83 0 0 0-8.951-7.586c.316-.442.487-.97.49-1.514a2.625 2.625 0 0 0-5.25 0c.003.543.174 1.072.49 1.514A11.83 11.83 0 0 0 4.187 19.5H2.875v5.25H14.25a8.91 8.91 0 0 1-.385-1.75h-9.24v-1.75h9.249ZM16 5.5a.875.875 0 1 1 0 1.75.875.875 0 0 1 0-1.75Z"></path><path d="m21.285 22.764-1.199-1.19-1.233 1.233 2.432 2.433 4.113-4.121-1.234-1.234-2.879 2.879Z"></path><path d="M28.25 19.675a6.877 6.877 0 0 0-1.794-2.511 6.6 6.6 0 0 0-1.846-1.12 6.459 6.459 0 0 0-2.485-.482 6.536 6.536 0 0 0-4.288 1.602 6.766 6.766 0 0 0-1.854 2.625 6.79 6.79 0 0 0-.394 1.75v.551a6.562 6.562 0 1 0 12.661-2.415Zm-6.125 7.262a4.821 4.821 0 0 1-4.813-4.812v-.551a4.77 4.77 0 0 1 .552-1.75c.186-.313.403-.606.647-.875a4.804 4.804 0 0 1 7.158 0c.244.27.46.563.647.875.296.542.483 1.136.552 1.75v.551a4.822 4.822 0 0 1-4.743 4.813Z"></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--foodReadyLarge"><path d="m9.376 13.996 1.374 1.129A7 7 0 0 1 16 12.719v-1.75a8.75 8.75 0 0 0-6.624 3.027Z"></path><path d="M13.874 21.25c.06-.596.186-1.183.376-1.75H5.937a10.054 10.054 0 0 1 18.585-5.329 8.006 8.006 0 0 1 2.564 1.304 11.83 11.83 0 0 0-8.951-7.586c.316-.442.487-.97.49-1.514a2.625 2.625 0 0 0-5.25 0c.003.543.174 1.072.49 1.514A11.83 11.83 0 0 0 4.187 19.5H2.875v5.25H14.25a8.91 8.91 0 0 1-.385-1.75h-9.24v-1.75h9.249ZM16 5.5a.875.875 0 1 1 0 1.75.875.875 0 0 1 0-1.75Z"></path><path d="m21.285 22.764-1.199-1.19-1.233 1.233 2.432 2.433 4.113-4.121-1.234-1.234-2.879 2.879Z"></path><path d="M28.25 19.675a6.877 6.877 0 0 0-1.794-2.511 6.6 6.6 0 0 0-1.846-1.12 6.459 6.459 0 0 0-2.485-.482 6.536 6.536 0 0 0-4.288 1.602 6.766 6.766 0 0 0-1.854 2.625 6.79 6.79 0 0 0-.394 1.75v.551a6.562 6.562 0 1 0 12.661-2.415Zm-6.125 7.262a4.821 4.821 0 0 1-4.813-4.812v-.551a4.77 4.77 0 0 1 .552-1.75c.186-.313.403-.606.647-.875a4.804 4.804 0 0 1 7.158 0c.244.27.46.563.647.875.296.542.483 1.136.552 1.75v.551a4.822 4.822 0 0 1-4.743 4.813Z"></path></svg>';
 
 class IconFoodReadyLarge extends HTMLElement {
     constructor () {

package/dist/IconFoundations.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--foundations"><g clip-path="url(#prefix__clip0_7066_3748)"><path d="M10.739 1.945H5.252v5.486h5.487V1.945ZM9.426 6.119H6.565V3.258h2.861v2.86Z"></path><path d="M1.875 14.169h5.486V8.683H1.875v5.486Zm1.313-4.174h2.86v2.861h-2.86V9.995Z"></path><path d="M8.621 8.674v5.486h5.486V8.674H8.622Zm4.174 4.174H9.934V9.986h2.861v2.861Z"></path></g><defs><clipPath id="prefix__clip0_7066_3748"><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--foundations"><g clip-path="url(#prefix__clip0_7066_3748)"><path d="M10.739 1.945H5.252v5.486h5.487V1.945ZM9.426 6.119H6.565V3.258h2.861v2.86Z"></path><path d="M1.875 14.169h5.486V8.683H1.875v5.486Zm1.313-4.174h2.86v2.861h-2.86V9.995Z"></path><path d="M8.621 8.674v5.486h5.486V8.674H8.622Zm4.174 4.174H9.934V9.986h2.861v2.861Z"></path></g><defs><clipPath id="prefix__clip0_7066_3748"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
 
 class IconFoundations extends HTMLElement {
     constructor () {

package/dist/IconFoundationsLarge.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--foundationsLarge"><path d="M4.625 27.375h10.509V16.866H4.625v10.509Zm1.75-8.759h7.009v7.009H6.375v-7.009Z"></path><path d="M16.866 16.892v10.51h10.509v-10.51H16.866Zm8.759 8.76h-7.009v-7.01h7.009v7.01Z"></path><path d="M10.75 4.625v10.509h10.509V4.625H10.75Zm1.75 8.759V6.375h7.009v7.009H12.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--foundationsLarge"><path d="M4.625 27.375h10.509V16.866H4.625v10.509Zm1.75-8.759h7.009v7.009H6.375v-7.009Z"></path><path d="M16.866 16.892v10.51h10.509v-10.51H16.866Zm8.759 8.76h-7.009v-7.01h7.009v7.01Z"></path><path d="M10.75 4.625v10.509h10.509V4.625H10.75Zm1.75 8.759V6.375h7.009v7.009H12.5Z"></path></svg>';
 
 class IconFoundationsLarge extends HTMLElement {
     constructor () {

package/dist/IconFriedChicken.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--friedChicken"><g clip-path="url(#prefix__clip0_18_757)"><path d="M4.29 4.412a2.625 2.625 0 0 1-.438-1.277 1.444 1.444 0 0 1 .648-1.26c.062.367.183.722.359 1.05.148.245.332.438.577.875.13.231.218.483.263.744.043.299-.006.604-.14.875A1.75 1.75 0 0 1 4.5 6.25c0-.481.105-.875.07-1.155a1.549 1.549 0 0 0-.28-.683Zm2.905-.874v.936a1.391 1.391 0 0 0 .875-.709c.1-.216.14-.455.114-.691A2.004 2.004 0 0 0 8 2.487c-.21-.315-.341-.472-.473-.656A2.844 2.844 0 0 1 7.17 1a1.146 1.146 0 0 0-.552 1.015c.024.372.145.73.35 1.041.109.153.186.325.228.508v-.026Zm7.752 5.425a3.58 3.58 0 0 1-2.327 3.29c-.534.997-1.995 2.152-4.524 1.268-2.721-.936-3.272-.498-3.666.114-.394.613-.805 1.199-1.374 1.199a1.251 1.251 0 0 1-.639-.201 1.225 1.225 0 0 1-.542-1.287 1.4 1.4 0 0 0 0-.525 2.24 2.24 0 0 0-.411-.673 1.286 1.286 0 0 1-.289-1.523A1.067 1.067 0 0 1 2.75 10.1a1.513 1.513 0 0 0 1.321 0c.508-.201.875-.875 1.216-1.636.525-1.059 1.164-2.363 2.625-2.582a4.375 4.375 0 0 1 2.783-1.224 3.5 3.5 0 0 1 2.494 1.172 3.159 3.159 0 0 1 1.758 3.133Zm-1.312 0c0-1.567-.875-1.917-1.015-1.943l-.166-.061-.132-.131a2.24 2.24 0 0 0-1.636-.876 3.229 3.229 0 0 0-2.012.998l-.184.175h-.263c-.813.053-1.216.744-1.75 1.881a4.12 4.12 0 0 1-1.89 2.275 2.8 2.8 0 0 1-2.003.114c.216.265.393.56.525.875.098.245.146.507.14.77l.105-.166c1.032-1.601 2.817-1.374 5.171-.595 2.354.778 2.975-.726 2.975-.779l.114-.297.315-.097a2.337 2.337 0 0 0 1.706-2.143Z"></path></g><defs><clipPath id="prefix__clip0_18_757"><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--friedChicken"><g clip-path="url(#prefix__clip0_18_757)"><path d="M4.29 4.412a2.625 2.625 0 0 1-.438-1.277 1.444 1.444 0 0 1 .648-1.26c.062.367.183.722.359 1.05.148.245.332.438.577.875.13.231.218.483.263.744.043.299-.006.604-.14.875A1.75 1.75 0 0 1 4.5 6.25c0-.481.105-.875.07-1.155a1.549 1.549 0 0 0-.28-.683Zm2.905-.874v.936a1.391 1.391 0 0 0 .875-.709c.1-.216.14-.455.114-.691A2.004 2.004 0 0 0 8 2.487c-.21-.315-.341-.472-.473-.656A2.844 2.844 0 0 1 7.17 1a1.146 1.146 0 0 0-.552 1.015c.024.372.145.73.35 1.041.109.153.186.325.228.508v-.026Zm7.752 5.425a3.58 3.58 0 0 1-2.327 3.29c-.534.997-1.995 2.152-4.524 1.268-2.721-.936-3.272-.498-3.666.114-.394.613-.805 1.199-1.374 1.199a1.251 1.251 0 0 1-.639-.201 1.225 1.225 0 0 1-.542-1.287 1.4 1.4 0 0 0 0-.525 2.24 2.24 0 0 0-.411-.673 1.286 1.286 0 0 1-.289-1.523A1.067 1.067 0 0 1 2.75 10.1a1.513 1.513 0 0 0 1.321 0c.508-.201.875-.875 1.216-1.636.525-1.059 1.164-2.363 2.625-2.582a4.375 4.375 0 0 1 2.783-1.224 3.5 3.5 0 0 1 2.494 1.172 3.159 3.159 0 0 1 1.758 3.133Zm-1.312 0c0-1.567-.875-1.917-1.015-1.943l-.166-.061-.132-.131a2.24 2.24 0 0 0-1.636-.876 3.229 3.229 0 0 0-2.012.998l-.184.175h-.263c-.813.053-1.216.744-1.75 1.881a4.12 4.12 0 0 1-1.89 2.275 2.8 2.8 0 0 1-2.003.114c.216.265.393.56.525.875.098.245.146.507.14.77l.105-.166c1.032-1.601 2.817-1.374 5.171-.595 2.354.778 2.975-.726 2.975-.779l.114-.297.315-.097a2.337 2.337 0 0 0 1.706-2.143Z"></path></g><defs><clipPath id="prefix__clip0_18_757"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
 
 class IconFriedChicken extends HTMLElement {
     constructor () {

package/dist/IconFriedChickenLarge.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--friedChickenLarge"><path d="M9.998 6.183a1.995 1.995 0 0 1 .936-1.995 2.808 2.808 0 0 0 .385 1.592c.218.341.612.656 1.058 1.225.26.33.444.712.543 1.12a2.3 2.3 0 0 1 0 .735 2.004 2.004 0 0 1-.236.63 2.818 2.818 0 0 1-1.75 1.242c.203-.569.358-1.154.464-1.75v-.27c0-.08-.053-.123-.07-.193a3.204 3.204 0 0 0-.342-.49 4.295 4.295 0 0 1-.989-1.846Zm5.538.385a.88.88 0 0 1 .07.13V6.9c-.046.501-.128.998-.245 1.487a2.231 2.231 0 0 0 1.54-1.032 1.83 1.83 0 0 0 .21-1.19c-.077-.36-.229-.7-.446-.997-.376-.5-.674-.736-.875-.99a2.537 2.537 0 0 1-.394-1.303 1.698 1.698 0 0 0-.875 1.689c.108.6.37 1.16.761 1.627.094.12.179.245.254.377Zm13.589 10.7a6.58 6.58 0 0 1-4.436 6.126c-.648 1.146-2.975 4.261-8.365 2.406-5.04-1.75-6.607-1.181-7.604.376-.884 1.339-1.47 2.127-2.345 2.127a1.995 1.995 0 0 1-1.032-.342l-.097-.061a2.012 2.012 0 0 1-.744-2.074c.057-.401.027-.81-.087-1.198a4.908 4.908 0 0 0-.875-1.4 2.144 2.144 0 0 1-.473-2.494c.692-1.593 1.925-1.103 2.52-.875a3.289 3.289 0 0 0 2.87 0c1.12-.455 1.83-1.882 2.573-3.387 1.041-2.1 2.214-4.47 4.926-4.82a8.138 8.138 0 0 1 5.25-2.346 6.335 6.335 0 0 1 4.629 2.214c.857.332 3.29 1.689 3.29 5.749Zm-1.75 0c0-3.42-2.161-4.138-2.249-4.164l-.227-.07-.149-.184a4.743 4.743 0 0 0-3.5-1.794 5.32 5.32 0 0 0-2.73.875 7 7 0 0 1 1.418.569l-.875 1.523a5.25 5.25 0 0 0-2.625-.674c-1.75.122-2.625 1.549-3.79 3.876-.874 1.75-1.75 3.5-3.5 4.226a5.021 5.021 0 0 1-4.173 0l-.254-.096v.044c-.114.262-.114.262.228.691a6.897 6.897 0 0 1 1.128 1.846c.219.63.29 1.3.21 1.96v.525c.351-.38.673-.787.963-1.216 1.934-3.01 5.127-2.625 9.625-1.094 4.935 1.706 6.309-1.645 6.37-1.75a2.564 2.564 0 0 0 .052-2.003l1.575-.858c.23.51.352 1.06.36 1.619a4.498 4.498 0 0 0 2.143-3.85Z"></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--friedChickenLarge"><path d="M9.998 6.183a1.995 1.995 0 0 1 .936-1.995 2.808 2.808 0 0 0 .385 1.592c.218.341.612.656 1.058 1.225.26.33.444.712.543 1.12a2.3 2.3 0 0 1 0 .735 2.004 2.004 0 0 1-.236.63 2.818 2.818 0 0 1-1.75 1.242c.203-.569.358-1.154.464-1.75v-.27c0-.08-.053-.123-.07-.193a3.204 3.204 0 0 0-.342-.49 4.295 4.295 0 0 1-.989-1.846Zm5.538.385a.88.88 0 0 1 .07.13V6.9c-.046.501-.128.998-.245 1.487a2.231 2.231 0 0 0 1.54-1.032 1.83 1.83 0 0 0 .21-1.19c-.077-.36-.229-.7-.446-.997-.376-.5-.674-.736-.875-.99a2.537 2.537 0 0 1-.394-1.303 1.698 1.698 0 0 0-.875 1.689c.108.6.37 1.16.761 1.627.094.12.179.245.254.377Zm13.589 10.7a6.58 6.58 0 0 1-4.436 6.126c-.648 1.146-2.975 4.261-8.365 2.406-5.04-1.75-6.607-1.181-7.604.376-.884 1.339-1.47 2.127-2.345 2.127a1.995 1.995 0 0 1-1.032-.342l-.097-.061a2.012 2.012 0 0 1-.744-2.074c.057-.401.027-.81-.087-1.198a4.908 4.908 0 0 0-.875-1.4 2.144 2.144 0 0 1-.473-2.494c.692-1.593 1.925-1.103 2.52-.875a3.289 3.289 0 0 0 2.87 0c1.12-.455 1.83-1.882 2.573-3.387 1.041-2.1 2.214-4.47 4.926-4.82a8.138 8.138 0 0 1 5.25-2.346 6.335 6.335 0 0 1 4.629 2.214c.857.332 3.29 1.689 3.29 5.749Zm-1.75 0c0-3.42-2.161-4.138-2.249-4.164l-.227-.07-.149-.184a4.743 4.743 0 0 0-3.5-1.794 5.32 5.32 0 0 0-2.73.875 7 7 0 0 1 1.418.569l-.875 1.523a5.25 5.25 0 0 0-2.625-.674c-1.75.122-2.625 1.549-3.79 3.876-.874 1.75-1.75 3.5-3.5 4.226a5.021 5.021 0 0 1-4.173 0l-.254-.096v.044c-.114.262-.114.262.228.691a6.897 6.897 0 0 1 1.128 1.846c.219.63.29 1.3.21 1.96v.525c.351-.38.673-.787.963-1.216 1.934-3.01 5.127-2.625 9.625-1.094 4.935 1.706 6.309-1.645 6.37-1.75a2.564 2.564 0 0 0 .052-2.003l1.575-.858c.23.51.352 1.06.36 1.619a4.498 4.498 0 0 0 2.143-3.85Z"></path></svg>';
 
 class IconFriedChickenLarge extends HTMLElement {
     constructor () {

package/dist/IconFries.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--fries"><path d="M12.769 5.725a.639.639 0 0 0-.648-.079l.674-2.152L11.5 3.1l-.875 3.036c-.297.07-.586.131-.875.175l.543-5.031-1.313-.149-.604 5.311H7.72L7.195 1.5l-1.313.14.508 4.69c-.306 0-.621-.105-.875-.175L4.5 2.619l-1.269.341.727 2.721h-.106a.647.647 0 0 0-.874.683l.778 6.238a1.531 1.531 0 0 0 1.514 1.34h5.46a1.531 1.531 0 0 0 1.514-1.34l.779-6.238a.63.63 0 0 0-.254-.639Zm-1.82 6.65a.227.227 0 0 1-.219.193H5.27a.227.227 0 0 1-.219-.193L4.412 7.23c2.336.735 4.84.735 7.176 0l-.64 5.145Z"></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--fries"><path d="M12.769 5.725a.639.639 0 0 0-.648-.079l.674-2.152L11.5 3.1l-.875 3.036c-.297.07-.586.131-.875.175l.543-5.031-1.313-.149-.604 5.311H7.72L7.195 1.5l-1.313.14.508 4.69c-.306 0-.621-.105-.875-.175L4.5 2.619l-1.269.341.727 2.721h-.106a.647.647 0 0 0-.874.683l.778 6.238a1.531 1.531 0 0 0 1.514 1.34h5.46a1.531 1.531 0 0 0 1.514-1.34l.779-6.238a.63.63 0 0 0-.254-.639Zm-1.82 6.65a.227.227 0 0 1-.219.193H5.27a.227.227 0 0 1-.219-.193L4.412 7.23c2.336.735 4.84.735 7.176 0l-.64 5.145Z"></path></svg>';
 
 class IconFries extends HTMLElement {
     constructor () {

package/dist/IconFriesLarge.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--friesLarge"><path d="M25.826 12.8a.876.876 0 0 0-.875-.105l-.709.271.937-3.141a.874.874 0 0 0-.309-.96.876.876 0 0 0-.313-.151l-3.5-.875.324-2.993a.875.875 0 0 0-.131-.63.876.876 0 0 0-.613-.341l-3.56-.306a.875.875 0 0 0-.946.779l-.07.62a.875.875 0 0 0-.875-.612l-3.561.307a.875.875 0 0 0-.796.953l.131 1.278-3.194.674a.875.875 0 0 0-.691 1.076l1.146 4.497c-.402-.14-.796-.289-1.181-.446a.875.875 0 0 0-1.216.91l1.662 13.247a2.748 2.748 0 0 0 2.721 2.398h11.585a2.748 2.748 0 0 0 2.722-2.398l1.654-13.247a.875.875 0 0 0-.342-.805Zm-4.375-3.045 1.75.446-1.006 3.421c-.595.167-1.199.316-1.803.43l.123-1.165.936-3.132ZM17.75 5.398l1.82.157-.945 8.767c-.613.07-1.234.114-1.855.132l.98-9.056Zm-3.316.778.709 7-.14 1.278c-.342 0-.683 0-1.015-.07l-.902-3.632-.446-4.374 1.794-.202ZM9 9.125l1.75-.376.56 2.205v.166l.779 3.063a22.517 22.517 0 0 1-1.969-.412L9 9.125Zm13.773 17.5a.98.98 0 0 1-.98.875H10.207a.98.98 0 0 1-.98-.875l-1.48-11.786a25.165 25.165 0 0 0 16.503 0l-1.479 11.786Z"></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--friesLarge"><path d="M25.826 12.8a.876.876 0 0 0-.875-.105l-.709.271.937-3.141a.874.874 0 0 0-.309-.96.876.876 0 0 0-.313-.151l-3.5-.875.324-2.993a.875.875 0 0 0-.131-.63.876.876 0 0 0-.613-.341l-3.56-.306a.875.875 0 0 0-.946.779l-.07.62a.875.875 0 0 0-.875-.612l-3.561.307a.875.875 0 0 0-.796.953l.131 1.278-3.194.674a.875.875 0 0 0-.691 1.076l1.146 4.497c-.402-.14-.796-.289-1.181-.446a.875.875 0 0 0-1.216.91l1.662 13.247a2.748 2.748 0 0 0 2.721 2.398h11.585a2.748 2.748 0 0 0 2.722-2.398l1.654-13.247a.875.875 0 0 0-.342-.805Zm-4.375-3.045 1.75.446-1.006 3.421c-.595.167-1.199.316-1.803.43l.123-1.165.936-3.132ZM17.75 5.398l1.82.157-.945 8.767c-.613.07-1.234.114-1.855.132l.98-9.056Zm-3.316.778.709 7-.14 1.278c-.342 0-.683 0-1.015-.07l-.902-3.632-.446-4.374 1.794-.202ZM9 9.125l1.75-.376.56 2.205v.166l.779 3.063a22.517 22.517 0 0 1-1.969-.412L9 9.125Zm13.773 17.5a.98.98 0 0 1-.98.875H10.207a.98.98 0 0 1-.98-.875l-1.48-11.786a25.165 25.165 0 0 0 16.503 0l-1.479 11.786Z"></path></svg>';
 
 class IconFriesLarge extends HTMLElement {
     constructor () {

package/dist/IconFullscreenExit.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--fullscreenExit"><path d="M6.031 1.123 4.72 1.86V4.72H1.766L1.109 6.03h4.922V1.123Z"></path><path d="m9.969 1.11 1.312.656v2.953h2.859l.737 1.312H9.97V1.11Z"></path><path d="m14.89 9.969-.656 1.312h-2.953v2.859l-1.312.737V9.97h4.922Z"></path><path d="m1.123 9.969.737 1.312H4.72v2.953l1.312.657V9.969H1.123Z"></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--fullscreenExit"><path d="M6.031 1.123 4.72 1.86V4.72H1.766L1.109 6.03h4.922V1.123Z"></path><path d="m9.969 1.11 1.312.656v2.953h2.859l.737 1.312H9.97V1.11Z"></path><path d="m14.89 9.969-.656 1.312h-2.953v2.859l-1.312.737V9.97h4.922Z"></path><path d="m1.123 9.969.737 1.312H4.72v2.953l1.312.657V9.969H1.123Z"></path></svg>';
 
 class IconFullscreenExit extends HTMLElement {
     constructor () {

package/dist/IconFullscreenExitLarge.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--fullscreenExitLarge"><path d="m21.25 4.188-1.75-.875V12.5h9.132l-.986-1.75H21.25V4.187Z"></path><path d="m4.354 21.25-.986-1.75H12.5v9.188l-1.75-.875V21.25H4.354Z"></path><path d="m28.688 19.5-.875 1.75H21.25v6.396l-1.75.986V19.5h9.188Z"></path><path d="m10.75 4.354 1.75-.986V12.5H3.312l.876-1.75h6.562V4.354Z"></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--fullscreenExitLarge"><path d="m21.25 4.188-1.75-.875V12.5h9.132l-.986-1.75H21.25V4.187Z"></path><path d="m4.354 21.25-.986-1.75H12.5v9.188l-1.75-.875V21.25H4.354Z"></path><path d="m28.688 19.5-.875 1.75H21.25v6.396l-1.75.986V19.5h9.188Z"></path><path d="m10.75 4.354 1.75-.986V12.5H3.312l.876-1.75h6.562V4.354Z"></path></svg>';
 
 class IconFullscreenExitLarge extends HTMLElement {
     constructor () {

package/dist/IconFullscreenExpand.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--fullscreenExpand"><path d="m5.99 3.406.737-1.312H2.094v4.633l1.312-.738V3.406H5.99Z"></path><path d="M10.01 3.406h2.584V5.99l1.312.738V2.094H9.273l.738 1.312Z"></path><path d="M12.594 10.01v2.584H10.01l-.738 1.312h4.633V9.273l-1.312.738Z"></path><path d="m3.406 10.01-1.312-.737v4.633h4.633l-.738-1.312H3.406V10.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--fullscreenExpand"><path d="m5.99 3.406.737-1.312H2.094v4.633l1.312-.738V3.406H5.99Z"></path><path d="M10.01 3.406h2.584V5.99l1.312.738V2.094H9.273l.738 1.312Z"></path><path d="M12.594 10.01v2.584H10.01l-.738 1.312h4.633V9.273l-1.312.738Z"></path><path d="m3.406 10.01-1.312-.737v4.633h4.633l-.738-1.312H3.406V10.01Z"></path></svg>';
 
 class IconFullscreenExpand extends HTMLElement {
     constructor () {

package/dist/IconFullscreenExpandLarge.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--fullscreenExpandLarge"><path d="M5.5 5.375h8.583l-.983 1.75H7.25v5.85l-1.75.983V5.375Z"></path><path d="M18.9 7.125h5.85v5.848l1.75.981V5.375h-8.583l.983 1.75Z"></path><path d="M26.5 26.375h-8.58l.982-1.75h5.848v-5.848l1.75-.982v8.58Z"></path><path d="M5.5 26.375v-8.583l1.75.983v5.85h5.848l.981 1.75H5.5Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--fullscreenExpandLarge"><path d="M5.5 5.375h8.583l-.983 1.75H7.25v5.85l-1.75.983V5.375Z"></path><path d="M18.9 7.125h5.85v5.848l1.75.981V5.375h-8.583l.983 1.75Z"></path><path d="M26.5 26.375h-8.58l.982-1.75h5.848v-5.848l1.75-.982v8.58Z"></path><path d="M5.5 26.375v-8.583l1.75.983v5.85h5.848l.981 1.75H5.5Z"></path></svg>';
 
 class IconFullscreenExpandLarge extends HTMLElement {
     constructor () {

package/dist/IconGeolocation.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--geolocation"><path d="M9.452 14.466H8.044l-.534-2.091A5.25 5.25 0 0 0 3.669 8.49L1.534 8V6.547l11.882-3.963-3.964 11.882ZM3.81 7.17h.175a6.598 6.598 0 0 1 4.803 4.847v.175l2.503-7.525L3.809 7.17Z"></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--geolocation"><path d="M9.452 14.466H8.044l-.534-2.091A5.25 5.25 0 0 0 3.669 8.49L1.534 8V6.547l11.882-3.963-3.964 11.882ZM3.81 7.17h.175a6.598 6.598 0 0 1 4.803 4.847v.175l2.503-7.525L3.809 7.17Z"></path></svg>';
 
 class IconGeolocation extends HTMLElement {
     constructor () {

package/dist/IconGeolocationCircle.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--geolocationCircle"><path d="M8 1.42a6.58 6.58 0 1 0 0 13.16A6.58 6.58 0 0 0 8 1.42Zm0 11.83a5.25 5.25 0 1 1 0-10.5 5.25 5.25 0 0 1 0 10.5Z"></path><path d="m4.351 8.28 1.33.332a2.345 2.345 0 0 1 1.75 1.75l.333 1.33h1.172l2.293-6.877L4.35 7.064V8.28Zm4.769-1.4-.761 2.284A3.649 3.649 0 0 0 6.836 7.64L9.12 6.88Z"></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--geolocationCircle"><path d="M8 1.42a6.58 6.58 0 1 0 0 13.16A6.58 6.58 0 0 0 8 1.42Zm0 11.83a5.25 5.25 0 1 1 0-10.5 5.25 5.25 0 0 1 0 10.5Z"></path><path d="m4.351 8.28 1.33.332a2.345 2.345 0 0 1 1.75 1.75l.333 1.33h1.172l2.293-6.877L4.35 7.064V8.28Zm4.769-1.4-.761 2.284A3.649 3.649 0 0 0 6.836 7.64L9.12 6.88Z"></path></svg>';
 
 class IconGeolocationCircle extends HTMLElement {
     constructor () {

package/dist/IconGeolocationCircleFilled.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--geolocationCircleFilled"><path d="M8.359 9.164 9.12 6.88l-2.284.761c.65.343 1.18.874 1.523 1.523Z"></path><path fill-rule="evenodd" d="M8 1.42a6.58 6.58 0 1 0 0 13.16A6.58 6.58 0 0 0 8 1.42ZM5.68 8.613l-1.33-.333V7.064l6.878-2.249-2.293 6.878H7.764l-.333-1.33a2.345 2.345 0 0 0-1.75-1.75Z" 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--geolocationCircleFilled"><path d="M8.359 9.164 9.12 6.88l-2.284.761c.65.343 1.18.874 1.523 1.523Z"></path><path fill-rule="evenodd" d="M8 1.42a6.58 6.58 0 1 0 0 13.16A6.58 6.58 0 0 0 8 1.42ZM5.68 8.613l-1.33-.333V7.064l6.878-2.249-2.293 6.878H7.764l-.333-1.33a2.345 2.345 0 0 0-1.75-1.75Z" clip-rule="evenodd"></path></svg>';
 
 class IconGeolocationCircleFilled extends HTMLElement {
     constructor () {

package/dist/IconGeolocationCircleFilledLarge.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--geolocationCircleFilledLarge"><path d="m16.718 19.185 1.96-5.862-5.863 1.96a6.431 6.431 0 0 1 3.903 3.902Z"></path><path d="M16 3.75a12.25 12.25 0 1 0 0 24.5 12.25 12.25 0 0 0 0-24.5Zm1.479 18.69h-1.75l-.551-2.205a4.752 4.752 0 0 0-3.448-3.447l-2.205-.552v-1.75l11.917-3.929L17.48 22.44Z"></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--geolocationCircleFilledLarge"><path d="m16.718 19.185 1.96-5.862-5.863 1.96a6.431 6.431 0 0 1 3.903 3.902Z"></path><path d="M16 3.75a12.25 12.25 0 1 0 0 24.5 12.25 12.25 0 0 0 0-24.5Zm1.479 18.69h-1.75l-.551-2.205a4.752 4.752 0 0 0-3.448-3.447l-2.205-.552v-1.75l11.917-3.929L17.48 22.44Z"></path></svg>';
 
 class IconGeolocationCircleFilledLarge extends HTMLElement {
     constructor () {

package/dist/IconGeolocationCircleLarge.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--geolocationCircleLarge"><path d="M17.479 22.44h-1.75l-.551-2.205a4.752 4.752 0 0 0-3.448-3.447l-2.205-.552v-1.75l11.917-3.929L17.48 22.44Zm-4.664-7.158a6.432 6.432 0 0 1 3.903 3.903l1.96-5.862-5.863 1.96ZM16 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></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--geolocationCircleLarge"><path d="M17.479 22.44h-1.75l-.551-2.205a4.752 4.752 0 0 0-3.448-3.447l-2.205-.552v-1.75l11.917-3.929L17.48 22.44Zm-4.664-7.158a6.432 6.432 0 0 1 3.903 3.903l1.96-5.862-5.863 1.96ZM16 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></svg>';
 
 class IconGeolocationCircleLarge extends HTMLElement {
     constructor () {

package/dist/IconGeolocationFilled.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--geolocationFilled"><path d="M1.535 6.548V8l2.135.534a5.25 5.25 0 0 1 3.84 3.841l.535 2.135h1.408l3.964-11.926L1.535 6.548Z"></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--geolocationFilled"><path d="M1.535 6.548V8l2.135.534a5.25 5.25 0 0 1 3.84 3.841l.535 2.135h1.408l3.964-11.926L1.535 6.548Z"></path></svg>';
 
 class IconGeolocationFilled extends HTMLElement {
     constructor () {

package/dist/IconGeolocationFilledLarge.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--geolocationFilledLarge"><path d="M6.156 12.973v2.047l3.404.875a9.012 9.012 0 0 1 6.571 6.571l.875 3.404h2.048l6.405-19.329-19.303 6.431Z"></path><path d="M19.027 25.844H16.98l-.875-3.404a9.012 9.012 0 0 0-6.571-6.571l-3.404-.875v-2.021L25.459 6.54l-6.432 19.303Z"></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--geolocationFilledLarge"><path d="M6.156 12.973v2.047l3.404.875a9.012 9.012 0 0 1 6.571 6.571l.875 3.404h2.048l6.405-19.329-19.303 6.431Z"></path><path d="M19.027 25.844H16.98l-.875-3.404a9.012 9.012 0 0 0-6.571-6.571l-3.404-.875v-2.021L25.459 6.54l-6.432 19.303Z"></path></svg>';
 
 class IconGeolocationFilledLarge extends HTMLElement {
     constructor () {

package/dist/IconGeolocationLarge.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--geolocationLarge"><path d="M6.156 12.973v2.047l3.404.875a9.012 9.012 0 0 1 6.571 6.571l.875 3.404h2.048l6.405-19.329-19.303 6.431Zm12.023 9.773-.639-1.75a10.763 10.763 0 0 0-6.51-6.501l-1.75-.639L22.65 9.35l-4.471 13.396Z"></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--geolocationLarge"><path d="M6.156 12.973v2.047l3.404.875a9.012 9.012 0 0 1 6.571 6.571l.875 3.404h2.048l6.405-19.329-19.303 6.431Zm12.023 9.773-.639-1.75a10.763 10.763 0 0 0-6.51-6.501l-1.75-.639L22.65 9.35l-4.471 13.396Z"></path></svg>';
 
 class IconGeolocationLarge extends HTMLElement {
     constructor () {

package/dist/IconGift.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--gift"><path d="M10.329 3.333c.112-.013.226-.013.338 0V2.071a2.18 2.18 0 0 0-.338 0A2.969 2.969 0 0 0 8 3.138 2.969 2.969 0 0 0 5.671 2a2.071 2.071 0 0 0-.338.071v1.333c.113-.013.226-.013.338 0A1.68 1.68 0 0 1 7.333 4.96H2v4h.889v3.778a1.6 1.6 0 0 0 1.555 1.555h7.112a1.6 1.6 0 0 0 1.555-1.555V8.96H14v-4H8.667a1.671 1.671 0 0 1 1.662-1.627ZM7.333 12.96H4.444a.258.258 0 0 1-.222-.222V8.96h3.111v4Zm0-5.333h-4V6.293h4v1.334Zm4.445 5.075a.258.258 0 0 1-.258.258H8.667v-4h3.11v3.742Zm.889-6.409v1.334h-4V6.293h4Z"></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--gift"><path d="M10.329 3.333c.112-.013.226-.013.338 0V2.071a2.18 2.18 0 0 0-.338 0A2.969 2.969 0 0 0 8 3.138 2.969 2.969 0 0 0 5.671 2a2.071 2.071 0 0 0-.338.071v1.333c.113-.013.226-.013.338 0A1.68 1.68 0 0 1 7.333 4.96H2v4h.889v3.778a1.6 1.6 0 0 0 1.555 1.555h7.112a1.6 1.6 0 0 0 1.555-1.555V8.96H14v-4H8.667a1.671 1.671 0 0 1 1.662-1.627ZM7.333 12.96H4.444a.258.258 0 0 1-.222-.222V8.96h3.111v4Zm0-5.333h-4V6.293h4v1.334Zm4.445 5.075a.258.258 0 0 1-.258.258H8.667v-4h3.11v3.742Zm.889-6.409v1.334h-4V6.293h4Z"></path></svg>';
 
 class IconGift extends HTMLElement {
     constructor () {

package/dist/IconGiftCard.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--giftCard"><path d="M12.646 2.969H3.354L1.219 5.104v5.792l2.135 2.135h9.292l2.135-2.135V5.104l-2.135-2.135Zm.823 7.385-1.365 1.365H3.896l-1.365-1.365V5.646l1.365-1.365h8.208l1.365 1.365v4.708Zm-2.844-3.798L9.242 6.25l-.665-1.225a.691.691 0 0 0-1.154 0L6.758 6.25l-1.383.306a.648.648 0 0 0-.499.455.656.656 0 0 0 .167.657l.953.97-.201 1.427a.665.665 0 0 0 .954.674L8 10.1l1.251.639a.63.63 0 0 0 .306.07.604.604 0 0 0 .377-.123.639.639 0 0 0 .271-.621l-.201-1.426.971-.971a.657.657 0 0 0-.35-1.112Zm-1.75 1.391a.639.639 0 0 0-.184.552l.07.498-.437-.218a.665.665 0 0 0-.595 0l-.438.219.07-.5a.639.639 0 0 0-.236-.55l-.332-.342.498-.096a.639.639 0 0 0 .446-.332L8 6.748l.236.43a.639.639 0 0 0 .446.332l.5.096-.307.341Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--giftCard"><path d="M12.646 2.969H3.354L1.219 5.104v5.792l2.135 2.135h9.292l2.135-2.135V5.104l-2.135-2.135Zm.823 7.385-1.365 1.365H3.896l-1.365-1.365V5.646l1.365-1.365h8.208l1.365 1.365v4.708Zm-2.844-3.798L9.242 6.25l-.665-1.225a.691.691 0 0 0-1.154 0L6.758 6.25l-1.383.306a.648.648 0 0 0-.499.455.656.656 0 0 0 .167.657l.953.97-.201 1.427a.665.665 0 0 0 .954.674L8 10.1l1.251.639a.63.63 0 0 0 .306.07.604.604 0 0 0 .377-.123.639.639 0 0 0 .271-.621l-.201-1.426.971-.971a.657.657 0 0 0-.35-1.112Zm-1.75 1.391a.639.639 0 0 0-.184.552l.07.498-.437-.218a.665.665 0 0 0-.595 0l-.438.219.07-.5a.639.639 0 0 0-.236-.55l-.332-.342.498-.096a.639.639 0 0 0 .446-.332L8 6.748l.236.43a.639.639 0 0 0 .446.332l.5.096-.307.341Z"></path></svg>';
 
 class IconGiftCard extends HTMLElement {
     constructor () {

package/dist/IconGiftCardLarge.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--giftCardLarge"><path d="M29.125 11.266v12.968l-3.141 3.141H6.016l-3.141-3.141V11.266l3.141-3.141H9v1.75H6.734l-2.109 2.109v11.532l2.109 2.109h18.532l2.109-2.109V11.984l-2.109-2.109H23v-1.75h2.984l3.141 3.141Zm-19.25 4.961a.875.875 0 0 1 .455-1.478l3.307-.648 1.575-2.896a.875.875 0 0 1 1.54 0l1.576 2.896 3.307.648a.876.876 0 0 1 .49 1.478l-2.319 2.328.473 3.386a.875.875 0 0 1-.368.832.875.875 0 0 1-.498.166.876.876 0 0 1-.403-.096L16 21.31l-2.992 1.532a.875.875 0 0 1-1.27-.875l.473-3.387-2.336-2.354Zm2.389-.07 1.47 1.47a.874.874 0 0 1 .245.744l-.289 2.153 1.899-.972a.876.876 0 0 1 .787 0l1.899.972-.289-2.153a.876.876 0 0 1 .245-.743l1.47-1.47-2.117-.42a.875.875 0 0 1-.595-.438L16 13.454 14.994 15.3a.875.875 0 0 1-.595.438l-2.135.42ZM16.875 3.75h-1.75V9h1.75V3.75Zm4.305 2.625-1.68-.481-1.015 3.342 1.671.516 1.024-3.377ZM13.672 9.21l-.97-3.369-1.68.534.97 3.36 1.68-.525Z"></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--giftCardLarge"><path d="M29.125 11.266v12.968l-3.141 3.141H6.016l-3.141-3.141V11.266l3.141-3.141H9v1.75H6.734l-2.109 2.109v11.532l2.109 2.109h18.532l2.109-2.109V11.984l-2.109-2.109H23v-1.75h2.984l3.141 3.141Zm-19.25 4.961a.875.875 0 0 1 .455-1.478l3.307-.648 1.575-2.896a.875.875 0 0 1 1.54 0l1.576 2.896 3.307.648a.876.876 0 0 1 .49 1.478l-2.319 2.328.473 3.386a.875.875 0 0 1-.368.832.875.875 0 0 1-.498.166.876.876 0 0 1-.403-.096L16 21.31l-2.992 1.532a.875.875 0 0 1-1.27-.875l.473-3.387-2.336-2.354Zm2.389-.07 1.47 1.47a.874.874 0 0 1 .245.744l-.289 2.153 1.899-.972a.876.876 0 0 1 .787 0l1.899.972-.289-2.153a.876.876 0 0 1 .245-.743l1.47-1.47-2.117-.42a.875.875 0 0 1-.595-.438L16 13.454 14.994 15.3a.875.875 0 0 1-.595.438l-2.135.42ZM16.875 3.75h-1.75V9h1.75V3.75Zm4.305 2.625-1.68-.481-1.015 3.342 1.671.516 1.024-3.377ZM13.672 9.21l-.97-3.369-1.68.534.97 3.36 1.68-.525Z"></path></svg>';
 
 class IconGiftCardLarge extends HTMLElement {
     constructor () {

package/dist/IconGiftFilled.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--giftFilled"><path d="M7.333 4.966h1.334V7.63H14V4.966H8.667a1.663 1.663 0 0 1 2-1.59v-1.34c-.116-.01-.223-.036-.338-.036C9.378 2 8.542 2.453 8 3.137A2.995 2.995 0 0 0 5.671 2c-.115 0-.222.018-.338.036v1.332c.107-.018.223-.036.338-.036.907 0 1.645.728 1.662 1.625H2v2.664h5.333V4.957v.009Z"></path><path d="M8.667 14.29h2.853c.88 0 1.591-.72 1.591-1.59V8.963H8.667v5.328Z"></path><path d="M2.889 8.962v3.739c0 .879.711 1.589 1.591 1.589h2.853V8.962H2.89Z"></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--giftFilled"><path d="M7.333 4.966h1.334V7.63H14V4.966H8.667a1.663 1.663 0 0 1 2-1.59v-1.34c-.116-.01-.223-.036-.338-.036C9.378 2 8.542 2.453 8 3.137A2.995 2.995 0 0 0 5.671 2c-.115 0-.222.018-.338.036v1.332c.107-.018.223-.036.338-.036.907 0 1.645.728 1.662 1.625H2v2.664h5.333V4.957v.009Z"></path><path d="M8.667 14.29h2.853c.88 0 1.591-.72 1.591-1.59V8.963H8.667v5.328Z"></path><path d="M2.889 8.962v3.739c0 .879.711 1.589 1.591 1.589h2.853V8.962H2.89Z"></path></svg>';
 
 class IconGiftFilled extends HTMLElement {
     constructor () {

package/dist/IconGiftFilledLarge.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--giftFilledLarge"><path d="M16.831 28.215h7.044A2.633 2.633 0 0 0 26.5 25.59V14.215h-9.669v14Z"></path><path d="M5.5 25.59a2.633 2.633 0 0 0 2.625 2.625h6.956v-14H5.5V25.59Z"></path><path d="M16.849 8.09v-.017a3.064 3.064 0 0 1 3.01-2.538c.175 0 .35.026.525.053v-1.75c-.175-.018-.341-.053-.525-.053a4.801 4.801 0 0 0-3.894 1.995 4.801 4.801 0 0 0-3.894-1.995c-.149 0-.288.026-.437.044v1.75c.149-.018.288-.044.437-.044a3.063 3.063 0 0 1 3.01 2.538v.017H3.75v4.375h11.331V8.081h1.75v4.375H28.25V8.09H16.849Z"></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--giftFilledLarge"><path d="M16.831 28.215h7.044A2.633 2.633 0 0 0 26.5 25.59V14.215h-9.669v14Z"></path><path d="M5.5 25.59a2.633 2.633 0 0 0 2.625 2.625h6.956v-14H5.5V25.59Z"></path><path d="M16.849 8.09v-.017a3.064 3.064 0 0 1 3.01-2.538c.175 0 .35.026.525.053v-1.75c-.175-.018-.341-.053-.525-.053a4.801 4.801 0 0 0-3.894 1.995 4.801 4.801 0 0 0-3.894-1.995c-.149 0-.288.026-.437.044v1.75c.149-.018.288-.044.437-.044a3.063 3.063 0 0 1 3.01 2.538v.017H3.75v4.375h11.331V8.081h1.75v4.375H28.25V8.09H16.849Z"></path></svg>';
 
 class IconGiftFilledLarge extends HTMLElement {
     constructor () {

package/dist/IconGiftLarge.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--giftLarge"><path d="M16.875 8.125a3.045 3.045 0 0 1 2.975-2.546c.176 0 .352.017.525.052v-1.75a3.439 3.439 0 0 0-.525-.052A4.804 4.804 0 0 0 16 5.824a4.803 4.803 0 0 0-3.938-1.995 3.7 3.7 0 0 0-.437.044v1.75c.146-.013.292-.013.438 0a3.062 3.062 0 0 1 3.01 2.502H3.75v6.125H5.5v11.375a2.625 2.625 0 0 0 2.625 2.625h15.75a2.625 2.625 0 0 0 2.625-2.625V14.25h1.75V8.125H16.875ZM15.125 26.5h-7a.875.875 0 0 1-.875-.875V14.25h7.875V26.5Zm0-14H5.5V9.875h9.625V12.5Zm9.625 13.125a.875.875 0 0 1-.875.875h-7V14.25h7.875v11.375ZM26.5 12.5h-9.625V9.875H26.5V12.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--giftLarge"><path d="M16.875 8.125a3.045 3.045 0 0 1 2.975-2.546c.176 0 .352.017.525.052v-1.75a3.439 3.439 0 0 0-.525-.052A4.804 4.804 0 0 0 16 5.824a4.803 4.803 0 0 0-3.938-1.995 3.7 3.7 0 0 0-.437.044v1.75c.146-.013.292-.013.438 0a3.062 3.062 0 0 1 3.01 2.502H3.75v6.125H5.5v11.375a2.625 2.625 0 0 0 2.625 2.625h15.75a2.625 2.625 0 0 0 2.625-2.625V14.25h1.75V8.125H16.875ZM15.125 26.5h-7a.875.875 0 0 1-.875-.875V14.25h7.875V26.5Zm0-14H5.5V9.875h9.625V12.5Zm9.625 13.125a.875.875 0 0 1-.875.875h-7V14.25h7.875v11.375ZM26.5 12.5h-9.625V9.875H26.5V12.5Z"></path></svg>';
 
 class IconGiftLarge extends HTMLElement {
     constructor () {

package/dist/IconGluten.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--gluten"><path d="M11.933 7.377c-.244.113-.697.314-1.193.566.087-.27.14-.548.14-.845 0-1.341-1.935-4.504-2.318-5.122l-.558-.889-.557.889c-.392.618-2.318 3.78-2.318 5.122 0 .297.061.584.14.854a23.42 23.42 0 0 0-1.202-.575l-.95-.427.035 1.046c.026.81.148 3.537.74 4.417a2.398 2.398 0 0 0 3.32.662c.052-.035.087-.079.139-.114v1.847h1.307V12.97s.07.07.113.096a2.378 2.378 0 0 0 1.795.366 2.366 2.366 0 0 0 1.524-1.01c.593-.88.74-3.599.767-4.418l.035-1.045-.959.427v-.009Zm-5.453 4.6c-.497.331-1.168.2-1.507-.296-.2-.305-.375-1.455-.462-2.649 1.063.54 2.065 1.142 2.265 1.447a1.09 1.09 0 0 1-.296 1.507v-.009Zm-.053-4.879c0-.575.802-2.169 1.569-3.51.766 1.341 1.568 2.935 1.568 3.51 0 .863-.706 1.568-1.568 1.568a1.573 1.573 0 0 1-1.569-1.568Zm4.574 4.583c-.165.244-.41.4-.688.462a1.06 1.06 0 0 1-.81-.166 1.09 1.09 0 0 1-.296-1.507c.2-.305 1.21-.897 2.273-1.429-.096 1.194-.278 2.344-.479 2.649v-.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--gluten"><path d="M11.933 7.377c-.244.113-.697.314-1.193.566.087-.27.14-.548.14-.845 0-1.341-1.935-4.504-2.318-5.122l-.558-.889-.557.889c-.392.618-2.318 3.78-2.318 5.122 0 .297.061.584.14.854a23.42 23.42 0 0 0-1.202-.575l-.95-.427.035 1.046c.026.81.148 3.537.74 4.417a2.398 2.398 0 0 0 3.32.662c.052-.035.087-.079.139-.114v1.847h1.307V12.97s.07.07.113.096a2.378 2.378 0 0 0 1.795.366 2.366 2.366 0 0 0 1.524-1.01c.593-.88.74-3.599.767-4.418l.035-1.045-.959.427v-.009Zm-5.453 4.6c-.497.331-1.168.2-1.507-.296-.2-.305-.375-1.455-.462-2.649 1.063.54 2.065 1.142 2.265 1.447a1.09 1.09 0 0 1-.296 1.507v-.009Zm-.053-4.879c0-.575.802-2.169 1.569-3.51.766 1.341 1.568 2.935 1.568 3.51 0 .863-.706 1.568-1.568 1.568a1.573 1.573 0 0 1-1.569-1.568Zm4.574 4.583c-.165.244-.41.4-.688.462a1.06 1.06 0 0 1-.81-.166 1.09 1.09 0 0 1-.296-1.507c.2-.305 1.21-.897 2.273-1.429-.096 1.194-.278 2.344-.479 2.649v-.01Z"></path></svg>';
 
 class IconGluten extends HTMLElement {
     constructor () {

package/dist/IconGlutenLarge.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--glutenLarge"><path d="M23.464 18.288a43.4 43.4 0 0 0-1.36.043c.689-1.62.846-5.185.872-5.943l.052-1.395-1.272.567c-.323.14-1.185.54-2.144 1.037.183-.453.288-.941.288-1.455 0-1.83-2.632-6.127-3.155-6.972l-.74-1.185-.741 1.185c-.532.845-3.155 5.142-3.155 6.972 0 .514.104 1.01.287 1.464a45.25 45.25 0 0 0-2.143-1.055l-1.273-.575.044 1.394c.026.759.165 4.332.845 5.952a25.135 25.135 0 0 0-1.324-.043L7.15 18.26l.593 1.264c.357.758 2.196 4.584 3.512 5.438a3.41 3.41 0 0 0 1.839.549c.244 0 .479-.026.723-.079a3.311 3.311 0 0 0 1.316-.61v4.183h1.743v-4.174c.592.436 1.307.68 2.03.68.628 0 1.273-.174 1.839-.54 1.316-.854 3.163-4.68 3.512-5.438l.593-1.264-1.395.018h.009ZM20.44 17.8a1.656 1.656 0 1 1-2.745-1.856c.314-.462 1.856-1.378 3.468-2.17-.14 1.795-.41 3.564-.723 4.026ZM16.004 6.33c1.055 1.83 2.153 4.026 2.153 4.82a2.157 2.157 0 0 1-2.153 2.152 2.157 2.157 0 0 1-2.152-2.153c0-.793 1.098-2.989 2.152-4.819Zm-1.708 9.63a1.665 1.665 0 0 1-.453 2.3c-.366.244-.81.332-1.246.244a1.65 1.65 0 0 1-1.055-.705c-.305-.462-.566-2.24-.697-4.027 1.604.81 3.146 1.726 3.451 2.188Zm.2 7.05a1.669 1.669 0 0 1-2.291.497c-.47-.305-1.412-1.822-2.24-3.416 1.795.104 3.573.33 4.035.636a1.656 1.656 0 0 1 .497 2.292v-.01Zm5.308.488c-.366.244-.81.322-1.246.227a1.656 1.656 0 0 1-1.046-.724 1.614 1.614 0 0 1-.227-1.246c.096-.436.349-.802.724-1.046.47-.305 2.24-.531 4.035-.636-.828 1.595-1.778 3.12-2.24 3.416v.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--glutenLarge"><path d="M23.464 18.288a43.4 43.4 0 0 0-1.36.043c.689-1.62.846-5.185.872-5.943l.052-1.395-1.272.567c-.323.14-1.185.54-2.144 1.037.183-.453.288-.941.288-1.455 0-1.83-2.632-6.127-3.155-6.972l-.74-1.185-.741 1.185c-.532.845-3.155 5.142-3.155 6.972 0 .514.104 1.01.287 1.464a45.25 45.25 0 0 0-2.143-1.055l-1.273-.575.044 1.394c.026.759.165 4.332.845 5.952a25.135 25.135 0 0 0-1.324-.043L7.15 18.26l.593 1.264c.357.758 2.196 4.584 3.512 5.438a3.41 3.41 0 0 0 1.839.549c.244 0 .479-.026.723-.079a3.311 3.311 0 0 0 1.316-.61v4.183h1.743v-4.174c.592.436 1.307.68 2.03.68.628 0 1.273-.174 1.839-.54 1.316-.854 3.163-4.68 3.512-5.438l.593-1.264-1.395.018h.009ZM20.44 17.8a1.656 1.656 0 1 1-2.745-1.856c.314-.462 1.856-1.378 3.468-2.17-.14 1.795-.41 3.564-.723 4.026ZM16.004 6.33c1.055 1.83 2.153 4.026 2.153 4.82a2.157 2.157 0 0 1-2.153 2.152 2.157 2.157 0 0 1-2.152-2.153c0-.793 1.098-2.989 2.152-4.819Zm-1.708 9.63a1.665 1.665 0 0 1-.453 2.3c-.366.244-.81.332-1.246.244a1.65 1.65 0 0 1-1.055-.705c-.305-.462-.566-2.24-.697-4.027 1.604.81 3.146 1.726 3.451 2.188Zm.2 7.05a1.669 1.669 0 0 1-2.291.497c-.47-.305-1.412-1.822-2.24-3.416 1.795.104 3.573.33 4.035.636a1.656 1.656 0 0 1 .497 2.292v-.01Zm5.308.488c-.366.244-.81.322-1.246.227a1.656 1.656 0 0 1-1.046-.724 1.614 1.614 0 0 1-.227-1.246c.096-.436.349-.802.724-1.046.47-.305 2.24-.531 4.035-.636-.828 1.595-1.778 3.12-2.24 3.416v.009Z"></path></svg>';
 
 class IconGlutenLarge extends HTMLElement {
     constructor () {

package/dist/IconGoogleVoice.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--googleVoice"><g clip-path="url(#prefix__clip0_18_1955)"><path d="M12.147 10.126a1.007 1.007 0 0 0-.743-.324 1.032 1.032 0 0 0-.727.307l-.717.7a.788.788 0 0 1-.534.219.796.796 0 0 1-.551-.228L5.664 7.562a.77.77 0 0 1 0-1.076l.586-.595c.577-.595.595-.997 0-1.584l-2.17-2.16a1.12 1.12 0 0 0-1.654.052 4.095 4.095 0 0 0-.997 2.765 8.076 8.076 0 0 0 1.61 4.786c1.75 2.511 3.98 4.471 7.105 5.119.41.088.83.135 1.25.14a4.102 4.102 0 0 0 2.993-1.216.745.745 0 0 0 0-1.234 83.951 83.951 0 0 0-2.24-2.433Zm-.752 3.562a4.514 4.514 0 0 1-.989-.114C8 13.066 5.98 11.614 4.106 8.98A6.781 6.781 0 0 1 2.75 4.964a2.809 2.809 0 0 1 .551-1.75L4.09 4l1.076 1.094c-.193.201-.333.341-.464.49a2.065 2.065 0 0 0 0 2.896l3.211 3.238a2.048 2.048 0 0 0 1.514.656c.54 0 1.057-.21 1.444-.586l.096-.088.429-.42 1.75 1.873a2.791 2.791 0 0 1-1.75.534ZM9.032 1.227h-.06c-.508 0-.71.174-.71.7V7.44c0 .394.167.56.552.56h5.53c.498 0 .682-.201.682-.683a6.177 6.177 0 0 0-5.994-6.09Zm4.14 5.442H9.548V2.575a4.857 4.857 0 0 1 4.068 4.086l-.446.009Z"></path></g><defs><clipPath id="prefix__clip0_18_1955"><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--googleVoice"><g clip-path="url(#prefix__clip0_18_1955)"><path d="M12.147 10.126a1.007 1.007 0 0 0-.743-.324 1.032 1.032 0 0 0-.727.307l-.717.7a.788.788 0 0 1-.534.219.796.796 0 0 1-.551-.228L5.664 7.562a.77.77 0 0 1 0-1.076l.586-.595c.577-.595.595-.997 0-1.584l-2.17-2.16a1.12 1.12 0 0 0-1.654.052 4.095 4.095 0 0 0-.997 2.765 8.076 8.076 0 0 0 1.61 4.786c1.75 2.511 3.98 4.471 7.105 5.119.41.088.83.135 1.25.14a4.102 4.102 0 0 0 2.993-1.216.745.745 0 0 0 0-1.234 83.951 83.951 0 0 0-2.24-2.433Zm-.752 3.562a4.514 4.514 0 0 1-.989-.114C8 13.066 5.98 11.614 4.106 8.98A6.781 6.781 0 0 1 2.75 4.964a2.809 2.809 0 0 1 .551-1.75L4.09 4l1.076 1.094c-.193.201-.333.341-.464.49a2.065 2.065 0 0 0 0 2.896l3.211 3.238a2.048 2.048 0 0 0 1.514.656c.54 0 1.057-.21 1.444-.586l.096-.088.429-.42 1.75 1.873a2.791 2.791 0 0 1-1.75.534ZM9.032 1.227h-.06c-.508 0-.71.174-.71.7V7.44c0 .394.167.56.552.56h5.53c.498 0 .682-.201.682-.683a6.177 6.177 0 0 0-5.994-6.09Zm4.14 5.442H9.548V2.575a4.857 4.857 0 0 1 4.068 4.086l-.446.009Z"></path></g><defs><clipPath id="prefix__clip0_18_1955"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
 
 class IconGoogleVoice extends HTMLElement {
     constructor () {

package/dist/IconGoogleVoiceLarge.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--googleVoiceLarge"><path d="M21.967 20.445a1.872 1.872 0 0 0-2.712 0c-.525.534-.875.875-1.216 1.199a1.36 1.36 0 0 1-1.925 0l-5.705-5.845a1.391 1.391 0 0 1 0-1.916l1.015-1.068c1.023-1.059 1.05-1.75 0-2.835L7.6 6.112A1.96 1.96 0 0 0 6.182 5.5a2.056 2.056 0 0 0-1.557.735 7.376 7.376 0 0 0-1.75 4.909 14.639 14.639 0 0 0 2.852 8.575c3.177 4.488 7.07 7.988 12.61 9.161.733.157 1.48.24 2.23.245a7.245 7.245 0 0 0 5.312-2.179 1.349 1.349 0 0 0 .06-2.196c-1.312-1.453-2.642-2.879-3.972-4.305Zm-1.382 6.93a9.014 9.014 0 0 1-1.864-.21c-4.471-.945-8.129-3.631-11.541-8.461a12.88 12.88 0 0 1-2.555-7.552 5.618 5.618 0 0 1 1.312-3.77.289.289 0 0 1 .245-.132.227.227 0 0 1 .193.088L7.994 9l2.187 2.205.158.175c-.06.08-.125.155-.193.227-.472.482-.752.77-1.032 1.077a3.132 3.132 0 0 0 .052 4.375l5.705 5.792a3.062 3.062 0 0 0 2.214.937 3.106 3.106 0 0 0 2.17-.875l.175-.175 1.076-1.06a.14.14 0 0 1 .096-.043.121.121 0 0 1 .088.044c1.4 1.487 2.625 2.852 3.867 4.165a5.54 5.54 0 0 1-3.972 1.531Zm-2.223-24.5h-.113c-.928 0-1.287.333-1.295 1.269 0 3.316 0 6.632-.044 9.957 0 .709.306 1.006.997 1.006 1.663 0 8.295 0 9.958-.043.875 0 1.242-.368 1.234-1.243A11.156 11.156 0 0 0 18.362 2.875Zm4.734 10.5H18.67V4.677a9.38 9.38 0 0 1 8.706 8.698h-4.279Z"></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--googleVoiceLarge"><path d="M21.967 20.445a1.872 1.872 0 0 0-2.712 0c-.525.534-.875.875-1.216 1.199a1.36 1.36 0 0 1-1.925 0l-5.705-5.845a1.391 1.391 0 0 1 0-1.916l1.015-1.068c1.023-1.059 1.05-1.75 0-2.835L7.6 6.112A1.96 1.96 0 0 0 6.182 5.5a2.056 2.056 0 0 0-1.557.735 7.376 7.376 0 0 0-1.75 4.909 14.639 14.639 0 0 0 2.852 8.575c3.177 4.488 7.07 7.988 12.61 9.161.733.157 1.48.24 2.23.245a7.245 7.245 0 0 0 5.312-2.179 1.349 1.349 0 0 0 .06-2.196c-1.312-1.453-2.642-2.879-3.972-4.305Zm-1.382 6.93a9.014 9.014 0 0 1-1.864-.21c-4.471-.945-8.129-3.631-11.541-8.461a12.88 12.88 0 0 1-2.555-7.552 5.618 5.618 0 0 1 1.312-3.77.289.289 0 0 1 .245-.132.227.227 0 0 1 .193.088L7.994 9l2.187 2.205.158.175c-.06.08-.125.155-.193.227-.472.482-.752.77-1.032 1.077a3.132 3.132 0 0 0 .052 4.375l5.705 5.792a3.062 3.062 0 0 0 2.214.937 3.106 3.106 0 0 0 2.17-.875l.175-.175 1.076-1.06a.14.14 0 0 1 .096-.043.121.121 0 0 1 .088.044c1.4 1.487 2.625 2.852 3.867 4.165a5.54 5.54 0 0 1-3.972 1.531Zm-2.223-24.5h-.113c-.928 0-1.287.333-1.295 1.269 0 3.316 0 6.632-.044 9.957 0 .709.306 1.006.997 1.006 1.663 0 8.295 0 9.958-.043.875 0 1.242-.368 1.234-1.243A11.156 11.156 0 0 0 18.362 2.875Zm4.734 10.5H18.67V4.677a9.38 9.38 0 0 1 8.706 8.698h-4.279Z"></path></svg>';
 
 class IconGoogleVoiceLarge extends HTMLElement {
     constructor () {

package/dist/IconGridView.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--gridView"><path d="M6.906 6.906H2.094V2.094h4.812v4.812Zm-3.5-1.312h2.188V3.406H3.406v2.188Zm10.5 1.312H9.094V2.094h4.812v4.812Zm-3.5-1.312h2.188V3.406h-2.188v2.188Zm-3.5 8.312H2.094V9.094h4.812v4.812Zm-3.5-1.312h2.188v-2.188H3.406v2.188Zm10.5 1.312H9.094V9.094h4.812v4.812Zm-3.5-1.312h2.188v-2.188h-2.188v2.188Z"></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--gridView"><path d="M6.906 6.906H2.094V2.094h4.812v4.812Zm-3.5-1.312h2.188V3.406H3.406v2.188Zm10.5 1.312H9.094V2.094h4.812v4.812Zm-3.5-1.312h2.188V3.406h-2.188v2.188Zm-3.5 8.312H2.094V9.094h4.812v4.812Zm-3.5-1.312h2.188v-2.188H3.406v2.188Zm10.5 1.312H9.094V9.094h4.812v4.812Zm-3.5-1.312h2.188v-2.188h-2.188v2.188Z"></path></svg>';
 
 class IconGridView extends HTMLElement {
     constructor () {

package/dist/IconGridViewFilled.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--gridViewFilled"><path d="M2.094 6.906h4.812V2.094H2.094v4.812Z"></path><path d="M9.094 6.906h4.812V2.094H9.094v4.812Z"></path><path d="M2.094 13.906h4.812V9.094H2.094v4.812Z"></path><path d="M9.094 13.906h4.812V9.094H9.094v4.812Z"></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--gridViewFilled"><path d="M2.094 6.906h4.812V2.094H2.094v4.812Z"></path><path d="M9.094 6.906h4.812V2.094H9.094v4.812Z"></path><path d="M2.094 13.906h4.812V9.094H2.094v4.812Z"></path><path d="M9.094 13.906h4.812V9.094H9.094v4.812Z"></path></svg>';
 
 class IconGridViewFilled extends HTMLElement {
     constructor () {