Where are icons stored in Dawn theme, want to add more

[ccsachs]

I am using the Dawn theme in one of my projects. In that theme, I have the ability to use Collapsible Row blocks on the product page. Each of those blocks allows me to select the related Icon. That pops up a list of icons such as check_mark, box, clipboard, bottle, etc. I want to add a couple more icons but am unable to find where these are store so that I can reference them correctly. 
I found in main-product.liquid a section that calls out each of these options: 

    "type": "collapsible_tab",
      "name": "t:sections.main-product.blocks.collapsible_tab.name",
      "settings": [
        {
          "type": "text",
          "id": "heading",
          "default": "Collapsible row",
          "info": "t:sections.main-product.blocks.collapsible_tab.settings.heading.info",
          "label": "t:sections.main-product.blocks.collapsible_tab.settings.heading.label"
        },
        {
          "type": "select",
          "id": "icon",
          "options": [
            {
              "value": "none",
              "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__1.label"
            },
            {
              "value": "apple",
              "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__2.label"
            },
            {
              "value": "banana",
              "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__3.label"
            },
   .....etc....

That file also had this under a checkbox type section. And I found similar in the collapsible-content.liquid file. However, I am not sure where those icons are located that it is referencing. 

I did see some Icon liquid files in the Snippets area. But those icons don't match the ones being referenced in the collapsible code. 

Here's an example image from the Dawn theme demo store for reference: 

 

[ExpertRookie]

HI @ccsachs 
The icon file is stored in folder snippets
You can try follow this path:
Themes => edit code => snippets

[ccsachs]

@ExpertRookie 
That's what I thought. I did find a bunch of icons files in the Snippets folder. However, these don't match the ones that are available/listed for the collapsible row section. Here are the icon files in my Snippets folder: 

None of these are the referenced ruler, clicpboard, box, etc.   

[ccsachs]

I assume there is an external icon set referenced somewhere. I just can't find where that reference or icon set is located in the code. 

[ExpertRookie]

Hi @ccsachs 
Check the file icon-accordion.liquid, the icons contained in it

[ExpertRookie]

[ccsachs]

@ExpertRookie 
Thanks. I had just found that file as your reply was coming in. 
I have added the icons to that file and am now trying to add the icons to the icon section in the collapsible-content.liquid file. All I did was add one more value-label section and ran into another issue. When saving, I am getting an error:
Unable to update the file
* Invalid JSON in tag 'schema'

Ugh...

[ccsachs]

@ExpertRookie 
Your second image, that is where I am working and ran into the error. I was able to add code to the section in collapsible-content.liquid:

           {
              "value": "hookless",
              "label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__45.label"
            }
 

That let me save the file correctly. 
I found that needed to be added to two areas on the main-product.liquid file as well. That is where the JSON 'schema' error is occuring.

[ccsachs]

And, even though I was successful in adding the icon to the collapsible-content.liquid, it is still not showing up in the options for icons. 

Added a video to show where I am looking

[ExpertRookie]

Hi @ccsachs 
Have you added the code correct?

[ccsachs]

@ExpertRookie 

I hope I am adding the correct code. 

File 1: icon-accordian.liquid
Example of code for another icon:

    {%- when 'washing' -%}
      <path d="M0.38191 4.26524C0.652327 4.19778 0.926646 4.36065 0.994619 4.62903L3.53292 14.6511C3.54914 14.7106 3.60034 14.7479 3.65788 14.7479H16.3422C16.3998 14.7479 16.451 14.7106 16.4672 14.651C16.4673 14.6506 16.4675 14.6502 16.4676 14.6498L19.0054 4.62904C19.0734 4.36066 19.3477 4.19778 19.6181 4.26523C19.8885 4.33269 20.0526 4.60494 19.9847 4.87332L17.4458 14.8982L17.4447 14.9023C17.3149 15.3972 16.867 15.75 16.3422 15.75H3.65788C3.13313 15.75 2.68527 15.3972 2.55542 14.9023L2.55434 14.8982L0.0153513 4.87333C-0.0526214 4.60495 0.111492 4.3327 0.38191 4.26524Z"/>
      <path d="M6.76169 7.36178C6.11228 7.20142 5.40174 7.36303 4.75389 7.71568L4.74572 7.72013L4.73738 7.72427C4.55194 7.81655 4.38964 7.91308 4.21117 8.01923C4.0989 8.08601 3.98022 8.1566 3.84536 8.23232C3.52401 8.41277 3.15453 8.59357 2.72811 8.67939L2.71955 8.68111C2.08915 8.79675 1.53984 8.55856 1.12774 8.33954L1.6044 7.45611C1.97602 7.65361 2.26006 7.74481 2.53197 7.69634C2.80109 7.64144 3.05982 7.52202 3.34815 7.36012C3.43695 7.31026 3.53611 7.25156 3.64095 7.1895C3.84288 7.06996 4.06587 6.93795 4.27647 6.83261C5.06232 6.40671 6.03295 6.1502 7.00242 6.38856C7.69625 6.55146 8.31122 6.91064 8.84283 7.22112C8.93772 7.27654 9.02996 7.33041 9.11951 7.38134C9.54269 7.61551 9.86129 7.74878 10.1516 7.70566C10.5743 7.61348 10.9584 7.3965 11.4176 7.12784C11.4329 7.11892 11.4482 7.10994 11.4636 7.1009C11.8908 6.85074 12.3909 6.55782 12.968 6.42066C13.9716 6.13864 15.01 6.39498 15.8247 6.85665C16.0106 6.953 16.2099 7.06983 16.3941 7.17778C16.5001 7.2399 16.6011 7.29909 16.6916 7.34975C16.9673 7.50401 17.2202 7.62511 17.4814 7.69408C17.6558 7.74014 17.8437 7.72276 18.0658 7.64569C18.2042 7.59767 18.3474 7.52933 18.4995 7.44684L18.9839 8.32612C18.8074 8.42189 18.6102 8.51838 18.399 8.59167C18.0548 8.71111 17.6518 8.77606 17.2218 8.6625C16.8378 8.56111 16.4976 8.39159 16.1957 8.22267C16.064 8.14895 15.9478 8.08055 15.8372 8.01544C15.6731 7.91888 15.5214 7.82959 15.3497 7.741L15.3404 7.73618L15.3312 7.73097C14.673 7.35597 13.9098 7.1946 13.2351 7.38713L13.2233 7.39052L13.2113 7.39332C12.7842 7.49304 12.3982 7.71742 11.9304 7.99113L11.9227 7.99562C11.4802 8.25451 10.9593 8.55926 10.35 8.68837L10.3384 8.69081L10.3268 8.69271C9.64242 8.8049 9.02791 8.47817 8.62508 8.2551L8.62016 8.25237C8.51051 8.19005 8.40451 8.12848 8.30111 8.06845C7.7661 7.75786 7.30134 7.48804 6.76778 7.36325L6.76169 7.36178Z"/>

Following that example, I added the code that was was provided when making the icon in Adobe Illustrator:

    {%- when 'hookless' -%}
      <path d="M40,9.7c0-0.1,0-0.2,0-0.2v0c0-0.4,0-0.7,0-1.1l-0.2-3.9c0-0.2-0.2-0.5-0.5-0.5h-1.5c-0.2,0-0.4,0.2-0.4,0.4
	l0,5.1l0,0l0,0.1c-0.2,0.9-1.2,1.2-1.6,1.2h0l0,0l-5-0.4l0,0l-0.1,0l-0.1,0c-0.7-0.1-1.1,0.3-1.2,0.6l0,0L29.3,11
	c-0.1,0.2-0.3,0.4-0.4,0.5c0,0,0,0,0,0c-0.1,0.1-0.2,0.2-0.3,0.3c-1.5,1.5-3.2,2.6-5.1,3.2c-1.1,0.3-2.3,0.5-3.5,0.5
	c-1.2,0-2.4-0.2-3.5-0.5c-1.9-0.6-3.6-1.6-5.1-3.2c-0.1-0.1-0.2-0.2-0.3-0.3c0,0,0,0,0,0c-0.2-0.2-0.3-0.3-0.4-0.5l-0.1-0.1l0,0
	c-0.2-0.2-0.6-0.6-1.2-0.6l-0.1,0l-0.1,0l0,0l-5,0.4l0,0h0c-0.4,0-1.4-0.3-1.6-1.2l0-0.1l0,0l0-5.1C2.5,4.2,2.3,4,2.1,4H0.6
	C0.4,4,0.2,4.2,0.2,4.5L0,8.3c0,0.4,0,0.7,0,1.1v0c0,0.1,0,0.2,0,0.2c0,1.2,0.1,2.4,0.2,3.5v0l0,0.3c0,0,0,0.1,0,0.2l0,0.1
	c0,0.1,0,0.1,0,0.2c0,0.3,0.1,0.6,0.1,0.9c0,0,0,0,0,0c0.6,3.5,1.9,6.8,3.7,9.8c0,0,0,0.1,0.1,0.1c0.1,0.2,0.3,0.5,0.5,0.7
	c0,0.1,0.1,0.2,0.2,0.2c0.1,0.2,0.3,0.4,0.4,0.6c0.1,0.1,0.2,0.2,0.2,0.3c0.1,0.2,0.2,0.3,0.3,0.4c0.1,0.1,0.2,0.3,0.3,0.4
	c0.1,0.1,0.2,0.2,0.2,0.3c0.1,0.2,0.3,0.4,0.4,0.5c0,0,0.1,0.1,0.1,0.1c0.1,0.2,0.3,0.3,0.4,0.5l0.1,0.1l0.2,0.2
	C7.8,29.5,8,29.7,8.2,30c0.1,0.1,0.2,0.2,0.3,0.3c0.1,0.1,0.2,0.2,0.3,0.3c0.2,0.2,0.4,0.4,0.6,0.6c0,0,0,0,0,0c1,0.9,2,1.7,3,2.4
	c0,0,0,0,0,0c0.2,0.1,0.4,0.3,0.6,0.4c0.3,0.2,0.6,0.4,0.9,0.6l0.1,0c0.4,0.3,0.8,0.5,1.2,0.7c0.3,0.2,0.7,0.3,1,0.3l0.1,0l0.1,0
	l0,0c0.5,0.1,1,0.2,1.6,0.2c0.3,0,0.6,0,0.9,0.1l0.8,0l0,0H20h0.1l0,0l0.8,0c0.3,0,0.6,0,0.9-0.1c0.6,0,1.1-0.1,1.6-0.2l0,0l0.1,0
	l0.1,0c0.3-0.1,0.7-0.2,1-0.3c0.4-0.2,0.8-0.4,1.2-0.7l0.1,0c0.3-0.2,0.6-0.4,0.9-0.6c0.2-0.1,0.4-0.3,0.6-0.4c0,0,0,0,0,0
	c1-0.7,2.1-1.5,3-2.4c0,0,0,0,0,0c0.2-0.2,0.4-0.4,0.6-0.6c0.1-0.1,0.2-0.2,0.3-0.3c0.1-0.1,0.2-0.2,0.3-0.3
	c0.2-0.2,0.5-0.5,0.7-0.7l0.2-0.2l0.1-0.1c0.1-0.2,0.3-0.3,0.4-0.5c0,0,0.1-0.1,0.1-0.1c0.1-0.2,0.3-0.4,0.4-0.5
	c0.1-0.1,0.2-0.2,0.2-0.3c0.1-0.1,0.2-0.3,0.3-0.4c0.1-0.2,0.2-0.3,0.3-0.4c0.1-0.1,0.2-0.2,0.2-0.3c0.1-0.2,0.3-0.4,0.4-0.6
	c0.1-0.1,0.1-0.2,0.2-0.2c0.2-0.2,0.3-0.5,0.5-0.7c0,0,0-0.1,0.1-0.1c1.8-3,3-6.3,3.7-9.8c0,0,0,0,0,0c0-0.3,0.1-0.6,0.1-0.9
	c0-0.1,0-0.1,0-0.2l0-0.1c0,0,0-0.1,0-0.2l0-0.3v0C39.9,12.1,40,10.9,40,9.7z M37.3,16.3c0,0.3-0.1,0.7-0.2,1l0,0.1l-0.1,0.3
	c0,0,0,0,0,0.1l0,0.1l0,0.1c0,0.1,0,0.2-0.1,0.2l0,0l0,0.1c-0.1,0.4-0.2,0.8-0.3,1.2c-0.5,1.8-1.3,3.2-2.4,5L34,24.7
	c-1,1.5-2.1,2.9-3.2,4.1c-0.1,0.1-0.1,0.1-0.2,0.2c-0.1,0.1-0.2,0.2-0.3,0.3c-0.2,0.2-0.3,0.3-0.5,0.4c0,0,0,0,0,0
	c-0.2,0.2-0.4,0.4-0.6,0.5l-0.2,0.1c-0.1,0.1-0.3,0.2-0.4,0.4c-0.1,0.1-0.2,0.1-0.3,0.2c-0.1,0.1-0.1,0.1-0.2,0.2
	c0,0-0.1,0.1-0.1,0.1c-0.1,0.1-0.2,0.1-0.2,0.2c-0.3,0.2-0.6,0.3-0.9,0.4l0,0c-0.1,0-0.2,0-0.3,0l-6.7,0l-6.7,0c-0.1,0-0.2,0-0.3,0
	l0,0c-0.3-0.1-0.7-0.2-0.9-0.4c-0.1,0-0.1-0.1-0.2-0.2c0,0-0.1-0.1-0.1-0.1c-0.1-0.1-0.1-0.1-0.2-0.2c-0.1-0.1-0.2-0.2-0.3-0.2
	c-0.1-0.1-0.3-0.2-0.4-0.4l-0.2-0.1c-0.2-0.2-0.4-0.4-0.6-0.5c0,0,0,0,0,0c-0.2-0.1-0.3-0.3-0.5-0.4c-0.1-0.1-0.2-0.2-0.3-0.3
	c-0.1-0.1-0.1-0.1-0.2-0.2C8,27.6,6.9,26.2,6,24.7l-0.2-0.3c-1.1-1.8-1.9-3.3-2.4-5c-0.1-0.4-0.2-0.8-0.3-1.2l0-0.1l0,0
	C3,18.1,3,18.1,3,18l0-0.1l0-0.1c0,0,0,0,0-0.1l-0.1-0.3l0-0.1c-0.1-0.3-0.1-0.7-0.2-1c-0.1-0.6-0.1-1.2-0.2-1.9
	c-0.1-1.1,1-2.1,1.8-2.2c0,0,0.1,0,0.1,0c0,0,0,0,0,0h0c0,0,2.3-0.2,2.3-0.2l1.9-0.2c0,0,0.1,0,0.1,0c0.1,0,0.1,0,0.2,0l0.1,0
	c0.2,0.1,0.5,0.2,0.6,0.4l0.1,0.1c0,0,0.2,0.2,0.2,0.3l0,0.1l0,0c1.1,1.2,2.4,2.2,3.8,2.9c0.1,0.1,0.2,0.1,0.3,0.2l0.5,0.2
	c0,0,0.1,0,0.1,0.1c0.1,0.1,0.3,0.1,0.4,0.2c0,0,0.1,0,0.1,0.1c0.2,0.1,0.4,0.1,0.5,0.2c0,0,0,0,0,0c0.2,0.1,0.4,0.1,0.6,0.2l0,0
	c0,0,0.1,0,0.2,0c1,0.3,2.2,0.4,3.3,0.4c1.2,0,2.3-0.2,3.3-0.4c0.1,0,0.1,0,0.2,0l0,0c0.2-0.1,0.4-0.1,0.6-0.2c0,0,0,0,0,0
	c0.2-0.1,0.4-0.1,0.5-0.2c0,0,0.1,0,0.1-0.1c0.1-0.1,0.3-0.1,0.4-0.2c0,0,0.1,0,0.1-0.1l0.5-0.2c0.1,0,0.2-0.1,0.3-0.2
	c1.4-0.7,2.7-1.7,3.8-2.9l0,0l0-0.1c0.1-0.1,0.2-0.3,0.2-0.3l0.1-0.1c0.2-0.2,0.4-0.3,0.6-0.4l0.1,0c0.1,0,0.1,0,0.2,0
	c0,0,0.1,0,0.1,0l1.9,0.2c0,0,2.3,0.2,2.3,0.2h0c0,0,0,0,0,0c0,0,0.1,0,0.1,0c0.9,0.1,1.9,1.1,1.8,2.2C37.5,15,37.4,15.7,37.3,16.3z
	"/>

That file saved okay. 

File 2: collapsible-content.liquid
Example of icon content

            {
              "value": "washing",
              "label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__44.label"
            }

Following that I added the following for the new icon

            {
              "value": "hookless",
              "label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__45.label"
            }

When attempting to save, I get the following error:

 

I checked the liquid template and there is nothing stating a maximum of 44. And I added some code that matched the item above. So I am pretty confused as to why the addition of one more icon code block is causing the error. 

Edit:
I backed out of the website and went back in. I opened the collapsible-content.liquid file and for some strange reason, the value and label for item 45 is actually there, even considering the file wouldn't save and threw up the error. Sounds great, let's go add the icon on the product page. 
And not there. I can still find the original icons, I just can't find this one in the drop down list. 

[ExpertRookie]

Hi @ccsachs 
if you can share the store access, I will login to your store to check and help you fix it.

[SAROB]

I have just been struggling with this myself, did you solve it? 

I found I needed to add the name of the icon to the locales en.locales.schema.json file (2 times) for it to show up in the list of icons available if that helps?

[sharpie9701]

Believe it or not, I just did this myself. The issue is illustrator does not give you the proper code for svgs. What you need to do is save the file as a PNG, and then go to the website http://www.pngtosvg.com.

That will then give you the code in the proper format. There's something with illustrator not giving that proper format. It took me several days of researching to find that info. That's why you keep getting that error. 

Also, be sure that when you are referencing the SVG icon, make sure that you are entering it into the schema section as well at the bottom half of the file. You have to reference the icon in two locations. I did see that you have it in one, but you have to also reference it as well in the schema section. Reference ExpertRookie's screenshot for the code, as the code is the same in both locations.

[sharpie9701]

You can view my wife's website to see what icons I made in the collapsible menus.

artsynichecreations.com