@layer components {
  .icon {
    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;
    user-select: none;
  }

  .icon--add { --svg: url("/assets/icons/add-6a123953.svg"); }
  .icon--remove { --svg: url("/assets/icons/remove-ba805c77.svg"); }
  .icon--close { --svg: url("/assets/icons/close-0a2a1828.svg"); }
  .icon--more-vert { --svg: url("/assets/icons/more_vert-20644bbb.svg"); }
  .icon--trash { --svg: url("/assets/icons/delete-391c5bd0.svg"); }
  .icon--sort { --svg: url("/assets/icons/sort-89a8f9f2.svg"); }
  .icon--bookmark { --svg: url("/assets/icons/bookmark-85eaf5ac.svg"); }
  .icon--bookmark-solid { --svg: url("/assets/icons/bookmark_solid-fbd81923.svg"); }
  .icon--location-on { --svg: url("/assets/icons/location_on-ee8e51f4.svg"); }
}