Thanks for the advice @PaulNewton
I am using the Dawn theme and have added the pop-up blocks on the Product Information.
I have added the following code to the bottom of theme.liquid in the Layout folder of the code.
<style>
.product-popup-modal__button::before{
content: "";
display: inline-block;
width: 20px;
height: 20px;
background-image: url("https://cdn-icons-png.flaticon.com/512/687/687689.png");
background-size: cover;
margin-right: 5px;
position: relative;
top: 5px;
}
</style>
The above code added the icon found in the background-image part of the code above.
What this does is add the same icon to each pop-up, as shown in the image in the original post.
I've found that the other icons are in icon-accordion.liquid
Ideally, i would like to have clipboard as one of the icons, the ruler for another icon, and choose the icons for the other two popups.
I do not know how I would reference the icons stored in icon-accordion.liquid.
If I am not able to find a way to have a unique icon for each pop-up, how would I be able to reference one icon, apple for example, on the above code.
The code for apple is as follows on icon-accordion.liquid.
{%- if icon != 'none' -%}
<svg
class="icon icon-accordion"
aria-hidden="true"
focusable="false"
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 20 20"
>
{%- case icon -%}
{%- when 'apple' -%}
<path d="M10.6616 1.84311C11.4997 0.994336 12.5829 0.555929 13.3364 0.406304C13.4671 0.380359 13.6027 0.407635 13.7132 0.48208C13.8237 0.556525 13.8999 0.671982 13.9249 0.802834C14.2685 2.59987 13.7042 3.90202 12.8265 4.77303C11.9732 5.61989 10.8528 6.03394 10.0739 6.16284C9.94237 6.1846 9.80763 6.15297 9.69957 6.07495C9.59151 5.99694 9.51906 5.87901 9.49832 5.74735C9.22227 3.99494 9.8034 2.71219 10.6616 1.84311ZM10.4322 5.05051C10.9838 4.87866 11.6201 4.56143 12.1221 4.06324C12.6862 3.5034 13.1028 2.69625 13.0153 1.52987C12.4847 1.71504 11.8688 2.04373 11.3731 2.54573C10.8104 3.1156 10.3882 3.92035 10.4322 5.05051Z" />
<path d="M6.74466 1.36403C6.82081 1.09859 7.09771 0.945143 7.36315 1.02129C8.4313 1.32771 10.4241 2.68991 10.4999 5.68393C10.5069 5.95998 10.2888 6.18943 10.0127 6.19643C9.73668 6.20342 9.50723 5.9853 9.50024 5.70925C9.43732 3.22559 7.81131 2.19019 7.0874 1.98252C6.82196 1.90637 6.66851 1.62947 6.74466 1.36403Z" />
<path d="M5.7976 5.51618C5.08273 5.80325 4.40428 6.33518 3.91474 6.94951C3.01446 8.0793 2.53613 9.47907 2.53613 11.1986C2.53613 14.3276 4.3809 16.9669 7.07997 18.0835C7.41131 18.2206 7.75875 18.2099 8.22329 18.1348C8.32226 18.1188 8.42919 18.0991 8.54253 18.0782C8.92684 18.0074 9.38491 17.923 9.85684 17.923C10.3302 17.923 10.8107 18.007 11.2255 18.0795C11.3576 18.1026 11.4831 18.1246 11.5995 18.1422C12.1188 18.2211 12.517 18.2314 12.872 18.0838C15.6049 16.9478 17.4589 14.3 17.4639 11.2113C17.3883 9.75258 17.1668 8.70553 16.7428 7.88888C16.3278 7.08972 15.6964 6.46856 14.717 5.90109C13.9224 5.57109 13.3583 5.45194 12.9406 5.4387C12.5294 5.42567 12.2379 5.51434 11.9817 5.63936C11.8475 5.70489 11.72 5.78185 11.5797 5.86982C11.5575 5.8837 11.5348 5.89804 11.5115 5.91271C11.3938 5.98697 11.2627 6.06966 11.1279 6.14411C10.7884 6.3316 10.3877 6.48938 9.85684 6.48938C9.22764 6.48938 8.83995 6.29877 8.52175 6.04985C8.44189 5.98738 8.34486 5.90226 8.26392 5.83126C8.22148 5.79404 8.18347 5.76069 8.15468 5.73653C8.04777 5.64681 7.94466 5.57121 7.8199 5.50793C7.21536 5.2013 6.5101 5.23007 5.7976 5.51618ZM5.42495 4.58821C6.32089 4.22843 7.33981 4.14315 8.27225 4.61609C8.4901 4.72659 8.65843 4.8538 8.79753 4.97054C8.86924 5.03072 8.92077 5.07647 8.96623 5.11683C9.02365 5.16781 9.07139 5.2102 9.13788 5.26221C9.30136 5.39009 9.47644 5.48938 9.85684 5.48938C10.1679 5.48938 10.4012 5.4031 10.6445 5.26872C10.7515 5.20961 10.8536 5.14531 10.9708 5.07145C10.9959 5.05563 11.0217 5.03937 11.0484 5.02262C11.1936 4.93153 11.3585 4.83076 11.5431 4.74067C11.9247 4.55444 12.3768 4.42033 12.9722 4.4392C13.556 4.4577 14.2527 4.62242 15.1322 4.99079L15.1611 5.00288L15.1882 5.01846C16.3065 5.66113 17.1032 6.41295 17.6303 7.42805C18.1508 8.43058 18.3851 9.64589 18.4633 11.173L18.4639 11.1858V11.1986C18.4639 14.7063 16.3566 17.7183 13.2559 19.0072C12.6339 19.2658 12.0024 19.2149 11.4494 19.1309C11.2863 19.1061 11.1317 19.0792 10.9824 19.0532C10.5912 18.9849 10.2359 18.923 9.85684 18.923C9.48487 18.923 9.15235 18.984 8.78723 19.0509C8.65765 19.0747 8.52396 19.0992 8.38294 19.122C7.87454 19.2042 7.29552 19.2549 6.69769 19.0075C3.6271 17.7372 1.53613 14.7348 1.53613 11.1986C1.53613 9.28002 2.07513 7.65346 3.13268 6.32632C3.71714 5.59286 4.53139 4.94704 5.42495 4.58821Z" />
{%- when 'banana' -%}
<path d="M9.58939 2.04935C9.70278 1.96927 9.84436 1.93993 9.98024 1.96837L12.1559 2.42361C12.408 2.47637 12.5788 2.71205 12.5504 2.96807L12.3138 5.10404C12.3555 5.13755 12.4053 5.17072 12.4788 5.21958C12.5193 5.24655 12.567 5.27831 12.6245 5.31756C12.9513 5.54051 13.3912 5.88157 13.6898 6.53073C14.024 7.25761 14.303 8.11357 14.5807 8.96549C14.6035 9.03552 14.6264 9.10552 14.6492 9.17542C14.9546 10.1102 15.2674 11.0396 15.6678 11.8693C16.068 12.6988 16.5398 13.3939 17.1428 13.8785C17.7344 14.3539 18.477 14.6469 19.4685 14.6364C19.6178 14.6349 19.76 14.7001 19.8562 14.8144C19.9524 14.9287 19.9925 15.0799 19.9655 15.2268C19.8731 15.7293 19.5512 16.4108 18.893 16.9222C18.2217 17.4439 17.2418 17.7572 15.8976 17.5804C14.6826 17.4511 13.1852 16.8785 12.0063 15.311C11.9882 15.287 11.9702 15.2627 11.9522 15.2381C11.1194 17.0387 8.72378 19.2058 4.58412 18.6145C4.35292 18.5815 4.17538 18.3929 4.15645 18.1601C4.13753 17.9273 4.28227 17.7124 4.50511 17.6425C4.53208 17.634 4.56314 17.625 4.59775 17.615C4.97981 17.5043 5.7956 17.2679 6.34999 16.237C6.61683 15.4808 6.73258 14.9216 6.77285 14.4342C6.81396 13.9365 6.77848 13.4941 6.72455 12.9516C6.71963 12.9022 6.7146 12.8522 6.70951 12.8016C6.60065 11.7201 6.46178 10.3405 6.80091 7.78357C6.89499 7.07423 7.2501 6.36099 7.70563 5.80064C8.07332 5.34834 8.54644 4.94741 9.06367 4.74229L9.38236 2.39062C9.40101 2.25306 9.476 2.12944 9.58939 2.04935ZM11.2725 14.1084C10.5074 12.557 10.0209 10.3842 10.0365 7.37309C10.038 7.09695 10.263 6.87426 10.5391 6.87569C10.8153 6.87712 11.038 7.10213 11.0365 7.37827C11.017 11.1373 11.8091 13.3852 12.8055 14.71C13.7938 16.0241 15.023 16.4829 16.009 16.5866L16.0224 16.588C17.1418 16.7365 17.8462 16.4692 18.2794 16.1326C18.4907 15.9684 18.6475 15.7801 18.7597 15.5972C17.871 15.4873 17.1327 15.1533 16.5164 14.658C15.752 14.0438 15.2006 13.2024 14.7671 12.3039C14.3337 11.4057 14.0024 10.4157 13.6986 9.48599C13.6772 9.42039 13.6559 9.35515 13.6348 9.29028C13.3514 8.42141 13.09 7.61997 12.7812 6.94854C12.5929 6.53906 12.3248 6.32367 12.0609 6.1436C12.0354 6.12619 12.0066 6.10708 11.9759 6.08667C11.8678 6.01486 11.7357 5.92709 11.6375 5.84192C11.4956 5.71899 11.3146 5.5136 11.3025 5.20124C11.3015 5.17638 11.3024 5.15148 11.3051 5.12675L11.5065 3.30939L10.3012 3.05718L10.0118 5.19278C9.9833 5.4028 9.82551 5.57207 9.61799 5.61518C9.27759 5.6859 8.85406 5.97324 8.48157 6.43144C8.11516 6.88218 7.85688 7.42763 7.79223 7.91505C7.46822 10.358 7.59866 11.6519 7.70409 12.6977C7.70935 12.7499 7.71456 12.8016 7.71964 12.8527C7.77404 13.3998 7.81867 13.9208 7.76945 14.5165C7.71999 15.1152 7.57786 15.77 7.27992 16.6066C7.27203 16.6288 7.26257 16.6504 7.25163 16.6712C7.02512 17.1028 6.7592 17.4359 6.48673 17.6938C9.65464 17.4589 11.1039 15.2127 11.2725 14.1084Z" />
<path d="M6.27111 11.8004C6.52894 11.3027 6.60251 10.9081 6.58566 10.7451L7.58035 10.6422C7.62656 11.0889 7.45335 11.6923 7.15905 12.2604C6.85438 12.8486 6.38071 13.4767 5.73385 13.9687C4.86162 14.6322 4.1367 15.0865 3.40292 15.4806C5.55977 15.2705 6.56129 14.7956 6.93741 14.4936L7.56344 15.2734C6.79366 15.8914 4.92577 16.5867 1.00511 16.5867C0.770535 16.5867 0.567494 16.4236 0.516889 16.1946C0.466283 15.9655 0.581721 15.7321 0.794467 15.6332C0.870045 15.5981 0.944324 15.5637 1.01741 15.5298C2.59233 14.7991 3.61321 14.3255 5.12841 13.1728C5.63986 12.7838 6.02365 12.2781 6.27111 11.8004Z" />
{%- endcase -%}
</svg>
{%- endif -%}
Please let me know if there is still something you believe I should add to this question.
Thank you,
