diff --git a/src/test/panels/iconfont/REMEAD.md b/src/test/panels/iconfont/REMEAD.md
new file mode 100644
index 0000000..ab32385
--- /dev/null
+++ b/src/test/panels/iconfont/REMEAD.md
@@ -0,0 +1,63 @@
+# iconfont字体库
+## 介绍
+iconfont字体库支持多色图标字体，可通过Unicode、fontclass和symbol三种方式进行引用。
+## 使用方法
+> Unicode 引用
+```
+第一步：设置@font-face
+
+@font-face {
+  font-family: 'iconfont';
+  src: 
+       url('iconfont.ttf?t=1667368773903') format('truetype');
+}
+
+第二步：定义样式，如
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+第三步：挑选相应图标并获取字体编码，应用于页面（字体编码可在iconfont.json文件中查询）
+
+<span class="iconfont">&#x33;</span>
+```
+> font-class 引用
+```
+第一步：引用生成的iconfont.css文件
+<link rel="stylesheet" href="./iconfont.css">
+
+第二步：挑选相应图标并获取类名，应用于页面：
+
+<span class="iconfont xxx"></span>
+```
+
+> Symbol 引用
+```
+第一步：引入iconfont.js：
+
+<script src="./iconfont.js"></script>
+
+第二步：加入通用 CSS 代码（引入一次就行）：
+
+<style>
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+</style>
+
+第三步：挑选相应图标并获取类名，应用于页面：
+
+<svg class="icon" aria-hidden="true">
+  <use xlink:href="#icon-xxx"></use>
+</svg>
+
+```
\ No newline at end of file
diff --git a/src/test/panels/iconfont/iconfont.ts b/src/test/panels/iconfont/iconfont.ts
new file mode 100644
index 0000000..8486f6f
--- /dev/null
+++ b/src/test/panels/iconfont/iconfont.ts
@@ -0,0 +1,253 @@
+import {html, LitElement, CSSResultArray, PropertyValueMap} from 'lit'
+import {customElement} from 'lit/decorators.js'
+import {sharedPickerStyles} from '../shared-picker-styles'
+
+@customElement('panel-iconfont')
+export class PanelIconFont extends LitElement {
+  public icondata = {
+    id: '3736756',
+    name: '32px',
+    font_family: 'iconfont',
+    css_prefix_text: '',
+    description: '',
+    glyphs: [
+      {
+        icon_id: '32595741',
+        name: 'add',
+        font_class: 'add',
+        unicode: 'e611',
+        unicode_decimal: 58897,
+      },
+      {
+        icon_id: '32595742',
+        name: 'airplane',
+        font_class: 'airplane',
+        unicode: 'e612',
+        unicode_decimal: 58898,
+      },
+      {
+        icon_id: '32595743',
+        name: 'alarm-clock',
+        font_class: 'alarm-clock',
+        unicode: 'e613',
+        unicode_decimal: 58899,
+      },
+      {
+        icon_id: '32595744',
+        name: 'alarm',
+        font_class: 'alarm',
+        unicode: 'e614',
+        unicode_decimal: 58900,
+      },
+      {
+        icon_id: '32595745',
+        name: 'alarm-stop',
+        font_class: 'alarm-stop',
+        unicode: 'e615',
+        unicode_decimal: 58901,
+      },
+      {
+        icon_id: '32595746',
+        name: 'bluetooth',
+        font_class: 'bluetooth',
+        unicode: 'e616',
+        unicode_decimal: 58902,
+      },
+      {
+        icon_id: '32595747',
+        name: 'right',
+        font_class: 'right',
+        unicode: 'e617',
+        unicode_decimal: 58903,
+      },
+      {
+        icon_id: '32595748',
+        name: 'more',
+        font_class: 'more',
+        unicode: 'e618',
+        unicode_decimal: 58904,
+      },
+      {
+        icon_id: '32595749',
+        name: 'message',
+        font_class: 'message',
+        unicode: 'e619',
+        unicode_decimal: 58905,
+      },
+      {
+        icon_id: '32595750',
+        name: 'search',
+        font_class: 'search',
+        unicode: 'e61a',
+        unicode_decimal: 58906,
+      },
+      {
+        icon_id: '32595751',
+        name: 'close',
+        font_class: 'close',
+        unicode: 'e61b',
+        unicode_decimal: 58907,
+      },
+      {
+        icon_id: '32595752',
+        name: 'call',
+        font_class: 'call',
+        unicode: 'e61c',
+        unicode_decimal: 58908,
+      },
+      {
+        icon_id: '32595753',
+        name: 'delete',
+        font_class: 'delete',
+        unicode: 'e61d',
+        unicode_decimal: 58909,
+      },
+      {
+        icon_id: '32595754',
+        name: 'lock',
+        font_class: 'lock',
+        unicode: 'e61e',
+        unicode_decimal: 58910,
+      },
+      {
+        icon_id: '32595755',
+        name: 'signal-0',
+        font_class: 'signal-0',
+        unicode: 'e61f',
+        unicode_decimal: 58911,
+      },
+      {
+        icon_id: '32595756',
+        name: 'settings',
+        font_class: 'settings',
+        unicode: 'e620',
+        unicode_decimal: 58912,
+      },
+      {
+        icon_id: '32595757',
+        name: 'signal-roaming',
+        font_class: 'signal-roaming',
+        unicode: 'e621',
+        unicode_decimal: 58913,
+      },
+      {
+        icon_id: '32595758',
+        name: 'signal-1',
+        font_class: 'signal-1',
+        unicode: 'e622',
+        unicode_decimal: 58914,
+      },
+      {
+        icon_id: '32595759',
+        name: 'signal-3',
+        font_class: 'signal-3',
+        unicode: 'e623',
+        unicode_decimal: 58915,
+      },
+      {
+        icon_id: '32595760',
+        name: 'tick',
+        font_class: 'tick',
+        unicode: 'e624',
+        unicode_decimal: 58916,
+      },
+      {
+        icon_id: '32595761',
+        name: 'signal-4',
+        font_class: 'signal-4',
+        unicode: 'e625',
+        unicode_decimal: 58917,
+      },
+      {
+        icon_id: '32595762',
+        name: 'signal-2',
+        font_class: 'signal-2',
+        unicode: 'e626',
+        unicode_decimal: 58918,
+      },
+      {
+        icon_id: '32595763',
+        name: 'skip-forward',
+        font_class: 'skip-forward',
+        unicode: 'e627',
+        unicode_decimal: 58919,
+      },
+      {
+        icon_id: '32595764',
+        name: 'wifi-1',
+        font_class: 'wifi-1',
+        unicode: 'e628',
+        unicode_decimal: 58920,
+      },
+      {
+        icon_id: '32595765',
+        name: 'wifi-3',
+        font_class: 'wifi-3',
+        unicode: 'e629',
+        unicode_decimal: 58921,
+      },
+      {
+        icon_id: '32595766',
+        name: 'location',
+        font_class: 'location',
+        unicode: 'e62a',
+        unicode_decimal: 58922,
+      },
+      {
+        icon_id: '32595767',
+        name: 'wifi-4',
+        font_class: 'wifi-4',
+        unicode: 'e62b',
+        unicode_decimal: 58923,
+      },
+      {
+        icon_id: '32595768',
+        name: 'wifi-2',
+        font_class: 'wifi-2',
+        unicode: 'e62c',
+        unicode_decimal: 58924,
+      },
+      {
+        icon_id: '32595769',
+        name: 'wifi-permissions',
+        font_class: 'wifi-permissions',
+        unicode: 'e62d',
+        unicode_decimal: 58925,
+      },
+    ],
+  }
+
+  initIconCode() {
+    let html = ''
+    for (let i = 0; i < this.icondata.glyphs.length; i++) {
+      html +=
+        '<span class="iconfont">&#x' +
+        this.icondata.glyphs[i].unicode +
+        ';</span>'
+    }
+    let node = document.createElement('div')
+    node.className = 'p-scroll'
+    node.innerHTML = html
+    this.shadowRoot!.querySelector('.abc')!.appendChild(node)
+  }
+
+  firstUpdated() {
+    this.initIconCode()
+  }
+
+  render() {
+    return html`
+      <div class="abc"></div>
+    `
+  }
+
+  public static override get styles(): CSSResultArray {
+    return [sharedPickerStyles]
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'panel-iconfont': PanelIconFont
+  }
+}
diff --git a/src/test/panels/iconfont/iconfont/iconfont.css b/src/test/panels/iconfont/iconfont/iconfont.css
new file mode 100644
index 0000000..0c20bee
--- /dev/null
+++ b/src/test/panels/iconfont/iconfont/iconfont.css
@@ -0,0 +1,131 @@
+@font-face {
+  font-family: "iconfont"; /* Project id 3736756 */
+  /* Color fonts */
+  src: 
+       url('iconfont.ttf?t=1667368773903') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.add:before {
+  content: "\e611";
+}
+
+.airplane:before {
+  content: "\e612";
+}
+
+.alarm-clock:before {
+  content: "\e613";
+}
+
+.alarm:before {
+  content: "\e614";
+}
+
+.alarm-stop:before {
+  content: "\e615";
+}
+
+.bluetooth:before {
+  content: "\e616";
+}
+
+.right:before {
+  content: "\e617";
+}
+
+.more:before {
+  content: "\e618";
+}
+
+.message:before {
+  content: "\e619";
+}
+
+.search:before {
+  content: "\e61a";
+}
+
+.close:before {
+  content: "\e61b";
+}
+
+.call:before {
+  content: "\e61c";
+}
+
+.delete:before {
+  content: "\e61d";
+}
+
+.lock:before {
+  content: "\e61e";
+}
+
+.signal-0:before {
+  content: "\e61f";
+}
+
+.settings:before {
+  content: "\e620";
+}
+
+.signal-roaming:before {
+  content: "\e621";
+}
+
+.signal-1:before {
+  content: "\e622";
+}
+
+.signal-3:before {
+  content: "\e623";
+}
+
+.tick:before {
+  content: "\e624";
+}
+
+.signal-4:before {
+  content: "\e625";
+}
+
+.signal-2:before {
+  content: "\e626";
+}
+
+.skip-forward:before {
+  content: "\e627";
+}
+
+.wifi-1:before {
+  content: "\e628";
+}
+
+.wifi-3:before {
+  content: "\e629";
+}
+
+.location:before {
+  content: "\e62a";
+}
+
+.wifi-4:before {
+  content: "\e62b";
+}
+
+.wifi-2:before {
+  content: "\e62c";
+}
+
+.wifi-permissions:before {
+  content: "\e62d";
+}
+
diff --git a/src/test/panels/iconfont/iconfont/iconfont.js b/src/test/panels/iconfont/iconfont/iconfont.js
new file mode 100644
index 0000000..d3515c6
--- /dev/null
+++ b/src/test/panels/iconfont/iconfont/iconfont.js
@@ -0,0 +1 @@
+window._iconfont_svg_string_3736756='<svg><symbol id="add" viewBox="0 0 1024 1024"><path d="M480 544v288h64v-288h288v-64h-288V192h-64v288H192v64h288z" fill="#333333" ></path></symbol><symbol id="airplane" viewBox="0 0 1024 1024"><path d="M320 704l96 128 32-32-32-128 143.168-137.376L704 800l32-32-64-352 141.344-135.36c22.208-22.176 25.792-52.576 4.192-74.176s-51.968-18.016-74.176 4.16L608 352 256 288l-32 32 265.376 144.832L352 608l-128-32-32 32 128 96z" fill="#333333" opacity=".95" ></path></symbol><symbol id="alarm-clock" viewBox="0 0 1024 1024"><path d="M480 340.416v224.928L656 672l32-48-144-88.384v-195.2h-64z" fill="#333333" ></path><path d="M256 544c0 142.464 113.536 256 256 256s256-113.536 256-256-113.536-256-256-256-256 113.536-256 256z m256 320c-177.824 0-320-142.176-320-320S334.176 224 512 224s320 142.176 320 320-142.176 320-320 320zM843.52 344.576l-192-160 40.96-49.152 192 160-40.96 49.152zM180.48 344.576l192-160-40.96-49.152-192 160 40.96 49.152z" fill="#333333" ></path></symbol><symbol id="alarm" viewBox="0 0 1024 1024"><path d="M512 128a32 32 0 0 0-32 32v32a192 192 0 0 0-192 192v183.872c0 15.744-4.672 31.104-13.376 44.224l-29.376 44.032C222.496 690.24 246.976 736 288 736h448c41.024 0 65.504-45.76 42.752-79.872l-29.376-44.064A79.68 79.68 0 0 1 736 567.904V384a192 192 0 0 0-192-192V160a32 32 0 0 0-32-32z m-32 128h64a128 128 0 0 1 128 128v183.872c0 28.352 8.384 56.096 24.128 79.68l16.288 24.448H311.584l16.288-24.416A143.712 143.712 0 0 0 352 567.872V384a128 128 0 0 1 128-128z" fill="#333333" ></path><path d="M416 768a96 96 0 1 0 192 0h-192z" fill="#333333" ></path></symbol><symbol id="alarm-stop" viewBox="0 0 1024 1024"><path d="M512 128a32 32 0 0 0-32 32v32a192 192 0 0 0-192 192v183.872c0 15.744-4.672 31.104-13.376 44.224l-29.376 44.032C222.496 690.24 246.976 736 288 736h448c41.024 0 65.504-45.76 42.752-79.872l-29.376-44.064A79.68 79.68 0 0 1 736 567.904V384a192 192 0 0 0-192-192V160a32 32 0 0 0-32-32z m-32 128h64a128 128 0 0 1 128 128v183.872c0 28.352 8.384 56.096 24.128 79.68l16.288 24.448H311.584l16.288-24.416A143.712 143.712 0 0 0 352 567.872V384a128 128 0 0 1 128-128z" fill="#333333" ></path><path d="M739.2 198.4a32 32 0 0 1 6.4 44.8l-432 576a32 32 0 0 1-51.2-38.4l432-576a32 32 0 0 1 44.8-6.4z" fill="#333333" ></path><path d="M416 768a96 96 0 1 0 192 0h-192z" fill="#333333" ></path></symbol><symbol id="bluetooth" viewBox="0 0 1024 1024"><path d="M793.92 386.432a32.256 32.256 0 0 1-7.616 7.36l-254.56 176.32a33.376 33.376 0 0 1-45.664-7.392 31.04 31.04 0 0 1-6.08-18.432V191.68c0-17.504 14.656-31.712 32.736-31.712 6.816 0 13.44 2.08 19.008 5.92l254.56 176.256c14.72 10.208 18.112 30.016 7.584 44.256zM720 368L544 256v224l176-112z" fill="#333333" ></path><path d="M793.92 706.432a32.256 32.256 0 0 1-7.616 7.36l-254.56 176.32a33.376 33.376 0 0 1-45.664-7.392 31.04 31.04 0 0 1-6.08-18.432V511.68c0-17.504 14.656-31.712 32.736-31.712 6.816 0 13.44 2.08 19.008 5.92l254.56 176.256c14.72 10.208 18.112 30.016 7.584 44.256zM720 688L544 576v224l176-112z" fill="#333333" ></path><path d="M229.12 334.624a32 32 0 0 1 44.256-9.504l313.536 202.88-313.536 202.88a32 32 0 1 1-34.752-53.76l230.464-149.12-230.464-149.12a32 32 0 0 1-9.504-44.256z" fill="#333333" ></path></symbol><symbol id="right" viewBox="0 0 1024 1024"><path d="M693.952 508.8l-313.376-313.376 45.28-45.28 336 336a32 32 0 0 1 0 45.28l-336 336-45.28-45.28 313.376-313.376z" fill="#333333" ></path></symbol><symbol id="more" viewBox="0 0 1024 1024"><path d="M176 448c-26.4 0-48 21.6-48 48S149.6 544 176 544 224 522.4 224 496 202.4 448 176 448z m320 0c-26.4 0-48 21.6-48 48s21.6 48 48 48 48-21.6 48-48-21.6-48-48-48z m272 48c0-26.4 21.6-48 48-48s48 21.6 48 48-21.6 48-48 48-48-21.6-48-48z" fill="#333333" ></path></symbol><symbol id="message" viewBox="0 0 1024 1024"><path d="M212.352 160A116.352 116.352 0 0 0 96 276.352v279.296A116.352 116.352 0 0 0 212.352 672H256v192c91.584-98.976 231.488-158.976 349.216-192h174.4A116.352 116.352 0 0 0 896 555.648V276.352A116.352 116.352 0 0 0 779.648 160H212.352z" fill="#4D4D4D" ></path></symbol><symbol id="search" viewBox="0 0 1024 1024"><path d="M0 0h1024v1024H0V0z" fill="#D8D8D8" opacity=".01" ></path><path d="M832 512c0-176.8-143.2-320-320-320S192 335.2 192 512s143.2 320 320 320 320-143.2 320-320zM512 128c212.16 0 384 171.84 384 384s-171.84 384-384 384S128 724.16 128 512 299.84 128 512 128z" fill="#333333" ></path><path d="M745.376 745.376a32 32 0 0 1 45.248 0l128 128a32 32 0 0 1-45.248 45.248l-128-128a32 32 0 0 1 0-45.248z" fill="#333333" ></path></symbol><symbol id="close" viewBox="0 0 1024 1024"><path d="M201.376 201.376a32 32 0 0 1 45.248 0L512 466.752l265.376-265.376a32 32 0 1 1 45.248 45.248L557.248 512l265.376 265.376a32 32 0 0 1-45.248 45.248L512 557.248l-265.376 265.376a32 32 0 0 1-45.248-45.248L466.752 512 201.376 246.624a32 32 0 0 1 0-45.248z" fill="#333333" ></path></symbol><symbol id="call" viewBox="0 0 1024 1024"><path d="M686.72 863.712c133.632 0 165.088-95.168 171.616-117.44 12.704-43.328 2.816-50.016-17.408-59.872l-132.992-77.12c-11.712-6.88-36.8-7.36-47.36 2.496a252.8 252.8 0 0 0-28.576 32.448c-8.704 11.552-17.92 22.4-27.776 32.32-9.696 9.856-17.888 16.192-23.904 14.88-21.44-4.864-88.992-32.48-167.616-111.104-82.112-82.304-112.064-149.888-111.04-167.456 0.32-6.176 4.8-14.208 14.848-23.936a306.88 306.88 0 0 1 32.32-27.584c11.68-8.704 27.072-23.776 32.256-28.8 11.52-11.36 5.536-50.176-1.504-61.728L307.2 152.224c-18.08-32.128-37.312-25.92-60.576-17.248-23.232 8.704-68.416 35.296-91.136 74.624-11.712 20.416-22.4 56.704-26.432 95.68 0 0.672-0.192 1.344-0.192 2.176-0.832 29.44-20.736 159.776 191.872 364.704 214.624 207.296 356.64 191.552 365.984 191.552z" fill="#4D4D4D" ></path></symbol><symbol id="delete" viewBox="0 0 1024 1024"><path d="M832 288v480a160 160 0 0 1-160 160H352a160 160 0 0 1-160-160V288h640z m-64 64H256v416a96 96 0 0 0 90.368 95.84L352 864h320a96 96 0 0 0 95.84-90.368L768 768V352z" fill="#333333" ></path><path d="M672 128a96 96 0 0 1 96 96v128H256V224a96 96 0 0 1 96-96h320z m0 64H352a32 32 0 0 0-31.776 28.256L320 224v64h384V224a32 32 0 0 0-28.256-31.776L672 192z" fill="#333333" ></path><path d="M96 288h832v64H96zM384 448h64v320h-64zM576 448h64v320h-64z" fill="#333333" ></path></symbol><symbol id="lock" viewBox="0 0 1024 1024"><path d="M512 640m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" fill="#333333" ></path><path d="M768 352a128 128 0 0 1 128 128v320a128 128 0 0 1-128 128H256a128 128 0 0 1-128-128V480a128 128 0 0 1 128-128h512z m0 64H256a64 64 0 0 0-63.84 59.2L192 480v320a64 64 0 0 0 59.2 63.84L256 864h512a64 64 0 0 0 63.84-59.2L832 800V480a64 64 0 0 0-59.2-63.84L768 416z" fill="#333333" ></path><path d="M512 96a224 224 0 0 1 224 224v96H288V320a224 224 0 0 1 224-224z m0 64a160 160 0 0 0-159.84 153.056L352 320v32h320V320a160 160 0 0 0-153.056-159.84L512 160z" fill="#333333" ></path></symbol><symbol id="signal-0" viewBox="0 0 1024 1024"><path d="M736 224m32 0l32 0q32 0 32 32l0 512q0 32-32 32l-32 0q-32 0-32-32l0-512q0-32 32-32Z" fill="#333333" opacity=".4" ></path><path d="M544 384m32 0l32 0q32 0 32 32l0 352q0 32-32 32l-32 0q-32 0-32-32l0-352q0-32 32-32Z" fill="#333333" opacity=".4" ></path><path d="M352 480m32 0l32 0q32 0 32 32l0 256q0 32-32 32l-32 0q-32 0-32-32l0-256q0-32 32-32Z" fill="#333333" opacity=".4" ></path><path d="M160 608m32 0l32 0q32 0 32 32l0 128q0 32-32 32l-32 0q-32 0-32-32l0-128q0-32 32-32Z" fill="#333333" opacity=".4" ></path></symbol><symbol id="settings" viewBox="0 0 1024 1024"><path d="M437.664 83.52A150.624 150.624 0 0 1 512 64c25.44 0 51.392 6.4 74.336 19.52l0.096 0.064 287.488 162.112c32.96 18.56 54.08 52.96 54.08 90.944v350.72c0 37.984-21.12 72.416-54.08 90.944l-287.488 162.112-0.096 0.064c-22.944 13.12-48.896 19.52-74.336 19.52-25.44 0-51.392-6.4-74.336-19.52l-0.096-0.064-287.488-162.112C117.12 759.744 96 725.344 96 687.36V336.64c0-37.984 21.088-72.384 54.08-90.912l287.552-162.208zM512 128c-14.848 0-29.824 3.808-42.688 11.136l-0.16 0.096-287.712 162.24A40.64 40.64 0 0 0 160 336.64v350.72c0 13.856 7.68 27.424 21.44 35.136l0.032 0.032 287.84 162.336c12.864 7.36 27.84 11.136 42.688 11.136 14.848 0 29.824-3.808 42.688-11.136l0.16-0.096 287.712-162.24c13.76-7.744 21.44-21.312 21.44-35.168V336.64c0-13.856-7.68-27.424-21.44-35.136l-287.872-162.368A86.624 86.624 0 0 0 512 128z" fill="#333333" ></path><path d="M352 512c0-88.384 71.616-160 160-160s160 71.616 160 160-71.616 160-160 160-160-71.616-160-160z m160-96c-53.056 0-96 42.944-96 96s42.944 96 96 96 96-42.944 96-96-42.944-96-96-96z" fill="#333333" ></path></symbol><symbol id="signal-roaming" viewBox="0 0 1024 1024"><path d="M506.528 297.152a6.4 6.4 0 0 1 10.944 0l84.704 141.152a6.4 6.4 0 0 1-5.472 9.696H427.296a6.4 6.4 0 0 1-5.472-9.696l84.704-141.152z" fill="#333333" ></path><path d="M506.528 726.848a6.4 6.4 0 0 0 10.944 0l84.704-141.152A6.4 6.4 0 0 0 596.704 576H427.296a6.4 6.4 0 0 0-5.472 9.696l84.704 141.152z" fill="#333333" opacity=".4" ></path></symbol><symbol id="signal-1" viewBox="0 0 1024 1024"><path d="M736 224m32 0l32 0q32 0 32 32l0 512q0 32-32 32l-32 0q-32 0-32-32l0-512q0-32 32-32Z" fill="#333333" opacity=".4" ></path><path d="M544 384m32 0l32 0q32 0 32 32l0 352q0 32-32 32l-32 0q-32 0-32-32l0-352q0-32 32-32Z" fill="#333333" opacity=".4" ></path><path d="M352 480m32 0l32 0q32 0 32 32l0 256q0 32-32 32l-32 0q-32 0-32-32l0-256q0-32 32-32Z" fill="#333333" opacity=".4" ></path><path d="M160 608m32 0l32 0q32 0 32 32l0 128q0 32-32 32l-32 0q-32 0-32-32l0-128q0-32 32-32Z" fill="#333333" ></path></symbol><symbol id="signal-3" viewBox="0 0 1024 1024"><path d="M736 224m32 0l32 0q32 0 32 32l0 512q0 32-32 32l-32 0q-32 0-32-32l0-512q0-32 32-32Z" fill="#333333" opacity=".4" ></path><path d="M544 384m32 0l32 0q32 0 32 32l0 352q0 32-32 32l-32 0q-32 0-32-32l0-352q0-32 32-32Z" fill="#333333" ></path><path d="M352 480m32 0l32 0q32 0 32 32l0 256q0 32-32 32l-32 0q-32 0-32-32l0-256q0-32 32-32Z" fill="#333333" ></path><path d="M160 608m32 0l32 0q32 0 32 32l0 128q0 32-32 32l-32 0q-32 0-32-32l0-128q0-32 32-32Z" fill="#333333" ></path></symbol><symbol id="tick" viewBox="0 0 1024 1024"><path d="M917.632 200.416a32 32 0 0 1 1.92 45.216l-499.296 544a32 32 0 0 1-45.248 1.92l-268.672-247.264a32 32 0 1 1 43.328-47.104l245.12 225.6L872.416 202.336a32 32 0 0 1 45.216-1.92z" fill="#333333" ></path></symbol><symbol id="signal-4" viewBox="0 0 1024 1024"><path d="M736 224m32 0l32 0q32 0 32 32l0 512q0 32-32 32l-32 0q-32 0-32-32l0-512q0-32 32-32Z" fill="#333333" ></path><path d="M544 384m32 0l32 0q32 0 32 32l0 352q0 32-32 32l-32 0q-32 0-32-32l0-352q0-32 32-32Z" fill="#333333" ></path><path d="M352 480m32 0l32 0q32 0 32 32l0 256q0 32-32 32l-32 0q-32 0-32-32l0-256q0-32 32-32Z" fill="#333333" ></path><path d="M160 608m32 0l32 0q32 0 32 32l0 128q0 32-32 32l-32 0q-32 0-32-32l0-128q0-32 32-32Z" fill="#333333" ></path></symbol><symbol id="signal-2" viewBox="0 0 1024 1024"><path d="M736 224m32 0l32 0q32 0 32 32l0 512q0 32-32 32l-32 0q-32 0-32-32l0-512q0-32 32-32Z" fill="#333333" opacity=".4" ></path><path d="M544 384m32 0l32 0q32 0 32 32l0 352q0 32-32 32l-32 0q-32 0-32-32l0-352q0-32 32-32Z" fill="#333333" opacity=".4" ></path><path d="M352 480m32 0l32 0q32 0 32 32l0 256q0 32-32 32l-32 0q-32 0-32-32l0-256q0-32 32-32Z" fill="#333333" ></path><path d="M160 608m32 0l32 0q32 0 32 32l0 128q0 32-32 32l-32 0q-32 0-32-32l0-128q0-32 32-32Z" fill="#333333" ></path></symbol><symbol id="skip-forward" viewBox="0 0 1024 1024"><path d="M160 260.16c0-35.84 30.4-64.96 67.84-64.96 13.44 0 26.56 3.84 37.76 10.88l398.72 254.08c2.24 1.28 4.16 2.88 6.08 4.48V248C670.4 199.36 709.76 160 758.4 160h17.6C824.64 160 864 199.36 864 248v528c0 48.64-39.36 88-88 88h-17.6c-48.64 0-88-39.36-88-88v-236.16a22.72 22.72 0 0 1-4.48 3.2L267.52 816.64c-30.4 20.8-72.96 14.08-94.72-14.72-8.32-11.2-12.8-24.32-12.8-38.08V260.16z" fill="#000000" ></path></symbol><symbol id="wifi-1" viewBox="0 0 1024 1024"><path d="M852.832 430.048A478.496 478.496 0 0 0 512 288a478.528 478.528 0 0 0-340.864 142.048l-66.592-69.184A574.208 574.208 0 0 1 512 192c159.136 0 303.2 64.544 407.456 168.864L852.8 430.08z" fill="#333333" opacity=".4" ></path><path d="M289.6 553.024A287.424 287.424 0 0 1 512 448c89.6 0 169.6 40.896 222.4 105.024l66.944-69.504A383.104 383.104 0 0 0 512 352a383.104 383.104 0 0 0-289.344 131.52l66.912 69.504z" fill="#333333" opacity=".4" ></path><path d="M402.304 670.08A127.936 127.936 0 0 1 512 608c46.592 0 87.36 24.864 109.76 62.08l67.904-70.56A223.648 223.648 0 0 0 512 512a223.648 223.648 0 0 0-177.6 87.52l67.904 70.528z" fill="#333333" opacity=".4" ></path><path d="M437.888 707.008L512 784l74.144-76.992A95.808 95.808 0 0 0 512 672c-29.856 0-56.512 13.632-74.112 35.008z" fill="#000000" ></path></symbol><symbol id="wifi-3" viewBox="0 0 1024 1024"><path d="M852.832 430.048A478.496 478.496 0 0 0 512 288a478.528 478.528 0 0 0-340.864 142.048l-66.592-69.184A574.208 574.208 0 0 1 512 192c159.136 0 303.2 64.544 407.456 168.864L852.8 430.08z" fill="#333333" opacity=".4" ></path><path d="M289.6 553.024A287.424 287.424 0 0 1 512 448c89.6 0 169.6 40.896 222.4 105.024l66.944-69.504A383.104 383.104 0 0 0 512 352a383.104 383.104 0 0 0-289.344 131.52l66.912 69.504z" fill="#333333" ></path><path d="M402.304 670.08A127.936 127.936 0 0 1 512 608c46.592 0 87.36 24.864 109.76 62.08l67.904-70.56A223.648 223.648 0 0 0 512 512a223.648 223.648 0 0 0-177.6 87.52l67.904 70.528z" fill="#333333" ></path><path d="M437.888 707.008L512 784l74.144-76.992A95.808 95.808 0 0 0 512 672c-29.856 0-56.512 13.632-74.112 35.008z" fill="#000000" ></path></symbol><symbol id="location" viewBox="0 0 1024 1024"><path d="M192.064 761.056a17.024 17.024 0 0 1 3.872-5.44c4.768-5.024 13.312-11.296 26.816-17.984 26.944-13.376 67.552-25.44 118.592-34.08l-10.688-63.104c-54.176 9.184-101.568 22.624-136.32 39.84-17.344 8.576-33.056 18.88-44.864 31.36-11.968 12.608-21.472 29.312-21.472 49.472 0 30.08 20.672 52 41.472 66.368 21.76 15.04 51.2 27.328 84.64 37.12 67.36 19.68 158.528 31.392 257.888 31.392 99.36 0 190.528-11.712 257.888-31.424 33.472-9.76 62.88-22.048 84.64-37.088 20.8-14.368 41.472-36.256 41.472-66.368 0-20.16-9.504-36.864-21.44-49.472-11.84-12.48-27.552-22.784-44.896-31.36-34.752-17.216-82.144-30.688-136.32-39.84l-10.688 63.104c51.04 8.64 91.648 20.704 118.592 34.08 13.504 6.72 22.048 12.96 26.816 17.984a17.024 17.024 0 0 1 3.872 5.44c-0.384 1.152-2.56 6.016-13.76 13.76-13.888 9.6-36.032 19.52-66.24 28.352C691.84 820.704 607.04 832 512 832c-95.04 0-179.872-11.296-239.936-28.832-30.208-8.832-52.352-18.752-66.24-28.32-11.2-7.776-13.376-12.64-13.76-13.76z m-0.096 0.384v-0.128 0.128z m640.064 0v-0.128 0.128z" fill="#333333" ></path><path d="M704 392.16C704 279.68 616.192 192 512 192s-192 87.68-192 200.16c0 36.288 13.504 77.92 48.96 130.112 31.648 46.56 78.688 98.496 143.04 158.944 64.352-60.448 111.392-112.384 143.04-158.944C690.496 470.08 704 428.448 704 392.16zM494.976 752.64C336.416 608.32 256 498.72 256 392.16 256 246.24 370.592 128 512 128c141.408 0 256 118.24 256 264.16 0 106.56-80.416 216.16-238.976 360.48L512 768l-17.024-15.36z" fill="#333333" ></path><path d="M576 384a64 64 0 1 0-128.032 0.032A64 64 0 0 0 576 384z" fill="#333333" ></path></symbol><symbol id="wifi-4" viewBox="0 0 1024 1024"><path d="M852.832 430.048A478.496 478.496 0 0 0 512 288a478.528 478.528 0 0 0-340.864 142.048l-66.592-69.184A574.208 574.208 0 0 1 512 192c159.136 0 303.2 64.544 407.456 168.864L852.8 430.08z" fill="#333333" ></path><path d="M289.6 553.024A287.424 287.424 0 0 1 512 448c89.6 0 169.6 40.896 222.4 105.024l66.944-69.504A383.104 383.104 0 0 0 512 352a383.104 383.104 0 0 0-289.344 131.52l66.912 69.504z" fill="#333333" ></path><path d="M402.304 670.08A127.936 127.936 0 0 1 512 608c46.592 0 87.36 24.864 109.76 62.08l67.904-70.56A223.648 223.648 0 0 0 512 512a223.648 223.648 0 0 0-177.6 87.52l67.904 70.528z" fill="#333333" ></path><path d="M437.888 707.008L512 784l74.144-76.992A95.808 95.808 0 0 0 512 672c-29.856 0-56.512 13.632-74.112 35.008z" fill="#000000" ></path></symbol><symbol id="wifi-2" viewBox="0 0 1024 1024"><path d="M852.832 430.048A478.496 478.496 0 0 0 512 288a478.528 478.528 0 0 0-340.864 142.048l-66.592-69.184A574.208 574.208 0 0 1 512 192c159.136 0 303.2 64.544 407.456 168.864L852.8 430.08z" fill="#333333" opacity=".4" ></path><path d="M289.6 553.024A287.424 287.424 0 0 1 512 448c89.6 0 169.6 40.896 222.4 105.024l66.944-69.504A383.104 383.104 0 0 0 512 352a383.104 383.104 0 0 0-289.344 131.52l66.912 69.504z" fill="#333333" opacity=".4" ></path><path d="M402.304 670.08A127.936 127.936 0 0 1 512 608c46.592 0 87.36 24.864 109.76 62.08l67.904-70.56A223.648 223.648 0 0 0 512 512a223.648 223.648 0 0 0-177.6 87.52l67.904 70.528z" fill="#333333" ></path><path d="M437.888 707.008L512 784l74.144-76.992A95.808 95.808 0 0 0 512 672c-29.856 0-56.512 13.632-74.112 35.008z" fill="#000000" ></path></symbol><symbol id="wifi-permissions" viewBox="0 0 1024 1024"><path d="M836.48 527.808a43.712 43.712 0 1 1 87.04 0l-17.28 184.32a26.368 26.368 0 0 1-52.48 0l-17.28-184.32z" fill="#333333" ></path><path d="M880 800m-32 0a32 32 0 1 0 64 0 32 32 0 1 0-64 0Z" fill="#333333" ></path><path d="M852.832 430.048A478.496 478.496 0 0 0 512 288a478.528 478.528 0 0 0-340.864 142.048l-66.592-69.184A574.208 574.208 0 0 1 512 192c159.136 0 303.2 64.544 407.456 168.864L852.8 430.08z" fill="#333333" ></path><path d="M289.6 553.024A287.424 287.424 0 0 1 512 448c89.6 0 169.6 40.896 222.4 105.024l66.944-69.504A383.104 383.104 0 0 0 512 352a383.104 383.104 0 0 0-289.344 131.52l66.912 69.504z" fill="#333333" ></path><path d="M402.304 670.08A127.936 127.936 0 0 1 512 608c46.592 0 87.36 24.864 109.76 62.08l67.904-70.56A223.648 223.648 0 0 0 512 512a223.648 223.648 0 0 0-177.6 87.52l67.904 70.528z" fill="#333333" ></path><path d="M437.888 707.008L512 784l74.144-76.992A95.808 95.808 0 0 0 512 672c-29.856 0-56.512 13.632-74.112 35.008z" fill="#000000" ></path></symbol></svg>',function(t){var l=(l=document.getElementsByTagName("script"))[l.length-1],a=l.getAttribute("data-injectcss"),l=l.getAttribute("data-disable-injectsvg");if(!l){var i,h,p,o,d,e=function(l,a){a.parentNode.insertBefore(l,a)};if(a&&!t.__iconfont__svg__cssinject__){t.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(l){console&&console.log(l)}}i=function(){var l,a=document.createElement("div");a.innerHTML=t._iconfont_svg_string_3736756,(a=a.getElementsByTagName("svg")[0])&&(a.setAttribute("aria-hidden","true"),a.style.position="absolute",a.style.width=0,a.style.height=0,a.style.overflow="hidden",a=a,(l=document.body).firstChild?e(a,l.firstChild):l.appendChild(a))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(i,0):(h=function(){document.removeEventListener("DOMContentLoaded",h,!1),i()},document.addEventListener("DOMContentLoaded",h,!1)):document.attachEvent&&(p=i,o=t.document,d=!1,s(),o.onreadystatechange=function(){"complete"==o.readyState&&(o.onreadystatechange=null,c())})}function c(){d||(d=!0,p())}function s(){try{o.documentElement.doScroll("left")}catch(l){return void setTimeout(s,50)}c()}}(window);
\ No newline at end of file
diff --git a/src/test/panels/iconfont/iconfont/iconfont.json b/src/test/panels/iconfont/iconfont/iconfont.json
new file mode 100644
index 0000000..a03922c
--- /dev/null
+++ b/src/test/panels/iconfont/iconfont/iconfont.json
@@ -0,0 +1,212 @@
+{
+  "id": "3736756",
+  "name": "32px",
+  "font_family": "iconfont",
+  "css_prefix_text": "",
+  "description": "",
+  "glyphs": [
+    {
+      "icon_id": "32595741",
+      "name": "add",
+      "font_class": "add",
+      "unicode": "e611",
+      "unicode_decimal": 58897
+    },
+    {
+      "icon_id": "32595742",
+      "name": "airplane",
+      "font_class": "airplane",
+      "unicode": "e612",
+      "unicode_decimal": 58898
+    },
+    {
+      "icon_id": "32595743",
+      "name": "alarm-clock",
+      "font_class": "alarm-clock",
+      "unicode": "e613",
+      "unicode_decimal": 58899
+    },
+    {
+      "icon_id": "32595744",
+      "name": "alarm",
+      "font_class": "alarm",
+      "unicode": "e614",
+      "unicode_decimal": 58900
+    },
+    {
+      "icon_id": "32595745",
+      "name": "alarm-stop",
+      "font_class": "alarm-stop",
+      "unicode": "e615",
+      "unicode_decimal": 58901
+    },
+    {
+      "icon_id": "32595746",
+      "name": "bluetooth",
+      "font_class": "bluetooth",
+      "unicode": "e616",
+      "unicode_decimal": 58902
+    },
+    {
+      "icon_id": "32595747",
+      "name": "right",
+      "font_class": "right",
+      "unicode": "e617",
+      "unicode_decimal": 58903
+    },
+    {
+      "icon_id": "32595748",
+      "name": "more",
+      "font_class": "more",
+      "unicode": "e618",
+      "unicode_decimal": 58904
+    },
+    {
+      "icon_id": "32595749",
+      "name": "message",
+      "font_class": "message",
+      "unicode": "e619",
+      "unicode_decimal": 58905
+    },
+    {
+      "icon_id": "32595750",
+      "name": "search",
+      "font_class": "search",
+      "unicode": "e61a",
+      "unicode_decimal": 58906
+    },
+    {
+      "icon_id": "32595751",
+      "name": "close",
+      "font_class": "close",
+      "unicode": "e61b",
+      "unicode_decimal": 58907
+    },
+    {
+      "icon_id": "32595752",
+      "name": "call",
+      "font_class": "call",
+      "unicode": "e61c",
+      "unicode_decimal": 58908
+    },
+    {
+      "icon_id": "32595753",
+      "name": "delete",
+      "font_class": "delete",
+      "unicode": "e61d",
+      "unicode_decimal": 58909
+    },
+    {
+      "icon_id": "32595754",
+      "name": "lock",
+      "font_class": "lock",
+      "unicode": "e61e",
+      "unicode_decimal": 58910
+    },
+    {
+      "icon_id": "32595755",
+      "name": "signal-0",
+      "font_class": "signal-0",
+      "unicode": "e61f",
+      "unicode_decimal": 58911
+    },
+    {
+      "icon_id": "32595756",
+      "name": "settings",
+      "font_class": "settings",
+      "unicode": "e620",
+      "unicode_decimal": 58912
+    },
+    {
+      "icon_id": "32595757",
+      "name": "signal-roaming",
+      "font_class": "signal-roaming",
+      "unicode": "e621",
+      "unicode_decimal": 58913
+    },
+    {
+      "icon_id": "32595758",
+      "name": "signal-1",
+      "font_class": "signal-1",
+      "unicode": "e622",
+      "unicode_decimal": 58914
+    },
+    {
+      "icon_id": "32595759",
+      "name": "signal-3",
+      "font_class": "signal-3",
+      "unicode": "e623",
+      "unicode_decimal": 58915
+    },
+    {
+      "icon_id": "32595760",
+      "name": "tick",
+      "font_class": "tick",
+      "unicode": "e624",
+      "unicode_decimal": 58916
+    },
+    {
+      "icon_id": "32595761",
+      "name": "signal-4",
+      "font_class": "signal-4",
+      "unicode": "e625",
+      "unicode_decimal": 58917
+    },
+    {
+      "icon_id": "32595762",
+      "name": "signal-2",
+      "font_class": "signal-2",
+      "unicode": "e626",
+      "unicode_decimal": 58918
+    },
+    {
+      "icon_id": "32595763",
+      "name": "skip-forward",
+      "font_class": "skip-forward",
+      "unicode": "e627",
+      "unicode_decimal": 58919
+    },
+    {
+      "icon_id": "32595764",
+      "name": "wifi-1",
+      "font_class": "wifi-1",
+      "unicode": "e628",
+      "unicode_decimal": 58920
+    },
+    {
+      "icon_id": "32595765",
+      "name": "wifi-3",
+      "font_class": "wifi-3",
+      "unicode": "e629",
+      "unicode_decimal": 58921
+    },
+    {
+      "icon_id": "32595766",
+      "name": "location",
+      "font_class": "location",
+      "unicode": "e62a",
+      "unicode_decimal": 58922
+    },
+    {
+      "icon_id": "32595767",
+      "name": "wifi-4",
+      "font_class": "wifi-4",
+      "unicode": "e62b",
+      "unicode_decimal": 58923
+    },
+    {
+      "icon_id": "32595768",
+      "name": "wifi-2",
+      "font_class": "wifi-2",
+      "unicode": "e62c",
+      "unicode_decimal": 58924
+    },
+    {
+      "icon_id": "32595769",
+      "name": "wifi-permissions",
+      "font_class": "wifi-permissions",
+      "unicode": "e62d",
+      "unicode_decimal": 58925
+    }
+  ]
+}
diff --git a/src/test/panels/iconfont/iconfont/iconfont.ttf b/src/test/panels/iconfont/iconfont/iconfont.ttf
new file mode 100644
index 0000000..6cdfd58
Binary files /dev/null and b/src/test/panels/iconfont/iconfont/iconfont.ttf differ