@layer components {
  .icon {
    -webkit-touch-callout: none;
    background-color: currentColor;
    block-size: var(--icon-size, 1em);
    display: inline-block;
    flex-shrink: 0;
    inline-size: var(--icon-size, 1em);
    mask-image: var(--svg);
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: var(--icon-size, 1em);
    pointer-events: none;
    position: relative;
    user-select: none;
  }

  img.icon {
    background: none;
  }

  /* Register icons here, one line each. The SVG goes in app/assets/images/
     and is painted with currentColor via the mask, so it needs no fill.

     .icon--check { --svg: url("check.svg"); }
     .icon--close { --svg: url("/assets/close-0d771185.svg"); }

     Non-square marks override the mask size individually:

     .icon--wordmark {
       --svg: url("wordmark.svg");
       inline-size: 1.14em;
       mask-size: 1.14em var(--icon-size, 1em);
     }
  */
  .icon--ambulance { --svg: url("/assets/ambulance-e75fc656.svg"); }
  .icon--arrow-left { --svg: url("/assets/arrow-left-04b94095.svg"); }
  .icon--arrow-right { --svg: url("/assets/arrow-right-d616830a.svg"); }
  .icon--attach { --svg: url("/assets/attach-9d2566d0.svg"); }
  .icon--auto-theme { --svg: url("/assets/auto-theme-529b03de.svg"); }
  .icon--bandage { --svg: url("/assets/bandage-097a3250.svg"); }
  .icon--bell { --svg: url("/assets/bell-a336bf3a.svg"); }
  .icon--bell-electric { --svg: url("/assets/bell-electric-2c0f478d.svg"); }
  .icon--boxing-glove { --svg: url("/assets/boxing-glove-ae9b0601.svg"); }
  .icon--briefcase-medical { --svg: url("/assets/briefcase-medical-c62758f0.svg"); }
  .icon--calendar { --svg: url("/assets/calendar-336c8469.svg"); }
  .icon--calendar-add { --svg: url("/assets/calendar-add-302718c8.svg"); }
  .icon--camera { --svg: url("/assets/camera-fc2ac746.svg"); }
  .icon--card-stack { --svg: url("/assets/card-stack-76991dc8.svg"); }
  .icon--caret-right { --svg: url("/assets/caret-right-8e2a4a2d.svg"); }
  .icon--church { --svg: url("/assets/church-50b5fc89.svg"); }
  .icon--clipboard-check { --svg: url("/assets/clipboard-check-34dd1f62.svg"); }
  .icon--clock-8 { --svg: url("/assets/clock-8-54c551b7.svg"); }
  .icon--close { --svg: url("/assets/close-0d771185.svg"); }
  .icon--copy { --svg: url("/assets/copy-6d48f058.svg"); }
  .icon--crosshair { --svg: url("/assets/crosshair-0188a4ce.svg"); }
  .icon--download { --svg: url("/assets/download-51e2c9b8.svg"); }
  .icon--edit-document { --svg: url("/assets/edit-document-ea2c2149.svg"); }
  .icon--filter { --svg: url("/assets/filter-a3706552.svg"); }
  .icon--fire-extinguisher { --svg: url("/assets/fire-extinguisher-d05b1b5f.svg"); }
  .icon--flame { --svg: url("/assets/flame-091c95fd.svg"); }
  .icon--floorplan { --svg: url("/assets/floorplan-1ae60b01.svg"); }
  .icon--google-calendar { --svg: url("/assets/google-calendar-768018ea.svg"); }
  .icon--grid { --svg: url("/assets/grid-94bceb69.svg"); }
  .icon--handshake { --svg: url("/assets/handshake-4c65b0b5.svg"); }
  .icon--heart-pulse { --svg: url("/assets/heart-pulse-8700fea6.svg"); }
  .icon--hospital { --svg: url("/assets/hospital-b5ced626.svg"); }
  .icon--lock { --svg: url("/assets/lock-c1f83a3d.svg"); }
  .icon--logout { --svg: url("/assets/logout-95daeb21.svg"); }
  .icon--megaphone { --svg: url("/assets/megaphone-fd33195f.svg"); }
  .icon--menu { --svg: url("/assets/menu-ba8040a4.svg"); }
  .icon--message { --svg: url("/assets/message-bda4abae.svg"); }
  .icon--moon { --svg: url("/assets/moon-b747b736.svg"); }
  .icon--outlook { --svg: url("/assets/outlook-7f2b7826.svg"); }
  .icon--pencil { --svg: url("/assets/pencil-a9a25291.svg"); }
  .icon--pill-bottle { --svg: url("/assets/pill-bottle-b8e29729.svg"); }
  .icon--pistol { --svg: url("/assets/pistol-55730ade.svg"); }
  .icon--plus { --svg: url("/assets/plus-d372f137.svg"); }
  .icon--police-badge { --svg: url("/assets/police-badge-7c817ace.svg"); }
  .icon--radio-tower { --svg: url("/assets/radio-tower-779da647.svg"); }
  .icon--rifle { --svg: url("/assets/rifle-f8eaadae.svg"); }
  .icon--search { --svg: url("/assets/search-e5c201fd.svg"); }
  .icon--send { --svg: url("/assets/send-db74d534.svg"); }
  .icon--settings { --svg: url("/assets/settings-f86fa2b2.svg"); }
  .icon--shield-half { --svg: url("/assets/shield-half-ca1a02f7.svg"); }
  .icon--shield-watch { --svg: url("/assets/shield-watch-de82b931.svg"); }
  .icon--star { --svg: url("/assets/star-f55a4c63.svg"); }
  .icon--sun { --svg: url("/assets/sun-fa8b7291.svg"); }
  .icon--table { --svg: url("/assets/table-65035889.svg"); }
  .icon--target { --svg: url("/assets/target-eb300c35.svg"); }
  .icon--trash { --svg: url("/assets/trash-e56b53a7.svg"); }
  .icon--trophy { --svg: url("/assets/trophy-211db450.svg"); }
  .icon--vertical-ellipsis { --svg: url("/assets/vertical-ellipsis-3336cef1.svg"); }
  .icon--walkie-talkie { --svg: url("/assets/walkie-talkie-1a32d876.svg"); }
  .icon--warning { --svg: url("/assets/warning-6e0af12c.svg"); }
  .icon--wrench { --svg: url("/assets/wrench-a37b1bda.svg"); }
}