How can I get icons directly from icons.svg or icons.json?

[DuoZhangRobotics]

I am trying to add a button in the menu to switch dark mode and light mode, and I want to use the moon icon in font-awesome. Thus I changed menu.html to the following:

<nav>
  {%- for item in include.menu -%}
  {%- assign node = site.pages | where: "name", item.file | first -%}
  {%- assign url = item.url | default: node.url -%}
  {%- assign title = item.title | default: node.title -%}
  <a href="{{ url | relative_url }}" {% if url==page.url %}class="selected" {% endif %}>
    {%- if item.icon -%}<svg aria-label="{{ title }}" class="icon">
      <use xlink:href="{{ "/assets/fontawesome/icons.svg" | relative_url }}#{{ item.icon }}"></use>
    </svg>{%- else -%}{{ title }}{%- endif -%}
  </a>
  {%- endfor -%}
  <a class="dark-mode-button">
    <svg class="icon">
      <use xlink:href="/assets/fontawesome/icons.svg#moon"></use>
    </svg>
  </a>
</nav>

But I cannot get the icon from it. I am really not sure about how to get the icon by just reading the json file.