Adding Collapsible Row Icons Refresh Theme

[biznazz101]

Hello, I would like to add additional icon options to the collapsible row (accordion) section in the latest version of the Refresh theme (10.0).

From what I understand I would add the SVG icons as snippet file code then add into the accordion.liquid file is that correct? The one issue I see right away is the SVG code for this image is way too big to be saved in the template, how can I fix that? Thanks!

https://pastebin.com/bvH6vnEq

Current Section Code:

I would guess I just add above the existing icons like so?

{%- when ‘icon name’ -%}

SVG CODE

{%- when ‘icon name-2’ -%}

SVG CODE

{%- when ‘icon name-3’ -%}

SVG CODE

Thank you for the help everyone!!!

[HazilStudiosNYC]

Hey Biz,

Your approach is spot on.
Instead of adding it to the list directly you can also create your own file “icon-apple.liquid” and render it in the if-statement you shared.

This might free up enough characters to support your svg.

Let me know if this worked.

Best,
Flo

[biznazz101]

It did not unfortunately. Whether I add the SVG code directly in as shown in example here:

or use a separate snippet titled apple-icon then render as so:
{%- when ‘apple2’ -%}
{% render ‘icon-apple’ %}

The new option is not available in the theme editor. Any ideas? Thanks!