Run results for: document.createElement vs createContextualFragment

Run details:

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36 Edg/105.0.1343.53

Browser: Chrome 105

Operating system: Windows

Device Platform: Desktop

Date tested: 2 years ago

Test name	Executions per second
document.createElement	546.3 Ops/sec
document.createRange().createContextualFragment()	514.3 Ops/sec

Tests:

document.createElement
const category = 'fs'; const contents = ` <svg> <defs>   <symbol id="zui-fs-audio" fill="var(--zui-icon-color, var(--zui-orange-600))" viewBox="0 0 16 16" aria-labelledby="zui-fs-audio-desc zui-fs-audio-title"> <title id="zui-fs-audio-title">Audio</title> <desc id="zui-fs-audio-desc">A folded page with a note to indicate an audio file</desc> <path d="M14.34 2.74L11.66.06a.2.2 0 00-.14-.06H2.28a.69.69 0 00-.68.68v15A.36.36 0 002 16h12a.36.36 0 00.36-.36V2.88a.2.2 0 00-.02-.14zM11.6 1.6l1.2 1.2h-1.2zm1.6 13.2H2.8V1.2h7.6V4h2.8z"/> <path d="M10.24 6.43L9.06 5.25a.44.44 0 00-.16-.1.45.45 0 00-.36 0 .51.51 0 00-.26.26.52.52 0 000 .18v3.55a1.72 1.72 0 00-.84-.22 1.79 1.79 0 101.76 1.79V6.74l.37.37a.48.48 0 00.67 0 .48.48 0 000-.68z"/> </symbol> <symbol id="zui-fs-code" fill="var(--zui-icon-color, var(--zui-aqua-600))" viewBox="0 0 16 16" aria-labelledby="zui-fs-code-desc zui-fs-code-title"> <title id="zui-fs-code-title">Code</title> <desc id="zui-fs-code-desc">A folded page with </> to indicate a generic file</desc> <path d="M14.34 2.74L11.66.06a.2.2 0 00-.14-.06H2.28a.69.69 0 00-.68.68v15A.36.36 0 002 16h12a.36.36 0 00.36-.36V2.88a.2.2 0 00-.02-.14zM11.6 1.6l1.2 1.2h-1.2zm1.6 13.2H2.8V1.2h7.6V4h2.8z"/> <path d="M6.43 10.49l-.61.48-1.77-2.16 1.77-2.16.61.48-1.38 1.68 1.38 1.68z"/> <path transform="rotate(-66.03 8 8.81)" d="M6.07 8.41h3.87v.79H6.07z"/> <path d="M10.19 10.97l-.62-.48 1.38-1.68-1.38-1.68.62-.48 1.76 2.16-1.76 2.16z"/> </symbol> <symbol id="zui-fs-doc" fill="var(--zui-icon-color, var(--zui-blue-600))" viewBox="0 0 40 40" aria-labelledby="zui-fs-doc-desc zui-fs-doc-title"> <title id="zui-fs-doc-title">Doc</title> <desc id="zui-fs-doc-desc">Document icon with lines on it</desc> <path d="M4 1.71V39.1a.9.9 0 0 0 .9.9h30.2a.9.9 0 0 0 .9-.9V7.21a.49.49 0 0 0-.15-.36l-6.7-6.7a.49.49 0 0 0-.36-.15H5.71A1.71 1.71 0 0 0 4 1.71zM29 4l3 3h-3zm4 33H7V3h19v7h7z"/> <rect x="18.5" y="7.5" width="3" height="18" rx=".5" transform="rotate(90 20 16.5)"/> <rect x="18.5" y="13.5" width="3" height="18" rx=".5" transform="rotate(90 20 22.5)"/> <rect x="16" y="21.64" width="3" height="13" rx=".5" transform="rotate(90 17.5 28.14)"/> </symbol> <symbol id="zui-fs-folder" fill="var(--zui-icon-color, var(--zui-yellow-600))" viewBox="0 0 40 40" aria-labelledby="zui-fs-folder-desc zui-fs-folder-title"> <title id="zui-fs-folder-title">Folder</title> <desc id="zui-fs-folder-desc">A folder icon</desc> <path d="M36.5 7H20.17a.51.51 0 0 1-.3-.1l-3.74-2.8a.51.51 0 0 0-.3-.1H3.5A1.5 1.5 0 0 0 2 5.5v31A1.5 1.5 0 0 0 3.5 38h33.05A1.51 1.51 0 0 0 38 36.46V8.5A1.5 1.5 0 0 0 36.5 7zM14.83 7a.51.51 0 0 1 .3.1l3.74 2.8a.51.51 0 0 0 .3.1H35v5H5V7zM5 35V18h30v17z"/> </symbol> <symbol id="zui-fs-image" fill="var(--zui-icon-color, var(--zui-purple-600))" viewBox="0 0 16.2 17.62" aria-labelledby="zui-fs-image-desc zui-fs-image-title"> <title id="zui-fs-image-title">Image</title> <desc id="zui-fs-image-desc">Two overlapping triangles and a circle to look like a sun over mountains, indicating an image</desc> <circle cx="10.86" cy="5.04" r="1"/> <path d="M15.65 1.65H.35A.35.35 0 000 2v12a.35.35 0 00.35.35h15.3A.35.35 0 0016 14V2a.35.35 0 00-.35-.35zm-.84 9.49l-3.43-3.42a.51.51 0 00-.71 0L8.61 9.77 5.47 6.64a.5.5 0 00-.71 0l-3.57 3.55V2.84h13.62z"/> </symbol> <symbol id="zui-fs-multiple-files" fill="var(--zui-icon-color, var(--zui-blue-600))" viewBox="0 0 16 16" aria-labelledby="zui-fs-multiple-files-desc zui-fs-multiple-files-title"> <title id="zui-fs-multiple-files-title">Multiple Files</title> <desc id="zui-fs-multiple-files-desc">A document icon with lines and another document behind it to signify multiple documents</desc> <path d="M14.58 4.24l-2.38-2.3H4a.62.62 0 00-.62.62v13.26a.34.34 0 00.35.18h10.59a.36.36 0 00.35-.36V4.42zm-2.38-1l1.06 1.06H12.2zm1.41 11.67h-9.1v-12h6.63v2.48h2.47z"/> <rect x="5.83" y="7.16" width="6.28" height="1.06" rx=".18"/> <rect x="5.83" y="9.28" width="6.28" height="1.06" rx=".18"/> <rect x="5.83" y="11.31" width="4.51" height="1.06" rx=".18"/> <path d="M1.88 14.37a.55.55 0 01-.55-.55V.5a.5.5 0 01.5-.5h9.72a.55.55 0 01.55.55.55.55 0 01-.55.56H2.44v12.71a.56.56 0 01-.56.55z"/> </symbol> <symbol id="zui-fs-video" fill="var(--zui-icon-color, var(--zui-red-600))" viewBox="0 0 16 16" aria-labelledby="zui-fs-video-desc zui-fs-video-title"> <title id="zui-fs-video-title">Video</title> <desc id="zui-fs-video-desc">A document shaped icon with a triangle on it, indicating a video file</desc> <path d="M14.67 3v10.1H1.33V3h13.34m1-1.33H.33A.33.33 0 000 2v12.1a.33.33 0 00.33.33h15.34a.33.33 0 00.33-.33V2a.33.33 0 00-.33-.33z"/> <path d="M6.47 4.63L11 7.43a.5.5 0 010 .86l-4.62 2.49a.5.5 0 01-.74-.45l.07-5.28a.5.5 0 01.76-.42z"/> </symbol>  <symbol id="zui-fs-7z" fill="var(--zui-icon-color, var(--zui-yellow-600))" viewBox="0 0 16 16" aria-labelledby="zui-fs-7z-desc zui-fs-7z-title"> <title id="zui-fs-7z-title">7z</title> <desc id="zui-fs-7z-desc">A .7z file</desc> <path d="M14.34 2.74L11.66.06a.2.2 0 00-.14-.06H2.28a.69.69 0 00-.68.68v15A.36.36 0 002 16h12a.36.36 0 00.36-.36V2.88a.2.2 0 00-.02-.14zM11.6 1.6l1.2 1.2h-1.2zm1.6 13.2H2.8V1.2h7.6V4h2.8z"/> <path d="M8 7.76c-.14.25-.27.49-.38.71s-.21.44-.3.66a6.37 6.37 0 00-.21.66 6.5 6.5 0 00-.15.72H6.2c0-.25.1-.48.17-.71a4.67 4.67 0 01.23-.66c.09-.21.19-.42.3-.62s.22-.4.34-.6H5.77v-.56H8zM10.23 10.51h-2v-.29l1.11-1.45h-1v-.51h1.9v.34L9.15 10h1.08z"/> </symbol> <symbol id="zui-fs-zip" fill="var(--zui-icon-color, var(--zui-yellow-600))" viewBox="0 0 16 16" aria-labelledby="zui-fs-zip-desc zui-fs-zip-title"> <title id="zui-fs-zip-title">Zip</title> <desc id="zui-fs-zip-desc">A .zip file</desc> <path d="M14.34 2.74L11.66.06a.2.2 0 00-.14-.06H2.28a.69.69 0 00-.68.68v15A.36.36 0 002 16h12a.36.36 0 00.36-.36V2.88a.2.2 0 00-.02-.14zM11.6 1.6l1.2 1.2h-1.2zm1.6 13.2H2.8V1.2h7.6V4h2.8z"/> <path d="M7.17 10.51H4.63v-.41l1.62-2.17h-1.5v-.57h2.42v.4L5.59 9.93h1.58zM8.35 10.51h-.71V7.36h.71zM9.77 9.42v1.09h-.71V7.36h1.11c.8 0 1.2.33 1.2 1a1 1 0 01-.35.77 1.36 1.36 0 01-.91.29zm0-1.52v1h.28c.38 0 .57-.16.57-.49s-.19-.49-.57-.49z"/> </symbol>  <symbol id="zui-fs-mp3" fill="var(--zui-icon-color, var(--zui-orange-600))" viewBox="0 0 16 16" aria-labelledby="zui-fs-mp3-desc zui-fs-mp3-title"> <title id="zui-fs-mp3-title">MP3</title> <desc id="zui-fs-mp3-desc">A document shaped paper with MP3 on it to indicate the file is a .MP3</desc> <path d="M14.34 2.74L11.66.06a.2.2 0 00-.14-.06H2.28a.69.69 0 00-.68.68v15A.36.36 0 002 16h12a.36.36 0 00.36-.36V2.88a.2.2 0 00-.02-.14zM11.6 1.6l1.2 1.2h-1.2zm1.6 13.2H2.8V1.2h7.6V4h2.8z"/> <path d="M7 10.51h-.7V8.62v-.67c0 .19-.07.33-.1.42l-.74 2.14h-.62l-.75-2.12c0-.06 0-.21-.1-.44H4v2.56h-.64V7.36h1L5 9.22a2.39 2.39 0 01.12.46c0-.18.08-.33.12-.46l.65-1.86H7zM8.38 9.42v1.09h-.71V7.36h1.11c.79 0 1.19.33 1.19 1a1 1 0 01-.34.77 1.38 1.38 0 01-.91.29zm0-1.52v1h.28c.37 0 .56-.16.56-.49S9 7.9 8.66 7.9zM10.33 10.4v-.6a1.25 1.25 0 00.74.23.71.71 0 00.41-.11.39.39 0 00.15-.32.38.38 0 00-.18-.33 1 1 0 00-.51-.11h-.29v-.53h.27c.41 0 .61-.14.61-.41s-.15-.39-.47-.39a1 1 0 00-.61.21v-.57a1.71 1.71 0 01.77-.17 1.2 1.2 0 01.75.22.71.71 0 01.27.57.73.73 0 01-.62.77.87.87 0 01.52.24.7.7 0 01.2.5.84.84 0 01-.33.7 1.39 1.39 0 01-.89.25 1.66 1.66 0 01-.79-.15z"/> </symbol> <symbol id="zui-fs-wav" fill="var(--zui-icon-color, var(--zui-orange-600))" viewBox="0 0 16 16" aria-labelledby="zui-fs-wav-desc zui-fs-wav-title"> <title id="zui-fs-wav-title">Wav</title> <desc id="zui-fs-wav-desc">A .wav file</desc> <path d="M14.34 2.74L11.66.06a.2.2 0 00-.14-.06H2.28a.69.69 0 00-.68.68v15A.36.36 0 002 16h12a.36.36 0 00.36-.36V2.88a.2.2 0 00-.02-.14zM11.6 1.6l1.2 1.2h-1.2zm1.6 13.2H2.8V1.2h7.6V4h2.8z"/> <path d="M7.41 7.59l-.74 2.8H6l-.5-1.8a1.37 1.37 0 010-.31 1.82 1.82 0 010 .31l-.48 1.8h-.83l-.73-2.8h.69l.39 1.87a1.82 1.82 0 010 .32 1.05 1.05 0 01.06-.33l.5-1.86h.68l.46 1.88a1.68 1.68 0 010 .3v-.31l.39-1.87zM10.08 10.39H9.4l-.2-.62h-1l-.2.62h-.68l1-2.8h.75zm-1-1.11l-.3-.94a1.37 1.37 0 01-.05-.25 1 1 0 010 .24l-.3.95zM12.54 7.59l-1 2.8h-.72l-.95-2.8h.68l.58 1.95a.79.79 0 01.06.28 1.88 1.88 0 01.06-.29l.58-1.94z"/> </symbol>  <symbol id="zui-fs-ai" fill="var(--zui-icon-color, var(--zui-purple-600))" viewBox="0 0 16 16" aria-labelledby="zui-fs-ai-desc zui-fs-ai-title"> <title id="zui-fs-ai-title">Ai</title> <desc id="zui-fs-ai-desc">An .ai file</desc> <path d="M14.34 2.74L11.66.06a.2.2 0 00-.14-.06H2.28a.69.69 0 00-.68.68v15A.36.36 0 002 16h12a.36.36 0 00.36-.36V2.88a.2.2 0 00-.02-.14zM11.6 1.6l1.2 1.2h-1.2zm1.6 13.2H2.8V1.2h7.6V4h2.8z"/> <path d="M8.84 10.51h-.78l-.22-.7H6.72l-.22.7h-.77l1.14-3.15h.85zM7.68 9.26L7.34 8.2a.74.74 0 010-.28 1.57 1.57 0 01-.06.28l-.41 1.06zM9.94 10.51h-.71V7.36h.71z"/> </symbol> <symbol id="zui-fs-eps" fill="var(--zui-icon-color, var(--zui-purple-600))" viewBox="0 0 16 16" aria-labelledby="zui-fs-eps-desc zui-fs-eps-title"> <title id="zui-fs-eps-title">Eps</title> <desc id="zui-fs-eps-desc">An .eps file</desc> <path d="M6.31 10.51H4.42V7.36h1.82v.58H5.13v.7h1v.57h-1v.72h1.18zM7.52 9.42v1.09h-.71V7.36h1.12c.79 0 1.19.33 1.19 1a1 1 0 01-.35.77 1.31 1.31 0 01-.91.29zm0-1.52v1h.28c.38 0 .57-.16.57-.49s-.19-.51-.57-.51zM9.43 10.39v-.71a1.51 1.51 0 00.42.25 1.42 1.42 0 00.45.08.75.75 0 00.23 0 .56.56 0 00.17-.06.26.26 0 00.1-.11.27.27 0 000-.12.26.26 0 00-.05-.17.44.44 0 00-.14-.13l-.22-.12-.27-.12a1.3 1.3 0 01-.55-.37.84.84 0 01-.18-.54.82.82 0 01.1-.42.69.69 0 01.27-.29 1.15 1.15 0 01.39-.17 1.86 1.86 0 01.48-.05 2.72 2.72 0 01.43 0 1.2 1.2 0 01.35.09v.65a.91.91 0 00-.14-.08l-.19-.07h-.38a.73.73 0 00-.22 0 .38.38 0 00-.17.06.36.36 0 00-.11.1.28.28 0 000 .13.23.23 0 000 .14.34.34 0 00.12.12.78.78 0 00.18.11l.25.11a3.58 3.58 0 01.34.17 1.37 1.37 0 01.26.2.71.71 0 01.16.26.84.84 0 01.06.33.88.88 0 01-.1.45.83.83 0 01-.27.29 1.45 1.45 0 01-.4.16 2.45 2.45 0 01-.48 0 2.56 2.56 0 01-.49 0 1.52 1.52 0 01-.4-.17z"/> <path d="M14.34 2.74L11.66.06a.2.2 0 00-.14-.06H2.28a.69.69 0 00-.68.68v15A.36.36 0 002 16h12a.36.36 0 00.36-.36V2.88a.2.2 0 00-.02-.14zM11.6 1.6l1.2 1.2h-1.2zm1.6 13.2H2.8V1.2h7.6V4h2.8z"/> </symbol> <symbol id="zui-fs-gif" fill="var(--zui-icon-color, var(--zui-purple-600))" viewBox="0 0 16 16" aria-labelledby="zui-fs-gif-desc zui-fs-gif-title"> <title id="zui-fs-gif-title">Gif</title> <desc id="zui-fs-gif-desc">A .gif file</desc> <path d="M7.46 10.3a2.24 2.24 0 01-1.14.26 1.66 1.66 0 01-1.2-.42A1.49 1.49 0 014.68 9a1.62 1.62 0 01.48-1.21 1.74 1.74 0 011.27-.46 2.59 2.59 0 01.88.13v.67a1.75 1.75 0 00-.89-.21.94.94 0 00-.72.29 1.05 1.05 0 00-.27.79 1.09 1.09 0 00.24.75.9.9 0 00.68.27 1.06 1.06 0 00.4-.07v-.67h-.63v-.57h1.34zM8.78 10.51h-.71V7.36h.71zM11.32 7.94h-1.11v.77h1v.57h-1v1.23H9.5V7.36h1.82z"/> <path d="M14.34 2.74L11.66.06a.2.2 0 00-.14-.06H2.28a.69.69 0 00-.68.68v15A.36.36 0 002 16h12a.36.36 0 00.36-.36V2.88a.2.2 0 00-.02-.14zM11.6 1.6l1.2 1.2h-1.2zm1.6 13.2H2.8V1.2h7.6V4h2.8z"/> </symbol> <symbol id="zui-fs-jpg" fill="var(--zui-icon-color, var(--zui-purple-600))" viewBox="0 0 16 16" aria-labelledby="zui-fs-jpg-desc zui-fs-jpg-title"> <title id="zui-fs-jpg-title">Jpg</title> <desc id="zui-fs-jpg-desc">A .jpg file</desc> <path d="M5.77 9.26a1.48 1.48 0 01-.29 1 1.09 1.09 0 01-.85.33 1.34 1.34 0 01-.46-.08v-.7a.68.68 0 00.41.14q.48 0 .48-.72V7.36h.71zM7.17 9.42v1.09h-.71V7.36h1.11c.8 0 1.19.33 1.19 1a1 1 0 01-.34.77 1.33 1.33 0 01-.91.29zm0-1.52v1h.28c.38 0 .57-.16.57-.49s-.19-.49-.57-.49zM11.83 10.3a2.34 2.34 0 01-1.14.26 1.66 1.66 0 01-1.2-.42A1.49 1.49 0 019.05 9a1.62 1.62 0 01.48-1.21 1.75 1.75 0 011.27-.49 2.68 2.68 0 01.89.14v.67a1.81 1.81 0 00-.9-.21 1 1 0 00-.72.28A1.1 1.1 0 009.8 9a1.09 1.09 0 00.2.7.9.9 0 00.68.27.89.89 0 00.4-.08v-.61h-.63v-.57h1.34z"/> <path d="M14.34 2.74L11.66.06a.2.2 0 00-.14-.06H2.28a.69.69 0 00-.68.68v15A.36.36 0 002 16h12a.36.36 0 00.36-.36V2.88a.2.2 0 00-.02-.14zM11.6 1.6l1.2 1.2h-1.2zm1.6 13.2H2.8V1.2h7.6V4h2.8z"/> </symbol> <symbol id="zui-fs-png" fill="var(--zui-icon-color, var(--zui-purple-600))" viewBox="0 0 16 16" aria-labelledby="zui-fs-png-desc zui-fs-png-title"> <title id="zui-fs-png-title">Png</title> <desc id="zui-fs-png-desc">A .png file</desc> <path d="M4.26 9.48v1.08h-.71V7.41h1.11c.79 0 1.19.34 1.19 1a.94.94 0 01-.34.76 1.33 1.33 0 01-.91.3zm0-1.48v1h.28c.37 0 .56-.17.56-.5S4.91 8 4.54 8zM9.15 10.56h-.72l-1.3-2A1.85 1.85 0 017 8.32a3.41 3.41 0 010 .51v1.73h-.69V7.41h.77l1.25 1.92c.05.09.11.17.15.26V7.41h.67zM12.45 10.35a2.21 2.21 0 01-1.14.27 1.66 1.66 0 01-1.2-.42A1.51 1.51 0 019.67 9a1.6 1.6 0 01.48-1.21 1.71 1.71 0 011.27-.47 2.45 2.45 0 01.89.14v.66a1.79 1.79 0 00-.9-.21 1 1 0 00-.72.29 1.05 1.05 0 00-.27.76 1.06 1.06 0 00.25.76 1.05 1.05 0 001.07.19v-.58h-.63v-.56h1.34z"/> <path d="M14.34 2.74L11.66.06a.2.2 0 00-.14-.06H2.28a.69.69 0 00-.68.68v15A.36.36 0 002 16h12a.36.36 0 00.36-.36V2.88a.2.2 0 00-.02-.14zM11.6 1.6l1.2 1.2h-1.2zm1.6 13.2H2.8V1.2h7.6V4h2.8z"/> </symbol> <symbol id="zui-fs-ps" fill="var(--zui-icon-color, var(--zui-purple-600))" viewBox="0 0 16 16" aria-labelledby="zui-fs-ps-desc zui-fs-ps-title"> <title id="zui-fs-ps-title">Ps</title> <desc id="zui-fs-ps-desc">A .ps file</desc> <path d="M6.33 9.49v1.08h-.71V7.42h1.11c.79 0 1.19.34 1.19 1a1 1 0 01-.34.76 1.36 1.36 0 01-.92.3zm0-1.49v1h.27c.38 0 .57-.17.57-.5S7 8 6.6 8zM8.24 10.45v-.7a1.14 1.14 0 00.41.24 1.42 1.42 0 00.45.08h.24A.59.59 0 009.5 10a.24.24 0 00.1-.1.2.2 0 000-.13.23.23 0 00-.06-.16.47.47 0 00-.14-.14l-.22-.12L9 9.22a1.48 1.48 0 01-.55-.38.84.84 0 01-.18-.54.81.81 0 01.37-.71A1.25 1.25 0 019 7.42a2.44 2.44 0 01.48 0 2.94 2.94 0 01.44 0 2 2 0 01.35.09v.66l-.18-.1L9.88 8H9.5a.78.78 0 00-.22 0h-.17a.35.35 0 00-.1.11.18.18 0 000 .13.23.23 0 000 .14.68.68 0 00.12.12l.19.11.24.11a3.68 3.68 0 01.34.16 1.09 1.09 0 01.26.21.85.85 0 01.17.25.9.9 0 01.05.34.87.87 0 01-.1.44.69.69 0 01-.27.29 1.12 1.12 0 01-.4.16 2.44 2.44 0 01-.48.05 2.63 2.63 0 01-.49-.05 1.34 1.34 0 01-.4-.12z"/> <path d="M14.34 2.74L11.66.06a.2.2 0 00-.14-.06H2.28a.69.69 0 00-.68.68v15A.36.36 0 002 16h12a.36.36 0 00.36-.36V2.88a.2.2 0 00-.02-.14zM11.6 1.6l1.2 1.2h-1.2zm1.6 13.2H2.8V1.2h7.6V4h2.8z"/> </symbol> <symbol id="zui-fs-psd" fill="var(--zui-icon-color, var(--zui-purple-600))" viewBox="0 0 16 16" aria-labelledby="zui-fs-psd-desc zui-fs-psd-title"> <title id="zui-fs-psd-title">Psd</title> <desc id="zui-fs-psd-desc">A .psd file</desc> <path d="M4.67 9.49v1.08H4V7.42h1.07c.8 0 1.19.34 1.19 1a.94.94 0 01-.34.76 1.33 1.33 0 01-.91.3zm0-1.49v1H5c.38 0 .56-.17.56-.5S5.33 8 5 8zM6.58 10.45v-.7A1.69 1.69 0 007 10a1.44 1.44 0 00.46.08.8.8 0 00.23 0 .43.43 0 00.16-.08.32.32 0 00.1-.1.29.29 0 000-.29.67.67 0 00-.15-.14l-.21-.12-.29-.13a1.4 1.4 0 01-.55-.38.84.84 0 01-.18-.54.78.78 0 01.36-.71 1.31 1.31 0 01.4-.17 2.42 2.42 0 01.47 0 2.85 2.85 0 01.44 0 1.79 1.79 0 01.35.09v.66a1 1 0 00-.17-.1L8.22 8 8 7.94h-.16a.78.78 0 00-.22 0L7.45 8l-.1.1a.22.22 0 000 .13.33.33 0 000 .15l.12.12.19.11.25.11.34.16a1.33 1.33 0 01.26.21.82.82 0 01.16.25.9.9 0 01.06.34 1 1 0 01-.1.44.84.84 0 01-.27.29 1.29 1.29 0 01-.4.16 2.44 2.44 0 01-.48.05 2.65 2.65 0 01-.5-.05 1.45 1.45 0 01-.4-.12zM9.25 10.57V7.42h1.11C11.48 7.42 12 7.93 12 9a1.52 1.52 0 01-.46 1.17 1.65 1.65 0 01-1.22.44zM10 8v2h.35a1 1 0 00.65-.28 1 1 0 00.29-.72.93.93 0 00-.29-.74 1 1 0 00-.7-.26z"/> <path d="M14.34 2.74L11.66.06a.2.2 0 00-.14-.06H2.28a.69.69 0 00-.68.68v15A.36.36 0 002 16h12a.36.36 0 00.36-.36V2.88a.2.2 0 00-.02-.14zM11.6 1.6l1.2 1.2h-1.2zm1.6 13.2H2.8V1.2h7.6V4h2.8z"/> </symbol> <symbol id="zui-fs-tif" fill="var(--zui-icon-color, var(--zui-purple-600))" viewBox="0 0 16 16" aria-labelledby="zui-fs-tif-desc zui-fs-tif-title"> <title id="zui-fs-tif-title">Tif</title> <desc id="zui-fs-tif-desc">A .tif file</desc> <path d="M7.42 8.05h-.9v2.58h-.71V8.05h-.9v-.57h2.51zM8.55 10.63h-.71V7.48h.71zM11.09 8.05H10v.78h1v.57h-1v1.23h-.73V7.48h1.82z"/> <path d="M14.34 2.74L11.66.06a.2.2 0 00-.14-.06H2.28a.69.69 0 00-.68.68v15A.36.36 0 002 16h12a.36.36 0 00.36-.36V2.88a.2.2 0 00-.02-.14zM11.6 1.6l1.2 1.2h-1.2zm1.6 13.2H2.8V1.2h7.6V4h2.8z"/> </symbol>  <symbol id="zui-fs-pdf" fill="var(--zui-icon-color, var(--zui-orange-400))" viewBox="0 0 40 40" aria-labelledby="zui-fs-pdf-desc zui-fs-pdf-title"> <title id="zui-fs-pdf-title">PDF</title> <desc id="zui-fs-pdf-desc">A document shaped paper with the letters PDF on it to indicate the file is a .PDF</desc> <path d="M4 1.71V39.1a.9.9 0 0 0 .9.9h30.2a.9.9 0 0 0 .9-.9V7.21a.47.47 0 0 0-.15-.35L29.15.15a.53.53 0 0 0-.36-.15H5.71A1.72 1.72 0 0 0 4 1.71zM29 4l3 3h-3zm4 33H7V3h19v7h7z"/> <path d="M15.55 20.51a2.46 2.46 0 0 1-.81 2 3.46 3.46 0 0 1-2.31.69h-.73V26H10v-8h2.57a3.42 3.42 0 0 1 2.22.63 2.28 2.28 0 0 1 .76 1.88zm-3.85 1.27h.56a1.85 1.85 0 0 0 1.18-.31 1.09 1.09 0 0 0 .39-.9 1.12 1.12 0 0 0-.33-.89 1.53 1.53 0 0 0-1-.28h-.8zM23.73 21.94a4 4 0 0 1-1.13 3A4.61 4.61 0 0 1 19.34 26h-2.27v-8h2.52a4.24 4.24 0 0 1 3.05 1 3.8 3.8 0 0 1 1.09 2.94zM22 22q0-2.58-2.28-2.58h-.91v5.23h.73c1.6-.02 2.46-.9 2.46-2.65zM27.07 26H25.4v-8H30v1.4h-2.93v2.07h2.73v1.39h-2.73z"/> </symbol> <symbol id="zui-fs-ppt" fill="var(--zui-icon-color, var(--zui-red-600))" viewBox="0 0 40 40" aria-labelledby="zui-fs-ppt-desc zui-fs-ppt-title"> <title id="zui-fs-ppt-title">Powerpoint</title> <desc id="zui-fs-ppt-desc">A document shaped paper with the letter P on it to indicate the file is Microsoft Powerpoint</desc> <path d="M4 1.71V39.1a.9.9 0 0 0 .9.9h30.2a.9.9 0 0 0 .9-.9V7.21a.49.49 0 0 0-.15-.36l-6.7-6.7a.49.49 0 0 0-.36-.15H5.71A1.71 1.71 0 0 0 4 1.71zM29 4l3 3h-3zm4 33H7V3h19v7h7z"/> <path d="M21.16 14H15v16.94h3.53V25h2.63a5.48 5.48 0 1 0 0-10.95zm-.67 8.17h-1.94v-5.05h1.94a2.54 2.54 0 0 1 0 5.07z"/> </symbol> <symbol id="zui-fs-word" fill="var(--zui-icon-color, var(--zui-blue-600))" viewBox="0 0 40 40" aria-labelledby="zui-fs-word-desc zui-fs-word-title"> <title id="zui-fs-word-title">Word</title> <desc id="zui-fs-word-desc">A document shaped paper with the letter W on it to indicate the file is a Microsoft Word doc</desc> <path d="M4 1.71V39.1a.9.9 0 0 0 .9.9h30.2a.9.9 0 0 0 .9-.9V7.21a.47.47 0 0 0-.15-.35L29.15.15a.53.53 0 0 0-.36-.15H5.71A1.72 1.72 0 0 0 4 1.71zM29 4l3 3h-3zm4 33H7V3h19v7h7z"/> <path d="M25.86 29h-4.07l-1.21-5.55c-.06-.23-.15-.69-.28-1.39s-.22-1.26-.27-1.73c-.05.38-.13.85-.23 1.41s-.21 1.07-.31 1.54S19 25.66 18.22 29h-4.07L11 16.26h3.32l1.38 6.39c.32 1.41.53 2.53.65 3.37.07-.59.21-1.4.4-2.41s.38-1.86.55-2.53l1.12-4.82h3.19l1.09 4.82c.19.77.38 1.66.57 2.68s.32 1.76.38 2.26c.08-.64.28-1.76.62-3.35l1.41-6.41H29z"/> </symbol> <symbol id="zui-fs-excel" fill="var(--zui-icon-color, var(--zui-green-600))" viewBox="0 0 40 40" aria-labelledby="zui-fs-excel-desc zui-fs-excel-title"> <title id="zui-fs-excel-title">Excel</title> <desc id="zui-fs-excel-desc">A document shaped paper with an X on it to indiciate it's an Microsoft Excel file</desc> <path d="M4 1.71V39.1a.9.9 0 0 0 .9.9h30.2a.9.9 0 0 0 .9-.9V7.21a.47.47 0 0 0-.15-.35L29.15.15a.53.53 0 0 0-.36-.15H5.71A1.72 1.72 0 0 0 4 1.71zM29 4l3 3h-3zm4 33H7V3h19v7h7z"/> <path d="M27 29.44h-4.35l-2.71-4.35-2.69 4.35H13l4.62-7.12-4.34-6.8h4.16l2.56 4.3 2.41-4.3h4.3l-4.41 7.09z"/> </symbol>  <symbol id="zui-fs-css" fill="var(--zui-icon-color, var(--zui-aqua-600))" viewBox="0 0 16 16" aria-labelledby="zui-fs-css-desc zui-fs-css-title"> <title id="zui-fs-css-title">Css</title> <desc id="zui-fs-css-desc">A .css file</desc> <path d="M6.69 10.4a2.1 2.1 0 01-.9.16 1.54 1.54 0 01-1.14-.42A1.57 1.57 0 014.23 9a1.66 1.66 0 01.47-1.22 1.61 1.61 0 011.21-.47 2.22 2.22 0 01.78.11v.69A1.34 1.34 0 006 7.92a1 1 0 00-.72.28A1 1 0 005 9a1 1 0 00.26.73.9.9 0 00.69.27 1.51 1.51 0 00.76-.2zM7.09 10.39v-.71a1.51 1.51 0 00.42.25A1.42 1.42 0 008 10a.88.88 0 00.24 0 .59.59 0 00.16-.06.26.26 0 00.1-.11.19.19 0 000-.12.27.27 0 00-.06-.17.44.44 0 00-.14-.13l-.22-.12-.27-.12a1.36 1.36 0 01-.55-.37.84.84 0 01-.18-.54.82.82 0 01.1-.42.84.84 0 01.27-.29 1.15 1.15 0 01.39-.17 1.86 1.86 0 01.48-.05 2.72 2.72 0 01.43 0 1.36 1.36 0 01.36.09v.65A1 1 0 008.93 8l-.19-.07h-.38a.73.73 0 00-.22 0A.43.43 0 008 8a.32.32 0 00-.1.1.2.2 0 000 .13.23.23 0 000 .14.34.34 0 00.1.07.68.68 0 00.19.11 1.33 1.33 0 00.24.11 3.58 3.58 0 01.34.17A1.37 1.37 0 019 9a.9.9 0 01.17.26 1.09 1.09 0 01.05.33.88.88 0 01-.1.45.75.75 0 01-.27.29 1.34 1.34 0 01-.4.16 2.45 2.45 0 01-.48 0 2.63 2.63 0 01-.49 0 1.52 1.52 0 01-.39-.1zM9.62 10.39v-.71a1.33 1.33 0 00.41.25 1.42 1.42 0 00.45.08.88.88 0 00.24 0 .67.67 0 00.17-.06.52.52 0 00.1-.11.27.27 0 000-.12.34.34 0 000-.17.64.64 0 00-.15-.13l-.21-.12-.27-.12a1.3 1.3 0 01-.55-.37.79.79 0 01-.19-.54.93.93 0 01.1-.42.84.84 0 01.28-.32 1.31 1.31 0 01.4-.17 1.78 1.78 0 01.47-.05 2.94 2.94 0 01.44 0 1.39 1.39 0 01.35.09v.65a1.4 1.4 0 00-.2-.05l-.2-.07h-.38a.78.78 0 00-.22 0 .49.49 0 00-.17.06.32.32 0 00-.1.1.2.2 0 000 .13.23.23 0 000 .14.34.34 0 00.12.12.86.86 0 00.19.11 1.17 1.17 0 00.25.11c.12.06.24.11.34.17a1.29 1.29 0 01.25.2.73.73 0 01.17.26.84.84 0 01.06.33 1 1 0 01-.1.45.94.94 0 01-.27.29 1.59 1.59 0 01-.4.16 2.59 2.59 0 01-.48 0 2.67 2.67 0 01-.5 0 1.45 1.45 0 01-.4-.17z"/> <path d="M14.34 2.74L11.66.06a.2.2 0 00-.14-.06H2.28a.69.69 0 00-.68.68v15A.36.36 0 002 16h12a.36.36 0 00.36-.36V2.88a.2.2 0 00-.02-.14zM11.6 1.6l1.2 1.2h-1.2zm1.6 13.2H2.8V1.2h7.6V4h2.8z"/> </symbol> <symbol id="zui-fs-html" fill="var(--zui-icon-color, var(--zui-aqua-600))" viewBox="0 0 16 16" aria-labelledby="zui-fs-html-desc zui-fs-html-title"> <title id="zui-fs-html-title">Html</title> <desc id="zui-fs-html-desc">An .html file</desc> <path d="M5.61 10.07h-.52v-.94h-1v.94h-.48V7.76h.52v.92h1v-.92h.52zM7.76 8.18H7.1v1.89h-.52V8.18h-.66v-.42h1.84zM10.71 10.07h-.52V8.69v-.5c0 .14 0 .25-.07.31l-.55 1.57h-.41l-.55-1.56a1.82 1.82 0 01-.07-.32v1.88h-.47V7.76h.76l.48 1.37c0 .11.06.22.08.33 0-.13.06-.24.09-.34L10 7.76h.75zM12.61 10.07h-1.38V7.76h.52v1.89h.86z"/> <path d="M14.34 2.74L11.66.06a.2.2 0 00-.14-.06H2.28a.69.69 0 00-.68.68v15A.36.36 0 002 16h12a.36.36 0 00.36-.36V2.88a.2.2 0 00-.02-.14zM11.6 1.6l1.2 1.2h-1.2zm1.6 13.2H2.8V1.2h7.6V4h2.8z"/> </symbol> <symbol id="zui-fs-java" fill="var(--zui-icon-color, var(--zui-aqua-600))" viewBox="0 0 16 16" aria-labelledby="zui-fs-java-desc zui-fs-java-title"> <title id="zui-fs-java-title">Java</title> <desc id="zui-fs-java-desc">A .java file</desc> <path d="M4.87 9.16a1.18 1.18 0 01-.25.82.88.88 0 01-.71.28 1 1 0 01-.39-.07v-.56a.54.54 0 00.34.12c.28 0 .41-.21.41-.61V7.56h.6zM7.68 10.22H7l-.19-.59h-1l-.18.59h-.57L6 7.56h.71zm-1-1.05l-.28-.9a.85.85 0 010-.24 1.55 1.55 0 01-.05.23L6 9.17zM10 7.56l-.9 2.66h-.68l-.9-2.66h.64l.56 1.85a1 1 0 010 .26 1.68 1.68 0 01.06-.27l.55-1.84zM12.48 10.22h-.65l-.19-.59h-1l-.19.59h-.59l1-2.66h.71zm-1-1.05l-.28-.9a.85.85 0 01-.03-.27 1.55 1.55 0 01-.05.23l-.29.91z"/> <path d="M14.34 2.74L11.66.06a.2.2 0 00-.14-.06H2.28a.69.69 0 00-.68.68v15A.36.36 0 002 16h12a.36.36 0 00.36-.36V2.88a.2.2 0 00-.02-.14zM11.6 1.6l1.2 1.2h-1.2zm1.6 13.2H2.8V1.2h7.6V4h2.8z"/> </symbol> <symbol id="zui-fs-xml" fill="var(--zui-icon-color, var(--zui-aqua-600))" viewBox="0 0 16 16" aria-labelledby="zui-fs-xml-desc zui-fs-xml-title"> <title id="zui-fs-xml-title">Xml</title> <desc id="zui-fs-xml-desc">An .xml file</desc> <path d="M6.18 10.56h-.84l-.54-1a.83.83 0 01-.07-.21 1.28 1.28 0 01-.07.22l-.54 1h-.86l1-1.57-.91-1.59h.86l.45.95a.88.88 0 01.09.26c0-.06 0-.15.1-.27l.5-.94h.79L5.21 9zM10.15 10.56h-.7V8.68 8a2.35 2.35 0 01-.09.42l-.74 2.14H8l-.71-2.12a2.71 2.71 0 01-.1-.44v2.56h-.63V7.41h1l.64 1.87a2.46 2.46 0 01.11.45 3.61 3.61 0 01.12-.45l.64-1.87h1zM12.74 10.56h-1.88V7.41h.71V10h1.17z"/> <path d="M14.34 2.74L11.66.06a.2.2 0 00-.14-.06H2.28a.69.69 0 00-.68.68v15A.36.36 0 002 16h12a.36.36 0 00.36-.36V2.88a.2.2 0 00-.02-.14zM11.6 1.6l1.2 1.2h-1.2zm1.6 13.2H2.8V1.2h7.6V4h2.8z"/> </symbol>  <symbol id="zui-fs-doc" fill="var(--zui-icon-color, var(--zui-blue-600))" viewBox="0 0 16 16" aria-labelledby="zui-fs-doc-desc zui-fs-doc-title"> <title id="zui-fs-doc-title">Doc</title> <desc id="zui-fs-doc-desc">A .doc file</desc> <path d="M3.59 10.56V7.41h1.12c1.12 0 1.68.51 1.68 1.54a1.56 1.56 0 01-.46 1.17 1.66 1.66 0 01-1.22.44zM4.3 8v2h.35a1 1 0 00.73-.28A1.07 1.07 0 005.64 9a1 1 0 00-.26-.71A1 1 0 004.65 8zM8.24 10.62a1.47 1.47 0 01-1.1-.44A1.58 1.58 0 016.71 9a1.74 1.74 0 01.43-1.21 1.51 1.51 0 011.15-.46 1.45 1.45 0 011.09.44A1.63 1.63 0 019.8 9a1.69 1.69 0 01-.43 1.19 1.48 1.48 0 01-1.13.43zM8.27 8a.69.69 0 00-.59.28 1.14 1.14 0 00-.22.72 1.13 1.13 0 00.22.74.71.71 0 00.57.28.72.72 0 00.59-.27A1.15 1.15 0 009.05 9a1.24 1.24 0 00-.21-.77.68.68 0 00-.57-.23zM12.58 10.45a2.09 2.09 0 01-.9.17 1.51 1.51 0 01-1.14-.43 1.53 1.53 0 01-.42-1.13 1.61 1.61 0 011.68-1.7 2.21 2.21 0 01.78.12v.68a1.34 1.34 0 00-.72-.16 1 1 0 00-.72.28 1.05 1.05 0 00-.27.76 1 1 0 00.26.72.91.91 0 00.69.28 1.43 1.43 0 00.76-.21z"/> <path d="M14.34 2.74L11.66.06a.2.2 0 00-.14-.06H2.28a.69.69 0 00-.68.68v15A.36.36 0 002 16h12a.36.36 0 00.36-.36V2.88a.2.2 0 00-.02-.14zM11.6 1.6l1.2 1.2h-1.2zm1.6 13.2H2.8V1.2h7.6V4h2.8z"/> </symbol> <symbol id="zui-fs-txt" fill="var(--zui-icon-color, var(--zui-blue-600))" viewBox="0 0 16 16" aria-labelledby="zui-fs-txt-desc zui-fs-txt-title"> <title id="zui-fs-txt-title">Txt</title> <desc id="zui-fs-txt-desc">A .txt file</desc> <path d="M6.42 8h-.9v2.57h-.71V8h-.9v-.59h2.51zM9.41 10.56h-.84L8 9.54a.93.93 0 010-.21 1.28 1.28 0 01-.07.22l-.55 1h-.89l1-1.55-.92-1.59h.87l.45.95a2.56 2.56 0 01.11.26c0-.06 0-.15.1-.27l.5-.94h.79L8.44 9zM12.09 8h-.9v2.57h-.71V8h-.9v-.59h2.51z"/> <path d="M14.34 2.74L11.66.06a.2.2 0 00-.14-.06H2.28a.69.69 0 00-.68.68v15A.36.36 0 002 16h12a.36.36 0 00.36-.36V2.88a.2.2 0 00-.02-.14zM11.6 1.6l1.2 1.2h-1.2zm1.6 13.2H2.8V1.2h7.6V4h2.8z"/> </symbol>  <symbol id="zui-fs-mov" fill="var(--zui-icon-color, var(--zui-red-600))" viewBox="0 0 16 16" aria-labelledby="zui-fs-mov-desc zui-fs-mov-title"> <title id="zui-fs-mov-title">Mov</title> <desc id="zui-fs-mov-desc">A .mov file</desc> <path d="M6.59 10.28H6V8.6 8a2 2 0 01-.09.37l-.65 1.91h-.54l-.67-1.89A3 3 0 014 8V10.28h-.6V7.47h.93l.57 1.66a3.06 3.06 0 01.1.41c0-.16.07-.29.11-.41l.57-1.66h.9zM8.42 10.32a1.33 1.33 0 01-1-.39 1.41 1.41 0 01-.37-1 1.48 1.48 0 01.38-1.07 1.32 1.32 0 011-.41 1.28 1.28 0 011 .39 1.44 1.44 0 01.37 1 1.5 1.5 0 01-.38 1.06 1.32 1.32 0 01-1 .42zM8.44 8a.61.61 0 00-.52.25 1 1 0 00-.2.66 1 1 0 00.2.66.63.63 0 00.51.24.61.61 0 00.51-.24 1 1 0 00.2-.65A1.14 1.14 0 009 8.21.6.6 0 008.44 8zM12.6 7.47l-1 2.81h-.71L10 7.47h.68l.59 2a1.11 1.11 0 010 .28 1.77 1.77 0 01.06-.28l.58-1.95z"/> <path d="M14.34 2.74L11.66.06a.2.2 0 00-.14-.06H2.28a.69.69 0 00-.68.68v15A.36.36 0 002 16h12a.36.36 0 00.36-.36V2.88a.2.2 0 00-.02-.14zM11.6 1.6l1.2 1.2h-1.2zm1.6 13.2H2.8V1.2h7.6V4h2.8z"/> </symbol> <symbol id="zui-fs-mpg" fill="var(--zui-icon-color, var(--zui-red-600))" viewBox="0 0 16 16" aria-labelledby="zui-fs-mpg-desc zui-fs-mpg-title"> <title id="zui-fs-mpg-title">Mpg</title> <desc id="zui-fs-mpg-desc">A .mpg file</desc> <path d="M6.88 10.42h-.65V8.66v-.63l-.09.39-.69 2h-.53l-.71-2A3.15 3.15 0 014.12 8V10.39h-.6V7.48h1l.6 1.74a2.17 2.17 0 01.11.42q.06-.24.12-.42l.6-1.74h.94zM8.21 9.41v1h-.66V7.48h1c.74 0 1.11.31 1.11.94a.87.87 0 01-.32.71 1.26 1.26 0 01-.85.28zm0-1.41v.9h.27c.35 0 .52-.15.52-.46S8.83 8 8.48 8zM12.57 10.22a2.09 2.09 0 01-1.07.25 1.54 1.54 0 01-1.12-.39A1.43 1.43 0 0110 9a1.49 1.49 0 01.45-1.13 1.62 1.62 0 011.19-.44 2.31 2.31 0 01.82.13v.62A1.64 1.64 0 0011.6 8a.87.87 0 00-.67.27 1 1 0 00-.26.72 1 1 0 00.23.7.83.83 0 00.63.25.9.9 0 00.37-.07v-.6h-.58v-.53h1.25z"/> <path d="M14.34 2.74L11.66.06a.2.2 0 00-.14-.06H2.28a.69.69 0 00-.68.68v15A.36.36 0 002 16h12a.36.36 0 00.36-.36V2.88a.2.2 0 00-.02-.14zM11.6 1.6l1.2 1.2h-1.2zm1.6 13.2H2.8V1.2h7.6V4h2.8z"/> </symbol> <symbol id="zui-fs-mp4" fill="var(--zui-icon-color, var(--zui-red-600))" viewBox="0 0 16 16" aria-labelledby="zui-fs-MP4-desc zui-fs-MP4-title"> <title id="zui-fs-MP4-title">MP4</title> <desc id="zui-fs-MP4-desc">A document shaped paper with MP4 on it to indicate the file is a .mp4</desc> <path d="M14.34 2.74L11.66.06a.2.2 0 00-.14-.06H2.28a.69.69 0 00-.68.68v15A.36.36 0 002 16h12a.36.36 0 00.36-.36V2.88a.2.2 0 00-.02-.14zM11.6 1.6l1.2 1.2h-1.2zm1.6 13.2H2.8V1.2h7.6V4h2.8z"/> <path d="M6.94 10.5h-.7V8.62v-.68c0 .19-.07.33-.1.42l-.73 2.14h-.58l-.75-2.12c0-.06 0-.2-.1-.44H4v2.56h-.65V7.35h1L5 9.22a2.5 2.5 0 01.12.45 3.27 3.27 0 01.13-.46l.64-1.86h1zM8.37 9.41v1.09h-.71V7.35h1.11c.79 0 1.19.33 1.19 1a1 1 0 01-.34.77 1.33 1.33 0 01-.91.29zm0-1.51v1h.28c.37 0 .56-.17.56-.5s-.21-.5-.56-.5zM12.15 7.35v2h.38v.51h-.38v.65h-.63v-.66h-1.37v-.54c.12-.13.24-.28.38-.45s.25-.32.37-.5.24-.34.34-.51a4.18 4.18 0 00.27-.5zm-1.38 2h.75V8.23a2.75 2.75 0 01-.17.29l-.18.29-.2.28z"/> </symbol> </defs> </svg>`; const element = document.createElement('div'); element.setAttribute('style', 'display: none;'); element.setAttribute('data-icons-container', category); element.innerHTML = contents; document.head.appendChild(element);
document.createRange().createContextualFragment()
const category = 'fs'; const contents = ` <svg> <defs>   <symbol id="zui-fs-audio" fill="var(--zui-icon-color, var(--zui-orange-600))" viewBox="0 0 16 16" aria-labelledby="zui-fs-audio-desc zui-fs-audio-title"> <title id="zui-fs-audio-title">Audio</title> <desc id="zui-fs-audio-desc">A folded page with a note to indicate an audio file</desc> <path d="M14.34 2.74L11.66.06a.2.2 0 00-.14-.06H2.28a.69.69 0 00-.68.68v15A.36.36 0 002 16h12a.36.36 0 00.36-.36V2.88a.2.2 0 00-.02-.14zM11.6 1.6l1.2 1.2h-1.2zm1.6 13.2H2.8V1.2h7.6V4h2.8z"/> <path d="M10.24 6.43L9.06 5.25a.44.44 0 00-.16-.1.45.45 0 00-.36 0 .51.51 0 00-.26.26.52.52 0 000 .18v3.55a1.72 1.72 0 00-.84-.22 1.79 1.79 0 101.76 1.79V6.74l.37.37a.48.48 0 00.67 0 .48.48 0 000-.68z"/> </symbol> <symbol id="zui-fs-code" fill="var(--zui-icon-color, var(--zui-aqua-600))" viewBox="0 0 16 16" aria-labelledby="zui-fs-code-desc zui-fs-code-title"> <title id="zui-fs-code-title">Code</title> <desc id="zui-fs-code-desc">A folded page with </> to indicate a generic file</desc> <path d="M14.34 2.74L11.66.06a.2.2 0 00-.14-.06H2.28a.69.69 0 00-.68.68v15A.36.36 0 002 16h12a.36.36 0 00.36-.36V2.88a.2.2 0 00-.02-.14zM11.6 1.6l1.2 1.2h-1.2zm1.6 13.2H2.8V1.2h7.6V4h2.8z"/> <path d="M6.43 10.49l-.61.48-1.77-2.16 1.77-2.16.61.48-1.38 1.68 1.38 1.68z"/> <path transform="rotate(-66.03 8 8.81)" d="M6.07 8.41h3.87v.79H6.07z"/> <path d="M10.19 10.97l-.62-.48 1.38-1.68-1.38-1.68.62-.48 1.76 2.16-1.76 2.16z"/> </symbol> <symbol id="zui-fs-doc" fill="var(--zui-icon-color, var(--zui-blue-600))" viewBox="0 0 40 40" aria-labelledby="zui-fs-doc-desc zui-fs-doc-title"> <title id="zui-fs-doc-title">Doc</title> <desc id="zui-fs-doc-desc">Document icon with lines on it</desc> <path d="M4 1.71V39.1a.9.9 0 0 0 .9.9h30.2a.9.9 0 0 0 .9-.9V7.21a.49.49 0 0 0-.15-.36l-6.7-6.7a.49.49 0 0 0-.36-.15H5.71A1.71 1.71 0 0 0 4 1.71zM29 4l3 3h-3zm4 33H7V3h19v7h7z"/> <rect x="18.5" y="7.5" width="3" height="18" rx=".5" transform="rotate(90 20 16.5)"/> <rect x="18.5" y="13.5" width="3" height="18" rx=".5" transform="rotate(90 20 22.5)"/> <rect x="16" y="21.64" width="3" height="13" rx=".5" transform="rotate(90 17.5 28.14)"/> </symbol> <symbol id="zui-fs-folder" fill="var(--zui-icon-color, var(--zui-yellow-600))" viewBox="0 0 40 40" aria-labelledby="zui-fs-folder-desc zui-fs-folder-title"> <title id="zui-fs-folder-title">Folder</title> <desc id="zui-fs-folder-desc">A folder icon</desc> <path d="M36.5 7H20.17a.51.51 0 0 1-.3-.1l-3.74-2.8a.51.51 0 0 0-.3-.1H3.5A1.5 1.5 0 0 0 2 5.5v31A1.5 1.5 0 0 0 3.5 38h33.05A1.51 1.51 0 0 0 38 36.46V8.5A1.5 1.5 0 0 0 36.5 7zM14.83 7a.51.51 0 0 1 .3.1l3.74 2.8a.51.51 0 0 0 .3.1H35v5H5V7zM5 35V18h30v17z"/> </symbol> <symbol id="zui-fs-image" fill="var(--zui-icon-color, var(--zui-purple-600))" viewBox="0 0 16.2 17.62" aria-labelledby="zui-fs-image-desc zui-fs-image-title"> <title id="zui-fs-image-title">Image</title> <desc id="zui-fs-image-desc">Two overlapping triangles and a circle to look like a sun over mountains, indicating an image</desc> <circle cx="10.86" cy="5.04" r="1"/> <path d="M15.65 1.65H.35A.35.35 0 000 2v12a.35.35 0 00.35.35h15.3A.35.35 0 0016 14V2a.35.35 0 00-.35-.35zm-.84 9.49l-3.43-3.42a.51.51 0 00-.71 0L8.61 9.77 5.47 6.64a.5.5 0 00-.71 0l-3.57 3.55V2.84h13.62z"/> </symbol> <symbol id="zui-fs-multiple-files" fill="var(--zui-icon-color, var(--zui-blue-600))" viewBox="0 0 16 16" aria-labelledby="zui-fs-multiple-files-desc zui-fs-multiple-files-title"> <title id="zui-fs-multiple-files-title">Multiple Files</title> <desc id="zui-fs-multiple-files-desc">A document icon with lines and another document behind it to signify multiple documents</desc> <path d="M14.58 4.24l-2.38-2.3H4a.62.62 0 00-.62.62v13.26a.34.34 0 00.35.18h10.59a.36.36 0 00.35-.36V4.42zm-2.38-1l1.06 1.06H12.2zm1.41 11.67h-9.1v-12h6.63v2.48h2.47z"/> <rect x="5.83" y="7.16" width="6.28" height="1.06" rx=".18"/> <rect x="5.83" y="9.28" width="6.28" height="1.06" rx=".18"/> <rect x="5.83" y="11.31" width="4.51" height="1.06" rx=".18"/> <path d="M1.88 14.37a.55.55 0 01-.55-.55V.5a.5.5 0 01.5-.5h9.72a.55.55 0 01.55.55.55.55 0 01-.55.56H2.44v12.71a.56.56 0 01-.56.55z"/> </symbol> <symbol id="zui-fs-video" fill="var(--zui-icon-color, var(--zui-red-600))" viewBox="0 0 16 16" aria-labelledby="zui-fs-video-desc zui-fs-video-title"> <title id="zui-fs-video-title">Video</title> <desc id="zui-fs-video-desc">A document shaped icon with a triangle on it, indicating a video file</desc> <path d="M14.67 3v10.1H1.33V3h13.34m1-1.33H.33A.33.33 0 000 2v12.1a.33.33 0 00.33.33h15.34a.33.33 0 00.33-.33V2a.33.33 0 00-.33-.33z"/> <path d="M6.47 4.63L11 7.43a.5.5 0 010 .86l-4.62 2.49a.5.5 0 01-.74-.45l.07-5.28a.5.5 0 01.76-.42z"/> </symbol>  <symbol id="zui-fs-7z" fill="var(--zui-icon-color, var(--zui-yellow-600))" viewBox="0 0 16 16" aria-labelledby="zui-fs-7z-desc zui-fs-7z-title"> <title id="zui-fs-7z-title">7z</title> <desc id="zui-fs-7z-desc">A .7z file</desc> <path d="M14.34 2.74L11.66.06a.2.2 0 00-.14-.06H2.28a.69.69 0 00-.68.68v15A.36.36 0 002 16h12a.36.36 0 00.36-.36V2.88a.2.2 0 00-.02-.14zM11.6 1.6l1.2 1.2h-1.2zm1.6 13.2H2.8V1.2h7.6V4h2.8z"/> <path d="M8 7.76c-.14.25-.27.49-.38.71s-.21.44-.3.66a6.37 6.37 0 00-.21.66 6.5 6.5 0 00-.15.72H6.2c0-.25.1-.48.17-.71a4.67 4.67 0 01.23-.66c.09-.21.19-.42.3-.62s.22-.4.34-.6H5.77v-.56H8zM10.23 10.51h-2v-.29l1.11-1.45h-1v-.51h1.9v.34L9.15 10h1.08z"/> </symbol> <symbol id="zui-fs-zip" fill="var(--zui-icon-color, var(--zui-yellow-600))" viewBox="0 0 16 16" aria-labelledby="zui-fs-zip-desc zui-fs-zip-title"> <title id="zui-fs-zip-title">Zip</title> <desc id="zui-fs-zip-desc">A .zip file</desc> <path d="M14.34 2.74L11.66.06a.2.2 0 00-.14-.06H2.28a.69.69 0 00-.68.68v15A.36.36 0 002 16h12a.36.36 0 00.36-.36V2.88a.2.2 0 00-.02-.14zM11.6 1.6l1.2 1.2h-1.2zm1.6 13.2H2.8V1.2h7.6V4h2.8z"/> <path d="M7.17 10.51H4.63v-.41l1.62-2.17h-1.5v-.57h2.42v.4L5.59 9.93h1.58zM8.35 10.51h-.71V7.36h.71zM9.77 9.42v1.09h-.71V7.36h1.11c.8 0 1.2.33 1.2 1a1 1 0 01-.35.77 1.36 1.36 0 01-.91.29zm0-1.52v1h.28c.38 0 .57-.16.57-.49s-.19-.49-.57-.49z"/> </symbol>  <symbol id="zui-fs-mp3" fill="var(--zui-icon-color, var(--zui-orange-600))" viewBox="0 0 16 16" aria-labelledby="zui-fs-mp3-desc zui-fs-mp3-title"> <title id="zui-fs-mp3-title">MP3</title> <desc id="zui-fs-mp3-desc">A document shaped paper with MP3 on it to indicate the file is a .MP3</desc> <path d="M14.34 2.74L11.66.06a.2.2 0 00-.14-.06H2.28a.69.69 0 00-.68.68v15A.36.36 0 002 16h12a.36.36 0 00.36-.36V2.88a.2.2 0 00-.02-.14zM11.6 1.6l1.2 1.2h-1.2zm1.6 13.2H2.8V1.2h7.6V4h2.8z"/> <path d="M7 10.51h-.7V8.62v-.67c0 .19-.07.33-.1.42l-.74 2.14h-.62l-.75-2.12c0-.06 0-.21-.1-.44H4v2.56h-.64V7.36h1L5 9.22a2.39 2.39 0 01.12.46c0-.18.08-.33.12-.46l.65-1.86H7zM8.38 9.42v1.09h-.71V7.36h1.11c.79 0 1.19.33 1.19 1a1 1 0 01-.34.77 1.38 1.38 0 01-.91.29zm0-1.52v1h.28c.37 0 .56-.16.56-.49S9 7.9 8.66 7.9zM10.33 10.4v-.6a1.25 1.25 0 00.74.23.71.71 0 00.41-.11.39.39 0 00.15-.32.38.38 0 00-.18-.33 1 1 0 00-.51-.11h-.29v-.53h.27c.41 0 .61-.14.61-.41s-.15-.39-.47-.39a1 1 0 00-.61.21v-.57a1.71 1.71 0 01.77-.17 1.2 1.2 0 01.75.22.71.71 0 01.27.57.73.73 0 01-.62.77.87.87 0 01.52.24.7.7 0 01.2.5.84.84 0 01-.33.7 1.39 1.39 0 01-.89.25 1.66 1.66 0 01-.79-.15z"/> </symbol> <symbol id="zui-fs-wav" fill="var(--zui-icon-color, var(--zui-orange-600))" viewBox="0 0 16 16" aria-labelledby="zui-fs-wav-desc zui-fs-wav-title"> <title id="zui-fs-wav-title">Wav</title> <desc id="zui-fs-wav-desc">A .wav file</desc> <path d="M14.34 2.74L11.66.06a.2.2 0 00-.14-.06H2.28a.69.69 0 00-.68.68v15A.36.36 0 002 16h12a.36.36 0 00.36-.36V2.88a.2.2 0 00-.02-.14zM11.6 1.6l1.2 1.2h-1.2zm1.6 13.2H2.8V1.2h7.6V4h2.8z"/> <path d="M7.41 7.59l-.74 2.8H6l-.5-1.8a1.37 1.37 0 010-.31 1.82 1.82 0 010 .31l-.48 1.8h-.83l-.73-2.8h.69l.39 1.87a1.82 1.82 0 010 .32 1.05 1.05 0 01.06-.33l.5-1.86h.68l.46 1.88a1.68 1.68 0 010 .3v-.31l.39-1.87zM10.08 10.39H9.4l-.2-.62h-1l-.2.62h-.68l1-2.8h.75zm-1-1.11l-.3-.94a1.37 1.37 0 01-.05-.25 1 1 0 010 .24l-.3.95zM12.54 7.59l-1 2.8h-.72l-.95-2.8h.68l.58 1.95a.79.79 0 01.06.28 1.88 1.88 0 01.06-.29l.58-1.94z"/> </symbol>  <symbol id="zui-fs-ai" fill="var(--zui-icon-color, var(--zui-purple-600))" viewBox="0 0 16 16" aria-labelledby="zui-fs-ai-desc zui-fs-ai-title"> <title id="zui-fs-ai-title">Ai</title> <desc id="zui-fs-ai-desc">An .ai file</desc> <path d="M14.34 2.74L11.66.06a.2.2 0 00-.14-.06H2.28a.69.69 0 00-.68.68v15A.36.36 0 002 16h12a.36.36 0 00.36-.36V2.88a.2.2 0 00-.02-.14zM11.6 1.6l1.2 1.2h-1.2zm1.6 13.2H2.8V1.2h7.6V4h2.8z"/> <path d="M8.84 10.51h-.78l-.22-.7H6.72l-.22.7h-.77l1.14-3.15h.85zM7.68 9.26L7.34 8.2a.74.74 0 010-.28 1.57 1.57 0 01-.06.28l-.41 1.06zM9.94 10.51h-.71V7.36h.71z"/> </symbol> <symbol id="zui-fs-eps" fill="var(--zui-icon-color, var(--zui-purple-600))" viewBox="0 0 16 16" aria-labelledby="zui-fs-eps-desc zui-fs-eps-title"> <title id="zui-fs-eps-title">Eps</title> <desc id="zui-fs-eps-desc">An .eps file</desc> <path d="M6.31 10.51H4.42V7.36h1.82v.58H5.13v.7h1v.57h-1v.72h1.18zM7.52 9.42v1.09h-.71V7.36h1.12c.79 0 1.19.33 1.19 1a1 1 0 01-.35.77 1.31 1.31 0 01-.91.29zm0-1.52v1h.28c.38 0 .57-.16.57-.49s-.19-.51-.57-.51zM9.43 10.39v-.71a1.51 1.51 0 00.42.25 1.42 1.42 0 00.45.08.75.75 0 00.23 0 .56.56 0 00.17-.06.26.26 0 00.1-.11.27.27 0 000-.12.26.26 0 00-.05-.17.44.44 0 00-.14-.13l-.22-.12-.27-.12a1.3 1.3 0 01-.55-.37.84.84 0 01-.18-.54.82.82 0 01.1-.42.69.69 0 01.27-.29 1.15 1.15 0 01.39-.17 1.86 1.86 0 01.48-.05 2.72 2.72 0 01.43 0 1.2 1.2 0 01.35.09v.65a.91.91 0 00-.14-.08l-.19-.07h-.38a.73.73 0 00-.22 0 .38.38 0 00-.17.06.36.36 0 00-.11.1.28.28 0 000 .13.23.23 0 000 .14.34.34 0 00.12.12.78.78 0 00.18.11l.25.11a3.58 3.58 0 01.34.17 1.37 1.37 0 01.26.2.71.71 0 01.16.26.84.84 0 01.06.33.88.88 0 01-.1.45.83.83 0 01-.27.29 1.45 1.45 0 01-.4.16 2.45 2.45 0 01-.48 0 2.56 2.56 0 01-.49 0 1.52 1.52 0 01-.4-.17z"/> <path d="M14.34 2.74L11.66.06a.2.2 0 00-.14-.06H2.28a.69.69 0 00-.68.68v15A.36.36 0 002 16h12a.36.36 0 00.36-.36V2.88a.2.2 0 00-.02-.14zM11.6 1.6l1.2 1.2h-1.2zm1.6 13.2H2.8V1.2h7.6V4h2.8z"/> </symbol> <symbol id="zui-fs-gif" fill="var(--zui-icon-color, var(--zui-purple-600))" viewBox="0 0 16 16" aria-labelledby="zui-fs-gif-desc zui-fs-gif-title"> <title id="zui-fs-gif-title">Gif</title> <desc id="zui-fs-gif-desc">A .gif file</desc> <path d="M7.46 10.3a2.24 2.24 0 01-1.14.26 1.66 1.66 0 01-1.2-.42A1.49 1.49 0 014.68 9a1.62 1.62 0 01.48-1.21 1.74 1.74 0 011.27-.46 2.59 2.59 0 01.88.13v.67a1.75 1.75 0 00-.89-.21.94.94 0 00-.72.29 1.05 1.05 0 00-.27.79 1.09 1.09 0 00.24.75.9.9 0 00.68.27 1.06 1.06 0 00.4-.07v-.67h-.63v-.57h1.34zM8.78 10.51h-.71V7.36h.71zM11.32 7.94h-1.11v.77h1v.57h-1v1.23H9.5V7.36h1.82z"/> <path d="M14.34 2.74L11.66.06a.2.2 0 00-.14-.06H2.28a.69.69 0 00-.68.68v15A.36.36 0 002 16h12a.36.36 0 00.36-.36V2.88a.2.2 0 00-.02-.14zM11.6 1.6l1.2 1.2h-1.2zm1.6 13.2H2.8V1.2h7.6V4h2.8z"/> </symbol> <symbol id="zui-fs-jpg" fill="var(--zui-icon-color, var(--zui-purple-600))" viewBox="0 0 16 16" aria-labelledby="zui-fs-jpg-desc zui-fs-jpg-title"> <title id="zui-fs-jpg-title">Jpg</title> <desc id="zui-fs-jpg-desc">A .jpg file</desc> <path d="M5.77 9.26a1.48 1.48 0 01-.29 1 1.09 1.09 0 01-.85.33 1.34 1.34 0 01-.46-.08v-.7a.68.68 0 00.41.14q.48 0 .48-.72V7.36h.71zM7.17 9.42v1.09h-.71V7.36h1.11c.8 0 1.19.33 1.19 1a1 1 0 01-.34.77 1.33 1.33 0 01-.91.29zm0-1.52v1h.28c.38 0 .57-.16.57-.49s-.19-.49-.57-.49zM11.83 10.3a2.34 2.34 0 01-1.14.26 1.66 1.66 0 01-1.2-.42A1.49 1.49 0 019.05 9a1.62 1.62 0 01.48-1.21 1.75 1.75 0 011.27-.49 2.68 2.68 0 01.89.14v.67a1.81 1.81 0 00-.9-.21 1 1 0 00-.72.28A1.1 1.1 0 009.8 9a1.09 1.09 0 00.2.7.9.9 0 00.68.27.89.89 0 00.4-.08v-.61h-.63v-.57h1.34z"/> <path d="M14.34 2.74L11.66.06a.2.2 0 00-.14-.06H2.28a.69.69 0 00-.68.68v15A.36.36 0 002 16h12a.36.36 0 00.36-.36V2.88a.2.2 0 00-.02-.14zM11.6 1.6l1.2 1.2h-1.2zm1.6 13.2H2.8V1.2h7.6V4h2.8z"/> </symbol> <symbol id="zui-fs-png" fill="var(--zui-icon-color, var(--zui-purple-600))" viewBox="0 0 16 16" aria-labelledby="zui-fs-png-desc zui-fs-png-title"> <title id="zui-fs-png-title">Png</title> <desc id="zui-fs-png-desc">A .png file</desc> <path d="M4.26 9.48v1.08h-.71V7.41h1.11c.79 0 1.19.34 1.19 1a.94.94 0 01-.34.76 1.33 1.33 0 01-.91.3zm0-1.48v1h.28c.37 0 .56-.17.56-.5S4.91 8 4.54 8zM9.15 10.56h-.72l-1.3-2A1.85 1.85 0 017 8.32a3.41 3.41 0 010 .51v1.73h-.69V7.41h.77l1.25 1.92c.05.09.11.17.15.26V7.41h.67zM12.45 10.35a2.21 2.21 0 01-1.14.27 1.66 1.66 0 01-1.2-.42A1.51 1.51 0 019.67 9a1.6 1.6 0 01.48-1.21 1.71 1.71 0 011.27-.47 2.45 2.45 0 01.89.14v.66a1.79 1.79 0 00-.9-.21 1 1 0 00-.72.29 1.05 1.05 0 00-.27.76 1.06 1.06 0 00.25.76 1.05 1.05 0 001.07.19v-.58h-.63v-.56h1.34z"/> <path d="M14.34 2.74L11.66.06a.2.2 0 00-.14-.06H2.28a.69.69 0 00-.68.68v15A.36.36 0 002 16h12a.36.36 0 00.36-.36V2.88a.2.2 0 00-.02-.14zM11.6 1.6l1.2 1.2h-1.2zm1.6 13.2H2.8V1.2h7.6V4h2.8z"/> </symbol> <symbol id="zui-fs-ps" fill="var(--zui-icon-color, var(--zui-purple-600))" viewBox="0 0 16 16" aria-labelledby="zui-fs-ps-desc zui-fs-ps-title"> <title id="zui-fs-ps-title">Ps</title> <desc id="zui-fs-ps-desc">A .ps file</desc> <path d="M6.33 9.49v1.08h-.71V7.42h1.11c.79 0 1.19.34 1.19 1a1 1 0 01-.34.76 1.36 1.36 0 01-.92.3zm0-1.49v1h.27c.38 0 .57-.17.57-.5S7 8 6.6 8zM8.24 10.45v-.7a1.14 1.14 0 00.41.24 1.42 1.42 0 00.45.08h.24A.59.59 0 009.5 10a.24.24 0 00.1-.1.2.2 0 000-.13.23.23 0 00-.06-.16.47.47 0 00-.14-.14l-.22-.12L9 9.22a1.48 1.48 0 01-.55-.38.84.84 0 01-.18-.54.81.81 0 01.37-.71A1.25 1.25 0 019 7.42a2.44 2.44 0 01.48 0 2.94 2.94 0 01.44 0 2 2 0 01.35.09v.66l-.18-.1L9.88 8H9.5a.78.78 0 00-.22 0h-.17a.35.35 0 00-.1.11.18.18 0 000 .13.23.23 0 000 .14.68.68 0 00.12.12l.19.11.24.11a3.68 3.68 0 01.34.16 1.09 1.09 0 01.26.21.85.85 0 01.17.25.9.9 0 01.05.34.87.87 0 01-.1.44.69.69 0 01-.27.29 1.12 1.12 0 01-.4.16 2.44 2.44 0 01-.48.05 2.63 2.63 0 01-.49-.05 1.34 1.34 0 01-.4-.12z"/> <path d="M14.34 2.74L11.66.06a.2.2 0 00-.14-.06H2.28a.69.69 0 00-.68.68v15A.36.36 0 002 16h12a.36.36 0 00.36-.36V2.88a.2.2 0 00-.02-.14zM11.6 1.6l1.2 1.2h-1.2zm1.6 13.2H2.8V1.2h7.6V4h2.8z"/> </symbol> <symbol id="zui-fs-psd" fill="var(--zui-icon-color, var(--zui-purple-600))" viewBox="0 0 16 16" aria-labelledby="zui-fs-psd-desc zui-fs-psd-title"> <title id="zui-fs-psd-title">Psd</title> <desc id="zui-fs-psd-desc">A .psd file</desc> <path d="M4.67 9.49v1.08H4V7.42h1.07c.8 0 1.19.34 1.19 1a.94.94 0 01-.34.76 1.33 1.33 0 01-.91.3zm0-1.49v1H5c.38 0 .56-.17.56-.5S5.33 8 5 8zM6.58 10.45v-.7A1.69 1.69 0 007 10a1.44 1.44 0 00.46.08.8.8 0 00.23 0 .43.43 0 00.16-.08.32.32 0 00.1-.1.29.29 0 000-.29.67.67 0 00-.15-.14l-.21-.12-.29-.13a1.4 1.4 0 01-.55-.38.84.84 0 01-.18-.54.78.78 0 01.36-.71 1.31 1.31 0 01.4-.17 2.42 2.42 0 01.47 0 2.85 2.85 0 01.44 0 1.79 1.79 0 01.35.09v.66a1 1 0 00-.17-.1L8.22 8 8 7.94h-.16a.78.78 0 00-.22 0L7.45 8l-.1.1a.22.22 0 000 .13.33.33 0 000 .15l.12.12.19.11.25.11.34.16a1.33 1.33 0 01.26.21.82.82 0 01.16.25.9.9 0 01.06.34 1 1 0 01-.1.44.84.84 0 01-.27.29 1.29 1.29 0 01-.4.16 2.44 2.44 0 01-.48.05 2.65 2.65 0 01-.5-.05 1.45 1.45 0 01-.4-.12zM9.25 10.57V7.42h1.11C11.48 7.42 12 7.93 12 9a1.52 1.52 0 01-.46 1.17 1.65 1.65 0 01-1.22.44zM10 8v2h.35a1 1 0 00.65-.28 1 1 0 00.29-.72.93.93 0 00-.29-.74 1 1 0 00-.7-.26z"/> <path d="M14.34 2.74L11.66.06a.2.2 0 00-.14-.06H2.28a.69.69 0 00-.68.68v15A.36.36 0 002 16h12a.36.36 0 00.36-.36V2.88a.2.2 0 00-.02-.14zM11.6 1.6l1.2 1.2h-1.2zm1.6 13.2H2.8V1.2h7.6V4h2.8z"/> </symbol> <symbol id="zui-fs-tif" fill="var(--zui-icon-color, var(--zui-purple-600))" viewBox="0 0 16 16" aria-labelledby="zui-fs-tif-desc zui-fs-tif-title"> <title id="zui-fs-tif-title">Tif</title> <desc id="zui-fs-tif-desc">A .tif file</desc> <path d="M7.42 8.05h-.9v2.58h-.71V8.05h-.9v-.57h2.51zM8.55 10.63h-.71V7.48h.71zM11.09 8.05H10v.78h1v.57h-1v1.23h-.73V7.48h1.82z"/> <path d="M14.34 2.74L11.66.06a.2.2 0 00-.14-.06H2.28a.69.69 0 00-.68.68v15A.36.36 0 002 16h12a.36.36 0 00.36-.36V2.88a.2.2 0 00-.02-.14zM11.6 1.6l1.2 1.2h-1.2zm1.6 13.2H2.8V1.2h7.6V4h2.8z"/> </symbol>  <symbol id="zui-fs-pdf" fill="var(--zui-icon-color, var(--zui-orange-400))" viewBox="0 0 40 40" aria-labelledby="zui-fs-pdf-desc zui-fs-pdf-title"> <title id="zui-fs-pdf-title">PDF</title> <desc id="zui-fs-pdf-desc">A document shaped paper with the letters PDF on it to indicate the file is a .PDF</desc> <path d="M4 1.71V39.1a.9.9 0 0 0 .9.9h30.2a.9.9 0 0 0 .9-.9V7.21a.47.47 0 0 0-.15-.35L29.15.15a.53.53 0 0 0-.36-.15H5.71A1.72 1.72 0 0 0 4 1.71zM29 4l3 3h-3zm4 33H7V3h19v7h7z"/> <path d="M15.55 20.51a2.46 2.46 0 0 1-.81 2 3.46 3.46 0 0 1-2.31.69h-.73V26H10v-8h2.57a3.42 3.42 0 0 1 2.22.63 2.28 2.28 0 0 1 .76 1.88zm-3.85 1.27h.56a1.85 1.85 0 0 0 1.18-.31 1.09 1.09 0 0 0 .39-.9 1.12 1.12 0 0 0-.33-.89 1.53 1.53 0 0 0-1-.28h-.8zM23.73 21.94a4 4 0 0 1-1.13 3A4.61 4.61 0 0 1 19.34 26h-2.27v-8h2.52a4.24 4.24 0 0 1 3.05 1 3.8 3.8 0 0 1 1.09 2.94zM22 22q0-2.58-2.28-2.58h-.91v5.23h.73c1.6-.02 2.46-.9 2.46-2.65zM27.07 26H25.4v-8H30v1.4h-2.93v2.07h2.73v1.39h-2.73z"/> </symbol> <symbol id="zui-fs-ppt" fill="var(--zui-icon-color, var(--zui-red-600))" viewBox="0 0 40 40" aria-labelledby="zui-fs-ppt-desc zui-fs-ppt-title"> <title id="zui-fs-ppt-title">Powerpoint</title> <desc id="zui-fs-ppt-desc">A document shaped paper with the letter P on it to indicate the file is Microsoft Powerpoint</desc> <path d="M4 1.71V39.1a.9.9 0 0 0 .9.9h30.2a.9.9 0 0 0 .9-.9V7.21a.49.49 0 0 0-.15-.36l-6.7-6.7a.49.49 0 0 0-.36-.15H5.71A1.71 1.71 0 0 0 4 1.71zM29 4l3 3h-3zm4 33H7V3h19v7h7z"/> <path d="M21.16 14H15v16.94h3.53V25h2.63a5.48 5.48 0 1 0 0-10.95zm-.67 8.17h-1.94v-5.05h1.94a2.54 2.54 0 0 1 0 5.07z"/> </symbol> <symbol id="zui-fs-word" fill="var(--zui-icon-color, var(--zui-blue-600))" viewBox="0 0 40 40" aria-labelledby="zui-fs-word-desc zui-fs-word-title"> <title id="zui-fs-word-title">Word</title> <desc id="zui-fs-word-desc">A document shaped paper with the letter W on it to indicate the file is a Microsoft Word doc</desc> <path d="M4 1.71V39.1a.9.9 0 0 0 .9.9h30.2a.9.9 0 0 0 .9-.9V7.21a.47.47 0 0 0-.15-.35L29.15.15a.53.53 0 0 0-.36-.15H5.71A1.72 1.72 0 0 0 4 1.71zM29 4l3 3h-3zm4 33H7V3h19v7h7z"/> <path d="M25.86 29h-4.07l-1.21-5.55c-.06-.23-.15-.69-.28-1.39s-.22-1.26-.27-1.73c-.05.38-.13.85-.23 1.41s-.21 1.07-.31 1.54S19 25.66 18.22 29h-4.07L11 16.26h3.32l1.38 6.39c.32 1.41.53 2.53.65 3.37.07-.59.21-1.4.4-2.41s.38-1.86.55-2.53l1.12-4.82h3.19l1.09 4.82c.19.77.38 1.66.57 2.68s.32 1.76.38 2.26c.08-.64.28-1.76.62-3.35l1.41-6.41H29z"/> </symbol> <symbol id="zui-fs-excel" fill="var(--zui-icon-color, var(--zui-green-600))" viewBox="0 0 40 40" aria-labelledby="zui-fs-excel-desc zui-fs-excel-title"> <title id="zui-fs-excel-title">Excel</title> <desc id="zui-fs-excel-desc">A document shaped paper with an X on it to indiciate it's an Microsoft Excel file</desc> <path d="M4 1.71V39.1a.9.9 0 0 0 .9.9h30.2a.9.9 0 0 0 .9-.9V7.21a.47.47 0 0 0-.15-.35L29.15.15a.53.53 0 0 0-.36-.15H5.71A1.72 1.72 0 0 0 4 1.71zM29 4l3 3h-3zm4 33H7V3h19v7h7z"/> <path d="M27 29.44h-4.35l-2.71-4.35-2.69 4.35H13l4.62-7.12-4.34-6.8h4.16l2.56 4.3 2.41-4.3h4.3l-4.41 7.09z"/> </symbol>  <symbol id="zui-fs-css" fill="var(--zui-icon-color, var(--zui-aqua-600))" viewBox="0 0 16 16" aria-labelledby="zui-fs-css-desc zui-fs-css-title"> <title id="zui-fs-css-title">Css</title> <desc id="zui-fs-css-desc">A .css file</desc> <path d="M6.69 10.4a2.1 2.1 0 01-.9.16 1.54 1.54 0 01-1.14-.42A1.57 1.57 0 014.23 9a1.66 1.66 0 01.47-1.22 1.61 1.61 0 011.21-.47 2.22 2.22 0 01.78.11v.69A1.34 1.34 0 006 7.92a1 1 0 00-.72.28A1 1 0 005 9a1 1 0 00.26.73.9.9 0 00.69.27 1.51 1.51 0 00.76-.2zM7.09 10.39v-.71a1.51 1.51 0 00.42.25A1.42 1.42 0 008 10a.88.88 0 00.24 0 .59.59 0 00.16-.06.26.26 0 00.1-.11.19.19 0 000-.12.27.27 0 00-.06-.17.44.44 0 00-.14-.13l-.22-.12-.27-.12a1.36 1.36 0 01-.55-.37.84.84 0 01-.18-.54.82.82 0 01.1-.42.84.84 0 01.27-.29 1.15 1.15 0 01.39-.17 1.86 1.86 0 01.48-.05 2.72 2.72 0 01.43 0 1.36 1.36 0 01.36.09v.65A1 1 0 008.93 8l-.19-.07h-.38a.73.73 0 00-.22 0A.43.43 0 008 8a.32.32 0 00-.1.1.2.2 0 000 .13.23.23 0 000 .14.34.34 0 00.1.07.68.68 0 00.19.11 1.33 1.33 0 00.24.11 3.58 3.58 0 01.34.17A1.37 1.37 0 019 9a.9.9 0 01.17.26 1.09 1.09 0 01.05.33.88.88 0 01-.1.45.75.75 0 01-.27.29 1.34 1.34 0 01-.4.16 2.45 2.45 0 01-.48 0 2.63 2.63 0 01-.49 0 1.52 1.52 0 01-.39-.1zM9.62 10.39v-.71a1.33 1.33 0 00.41.25 1.42 1.42 0 00.45.08.88.88 0 00.24 0 .67.67 0 00.17-.06.52.52 0 00.1-.11.27.27 0 000-.12.34.34 0 000-.17.64.64 0 00-.15-.13l-.21-.12-.27-.12a1.3 1.3 0 01-.55-.37.79.79 0 01-.19-.54.93.93 0 01.1-.42.84.84 0 01.28-.32 1.31 1.31 0 01.4-.17 1.78 1.78 0 01.47-.05 2.94 2.94 0 01.44 0 1.39 1.39 0 01.35.09v.65a1.4 1.4 0 00-.2-.05l-.2-.07h-.38a.78.78 0 00-.22 0 .49.49 0 00-.17.06.32.32 0 00-.1.1.2.2 0 000 .13.23.23 0 000 .14.34.34 0 00.12.12.86.86 0 00.19.11 1.17 1.17 0 00.25.11c.12.06.24.11.34.17a1.29 1.29 0 01.25.2.73.73 0 01.17.26.84.84 0 01.06.33 1 1 0 01-.1.45.94.94 0 01-.27.29 1.59 1.59 0 01-.4.16 2.59 2.59 0 01-.48 0 2.67 2.67 0 01-.5 0 1.45 1.45 0 01-.4-.17z"/> <path d="M14.34 2.74L11.66.06a.2.2 0 00-.14-.06H2.28a.69.69 0 00-.68.68v15A.36.36 0 002 16h12a.36.36 0 00.36-.36V2.88a.2.2 0 00-.02-.14zM11.6 1.6l1.2 1.2h-1.2zm1.6 13.2H2.8V1.2h7.6V4h2.8z"/> </symbol> <symbol id="zui-fs-html" fill="var(--zui-icon-color, var(--zui-aqua-600))" viewBox="0 0 16 16" aria-labelledby="zui-fs-html-desc zui-fs-html-title"> <title id="zui-fs-html-title">Html</title> <desc id="zui-fs-html-desc">An .html file</desc> <path d="M5.61 10.07h-.52v-.94h-1v.94h-.48V7.76h.52v.92h1v-.92h.52zM7.76 8.18H7.1v1.89h-.52V8.18h-.66v-.42h1.84zM10.71 10.07h-.52V8.69v-.5c0 .14 0 .25-.07.31l-.55 1.57h-.41l-.55-1.56a1.82 1.82 0 01-.07-.32v1.88h-.47V7.76h.76l.48 1.37c0 .11.06.22.08.33 0-.13.06-.24.09-.34L10 7.76h.75zM12.61 10.07h-1.38V7.76h.52v1.89h.86z"/> <path d="M14.34 2.74L11.66.06a.2.2 0 00-.14-.06H2.28a.69.69 0 00-.68.68v15A.36.36 0 002 16h12a.36.36 0 00.36-.36V2.88a.2.2 0 00-.02-.14zM11.6 1.6l1.2 1.2h-1.2zm1.6 13.2H2.8V1.2h7.6V4h2.8z"/> </symbol> <symbol id="zui-fs-java" fill="var(--zui-icon-color, var(--zui-aqua-600))" viewBox="0 0 16 16" aria-labelledby="zui-fs-java-desc zui-fs-java-title"> <title id="zui-fs-java-title">Java</title> <desc id="zui-fs-java-desc">A .java file</desc> <path d="M4.87 9.16a1.18 1.18 0 01-.25.82.88.88 0 01-.71.28 1 1 0 01-.39-.07v-.56a.54.54 0 00.34.12c.28 0 .41-.21.41-.61V7.56h.6zM7.68 10.22H7l-.19-.59h-1l-.18.59h-.57L6 7.56h.71zm-1-1.05l-.28-.9a.85.85 0 010-.24 1.55 1.55 0 01-.05.23L6 9.17zM10 7.56l-.9 2.66h-.68l-.9-2.66h.64l.56 1.85a1 1 0 010 .26 1.68 1.68 0 01.06-.27l.55-1.84zM12.48 10.22h-.65l-.19-.59h-1l-.19.59h-.59l1-2.66h.71zm-1-1.05l-.28-.9a.85.85 0 01-.03-.27 1.55 1.55 0 01-.05.23l-.29.91z"/> <path d="M14.34 2.74L11.66.06a.2.2 0 00-.14-.06H2.28a.69.69 0 00-.68.68v15A.36.36 0 002 16h12a.36.36 0 00.36-.36V2.88a.2.2 0 00-.02-.14zM11.6 1.6l1.2 1.2h-1.2zm1.6 13.2H2.8V1.2h7.6V4h2.8z"/> </symbol> <symbol id="zui-fs-xml" fill="var(--zui-icon-color, var(--zui-aqua-600))" viewBox="0 0 16 16" aria-labelledby="zui-fs-xml-desc zui-fs-xml-title"> <title id="zui-fs-xml-title">Xml</title> <desc id="zui-fs-xml-desc">An .xml file</desc> <path d="M6.18 10.56h-.84l-.54-1a.83.83 0 01-.07-.21 1.28 1.28 0 01-.07.22l-.54 1h-.86l1-1.57-.91-1.59h.86l.45.95a.88.88 0 01.09.26c0-.06 0-.15.1-.27l.5-.94h.79L5.21 9zM10.15 10.56h-.7V8.68 8a2.35 2.35 0 01-.09.42l-.74 2.14H8l-.71-2.12a2.71 2.71 0 01-.1-.44v2.56h-.63V7.41h1l.64 1.87a2.46 2.46 0 01.11.45 3.61 3.61 0 01.12-.45l.64-1.87h1zM12.74 10.56h-1.88V7.41h.71V10h1.17z"/> <path d="M14.34 2.74L11.66.06a.2.2 0 00-.14-.06H2.28a.69.69 0 00-.68.68v15A.36.36 0 002 16h12a.36.36 0 00.36-.36V2.88a.2.2 0 00-.02-.14zM11.6 1.6l1.2 1.2h-1.2zm1.6 13.2H2.8V1.2h7.6V4h2.8z"/> </symbol>  <symbol id="zui-fs-doc" fill="var(--zui-icon-color, var(--zui-blue-600))" viewBox="0 0 16 16" aria-labelledby="zui-fs-doc-desc zui-fs-doc-title"> <title id="zui-fs-doc-title">Doc</title> <desc id="zui-fs-doc-desc">A .doc file</desc> <path d="M3.59 10.56V7.41h1.12c1.12 0 1.68.51 1.68 1.54a1.56 1.56 0 01-.46 1.17 1.66 1.66 0 01-1.22.44zM4.3 8v2h.35a1 1 0 00.73-.28A1.07 1.07 0 005.64 9a1 1 0 00-.26-.71A1 1 0 004.65 8zM8.24 10.62a1.47 1.47 0 01-1.1-.44A1.58 1.58 0 016.71 9a1.74 1.74 0 01.43-1.21 1.51 1.51 0 011.15-.46 1.45 1.45 0 011.09.44A1.63 1.63 0 019.8 9a1.69 1.69 0 01-.43 1.19 1.48 1.48 0 01-1.13.43zM8.27 8a.69.69 0 00-.59.28 1.14 1.14 0 00-.22.72 1.13 1.13 0 00.22.74.71.71 0 00.57.28.72.72 0 00.59-.27A1.15 1.15 0 009.05 9a1.24 1.24 0 00-.21-.77.68.68 0 00-.57-.23zM12.58 10.45a2.09 2.09 0 01-.9.17 1.51 1.51 0 01-1.14-.43 1.53 1.53 0 01-.42-1.13 1.61 1.61 0 011.68-1.7 2.21 2.21 0 01.78.12v.68a1.34 1.34 0 00-.72-.16 1 1 0 00-.72.28 1.05 1.05 0 00-.27.76 1 1 0 00.26.72.91.91 0 00.69.28 1.43 1.43 0 00.76-.21z"/> <path d="M14.34 2.74L11.66.06a.2.2 0 00-.14-.06H2.28a.69.69 0 00-.68.68v15A.36.36 0 002 16h12a.36.36 0 00.36-.36V2.88a.2.2 0 00-.02-.14zM11.6 1.6l1.2 1.2h-1.2zm1.6 13.2H2.8V1.2h7.6V4h2.8z"/> </symbol> <symbol id="zui-fs-txt" fill="var(--zui-icon-color, var(--zui-blue-600))" viewBox="0 0 16 16" aria-labelledby="zui-fs-txt-desc zui-fs-txt-title"> <title id="zui-fs-txt-title">Txt</title> <desc id="zui-fs-txt-desc">A .txt file</desc> <path d="M6.42 8h-.9v2.57h-.71V8h-.9v-.59h2.51zM9.41 10.56h-.84L8 9.54a.93.93 0 010-.21 1.28 1.28 0 01-.07.22l-.55 1h-.89l1-1.55-.92-1.59h.87l.45.95a2.56 2.56 0 01.11.26c0-.06 0-.15.1-.27l.5-.94h.79L8.44 9zM12.09 8h-.9v2.57h-.71V8h-.9v-.59h2.51z"/> <path d="M14.34 2.74L11.66.06a.2.2 0 00-.14-.06H2.28a.69.69 0 00-.68.68v15A.36.36 0 002 16h12a.36.36 0 00.36-.36V2.88a.2.2 0 00-.02-.14zM11.6 1.6l1.2 1.2h-1.2zm1.6 13.2H2.8V1.2h7.6V4h2.8z"/> </symbol>  <symbol id="zui-fs-mov" fill="var(--zui-icon-color, var(--zui-red-600))" viewBox="0 0 16 16" aria-labelledby="zui-fs-mov-desc zui-fs-mov-title"> <title id="zui-fs-mov-title">Mov</title> <desc id="zui-fs-mov-desc">A .mov file</desc> <path d="M6.59 10.28H6V8.6 8a2 2 0 01-.09.37l-.65 1.91h-.54l-.67-1.89A3 3 0 014 8V10.28h-.6V7.47h.93l.57 1.66a3.06 3.06 0 01.1.41c0-.16.07-.29.11-.41l.57-1.66h.9zM8.42 10.32a1.33 1.33 0 01-1-.39 1.41 1.41 0 01-.37-1 1.48 1.48 0 01.38-1.07 1.32 1.32 0 011-.41 1.28 1.28 0 011 .39 1.44 1.44 0 01.37 1 1.5 1.5 0 01-.38 1.06 1.32 1.32 0 01-1 .42zM8.44 8a.61.61 0 00-.52.25 1 1 0 00-.2.66 1 1 0 00.2.66.63.63 0 00.51.24.61.61 0 00.51-.24 1 1 0 00.2-.65A1.14 1.14 0 009 8.21.6.6 0 008.44 8zM12.6 7.47l-1 2.81h-.71L10 7.47h.68l.59 2a1.11 1.11 0 010 .28 1.77 1.77 0 01.06-.28l.58-1.95z"/> <path d="M14.34 2.74L11.66.06a.2.2 0 00-.14-.06H2.28a.69.69 0 00-.68.68v15A.36.36 0 002 16h12a.36.36 0 00.36-.36V2.88a.2.2 0 00-.02-.14zM11.6 1.6l1.2 1.2h-1.2zm1.6 13.2H2.8V1.2h7.6V4h2.8z"/> </symbol> <symbol id="zui-fs-mpg" fill="var(--zui-icon-color, var(--zui-red-600))" viewBox="0 0 16 16" aria-labelledby="zui-fs-mpg-desc zui-fs-mpg-title"> <title id="zui-fs-mpg-title">Mpg</title> <desc id="zui-fs-mpg-desc">A .mpg file</desc> <path d="M6.88 10.42h-.65V8.66v-.63l-.09.39-.69 2h-.53l-.71-2A3.15 3.15 0 014.12 8V10.39h-.6V7.48h1l.6 1.74a2.17 2.17 0 01.11.42q.06-.24.12-.42l.6-1.74h.94zM8.21 9.41v1h-.66V7.48h1c.74 0 1.11.31 1.11.94a.87.87 0 01-.32.71 1.26 1.26 0 01-.85.28zm0-1.41v.9h.27c.35 0 .52-.15.52-.46S8.83 8 8.48 8zM12.57 10.22a2.09 2.09 0 01-1.07.25 1.54 1.54 0 01-1.12-.39A1.43 1.43 0 0110 9a1.49 1.49 0 01.45-1.13 1.62 1.62 0 011.19-.44 2.31 2.31 0 01.82.13v.62A1.64 1.64 0 0011.6 8a.87.87 0 00-.67.27 1 1 0 00-.26.72 1 1 0 00.23.7.83.83 0 00.63.25.9.9 0 00.37-.07v-.6h-.58v-.53h1.25z"/> <path d="M14.34 2.74L11.66.06a.2.2 0 00-.14-.06H2.28a.69.69 0 00-.68.68v15A.36.36 0 002 16h12a.36.36 0 00.36-.36V2.88a.2.2 0 00-.02-.14zM11.6 1.6l1.2 1.2h-1.2zm1.6 13.2H2.8V1.2h7.6V4h2.8z"/> </symbol> <symbol id="zui-fs-mp4" fill="var(--zui-icon-color, var(--zui-red-600))" viewBox="0 0 16 16" aria-labelledby="zui-fs-MP4-desc zui-fs-MP4-title"> <title id="zui-fs-MP4-title">MP4</title> <desc id="zui-fs-MP4-desc">A document shaped paper with MP4 on it to indicate the file is a .mp4</desc> <path d="M14.34 2.74L11.66.06a.2.2 0 00-.14-.06H2.28a.69.69 0 00-.68.68v15A.36.36 0 002 16h12a.36.36 0 00.36-.36V2.88a.2.2 0 00-.02-.14zM11.6 1.6l1.2 1.2h-1.2zm1.6 13.2H2.8V1.2h7.6V4h2.8z"/> <path d="M6.94 10.5h-.7V8.62v-.68c0 .19-.07.33-.1.42l-.73 2.14h-.58l-.75-2.12c0-.06 0-.2-.1-.44H4v2.56h-.65V7.35h1L5 9.22a2.5 2.5 0 01.12.45 3.27 3.27 0 01.13-.46l.64-1.86h1zM8.37 9.41v1.09h-.71V7.35h1.11c.79 0 1.19.33 1.19 1a1 1 0 01-.34.77 1.33 1.33 0 01-.91.29zm0-1.51v1h.28c.37 0 .56-.17.56-.5s-.21-.5-.56-.5zM12.15 7.35v2h.38v.51h-.38v.65h-.63v-.66h-1.37v-.54c.12-.13.24-.28.38-.45s.25-.32.37-.5.24-.34.34-.51a4.18 4.18 0 00.27-.5zm-1.38 2h.75V8.23a2.75 2.75 0 01-.17.29l-.18.29-.2.28z"/> </symbol> </defs> </svg>`; const elementString = ` <div style="display: none;" data-icons-container="${category}"> ${contents} </div> `; const elementFragment = document.createRange().createContextualFragment(elementString); document.head.appendChild(elementFragment);

Run results for: document.createElement vs createContextualFragment

document.createElement

document.createRange().createContextualFragment()