matcha-components 1.0.6 → 1.0.8

package/src/lib/matcha-icon/icon.stories.ts

@@ -0,0 +1,423 @@
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+
+import { MatchaIconModule } from './icon.module';
+
+import { iconArgtypes } from './icon-argtype';
+import { MatInputModule } from '@angular/material/input';
+import { MatFormFieldModule } from '@angular/material/form-field';
+
+export default {
+    title: 'Atoms / Icon',
+    decorators: [
+        moduleMetadata({
+            imports: [MatchaIconModule, MatInputModule, MatFormFieldModule],
+            declarations: [],
+        }),
+    ],
+    args: {
+        color: 'accent',
+        size: 'md',
+        name: 'home',
+        loading: false,
+    },
+    argTypes: iconArgtypes,
+    parameters: {
+        docs: {
+            source: { type: 'code' },
+        },
+        controls: {
+            expanded: true,
+            exclude: ['mode'],
+        },
+        componentSubtitle: 'Displays an image that represents a user or organization',
+    },
+} as Meta;
+
+/** Este é o icon principal */
+export const IconOverview: StoryObj = {
+    render: (args) => ({
+        props: {
+            ...args,
+        },
+        template: `
+            <matcha-icon [name]="name" [color]="color" [size]="size"></matcha-icon>
+        `,
+    }),
+    name: 'Icon Overview',
+};
+
+/** Este é o icon principal */
+export const IconList: StoryObj = {
+    render: (args) => ({
+        props: {
+            ...args,
+        },
+        template: `
+
+        <mat-form-field appearance="outline" color="accent">
+            <mat-label>Value</mat-label>
+            <input
+            matInput
+            type="text"
+            id="iconSearch"
+            placeholder="Pesquisar ícones..."
+            onKeyUp="filterIcons()"/>
+        </mat-form-field>
+        <div class="bb-2 border-color-disabled mb-16"></div>
+        <div class="grid-sm-12 gap-8">
+            <div class="background-surface border-radius-8 icon text-center" data-name="app"><matcha-icon name="app" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">app</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="site"><matcha-icon name="site" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">site</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="home"><matcha-icon name="home" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">home</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="home-out"><matcha-icon name="home-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">home-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="content"><matcha-icon name="content" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">content</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="content-out"><matcha-icon name="content-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">content-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="events"><matcha-icon name="events" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">events</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="events-out"><matcha-icon name="events-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">events-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="favorite"><matcha-icon name="favorite" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">favorite</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="favorite-out"><matcha-icon name="favorite-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">favorite-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="tv"><matcha-icon name="tv" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">tv</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="tv-out"><matcha-icon name="tv-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">tv-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="bible"><matcha-icon name="bible" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">bible</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="bible-out"><matcha-icon name="bible-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">bible-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="reading-plan"><matcha-icon name="reading-plan" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">reading-plan</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="reading-plan-out"><matcha-icon name="reading-plan-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">reading-plan-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="agenda"><matcha-icon name="agenda" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">agenda</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="agenda-out"><matcha-icon name="agenda-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">agenda-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="church"><matcha-icon name="church" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">church</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="church-out"><matcha-icon name="church-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">church-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="download"><matcha-icon name="download" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">download</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="downloads-out"><matcha-icon name="downloads-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">downloads-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="groups"><matcha-icon name="groups" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">groups</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="groups-out"><matcha-icon name="groups-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">groups-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="live"><matcha-icon name="live" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">live</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="live-out"><matcha-icon name="live-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">live-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="star"><matcha-icon name="star" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">star</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="star-out"><matcha-icon name="star-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">star-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="news"><matcha-icon name="news" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">news</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="news-out"><matcha-icon name="news-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">news-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="edit"><matcha-icon name="edit" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">edit</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="edit-out"><matcha-icon name="edit-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">edit-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="web"><matcha-icon name="web" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">web</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="web-out"><matcha-icon name="web-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">web-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="prayer"><matcha-icon name="prayer" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">prayer</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="prayer-out"><matcha-icon name="prayer-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">prayer-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="radio"><matcha-icon name="radio" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">radio</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="radio-out"><matcha-icon name="radio-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">radio-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="id-card"><matcha-icon name="id-card" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">id-card</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="id-card-out"><matcha-icon name="id-card-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">id-card-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="cell"><matcha-icon name="cell" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">cell</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="cell-out"><matcha-icon name="cell-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">cell-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="business"><matcha-icon name="business" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">business</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="business-out"><matcha-icon name="business-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">business-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="contact"><matcha-icon name="contact" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">contact</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="contact-out"><matcha-icon name="contact-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">contact-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="store"><matcha-icon name="store" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">store</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="store-out"><matcha-icon name="store-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">store-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="mykids"><matcha-icon name="mykids" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">mykids</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="mykids-out"><matcha-icon name="mykids-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">mykids-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="profile"><matcha-icon name="profile" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">profile</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="profile-out"><matcha-icon name="profile-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">profile-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="bright"><matcha-icon name="bright" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">bright</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="bright-out"><matcha-icon name="bright-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">bright-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="case"><matcha-icon name="case" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">case</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="case-out"><matcha-icon name="case-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">case-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="cake"><matcha-icon name="cake" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">cake</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="link"><matcha-icon name="link" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">link</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="list"><matcha-icon name="list" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">list</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="grid"><matcha-icon name="grid" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">grid</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="grid-out"><matcha-icon name="grid-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">grid-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="contrast"><matcha-icon name="contrast" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">contrast</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="check-in"><matcha-icon name="check-in" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">check-in</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="check-out"><matcha-icon name="check-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">check-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="counseling"><matcha-icon name="counseling" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">counseling</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="counseling-out"><matcha-icon name="counseling-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">counseling-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="notes"><matcha-icon name="notes" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">notes</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="notes-out"><matcha-icon name="notes-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">notes-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="print"><matcha-icon name="print" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">print</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="print-out"><matcha-icon name="print-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">print-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="smile"><matcha-icon name="smile" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">smile</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="notification"><matcha-icon name="notification" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">notification</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="light-mode"><matcha-icon name="light-mode" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">light-mode</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="dark-mode"><matcha-icon name="dark-mode" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">dark-mode</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="dark-mode-2"><matcha-icon name="dark-mode-2" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">dark-mode-2</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="category"><matcha-icon name="category" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">category</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="bank"><matcha-icon name="bank" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">bank</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="visitor"><matcha-icon name="visitor" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">visitor</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="participant"><matcha-icon name="participant" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">participant</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="arrow-left"><matcha-icon name="arrow-left" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">arrow-left</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="arrow-up"><matcha-icon name="arrow-up" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">arrow-up</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="arrow-down"><matcha-icon name="arrow-down" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">arrow-down</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="arrow-right"><matcha-icon name="arrow-right" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">arrow-right</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="chevron-left"><matcha-icon name="chevron-left" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">chevron-left</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="chevron-right"><matcha-icon name="chevron-right" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">chevron-right</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="chevron-down"><matcha-icon name="chevron-down" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">chevron-down</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="chevron-up"><matcha-icon name="chevron-up" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">chevron-up</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="reading"><matcha-icon name="reading" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">reading</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="blocked"><matcha-icon name="blocked" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">blocked</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="reports"><matcha-icon name="reports" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">reports</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="dashboard"><matcha-icon name="dashboard" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">dashboard</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="graph"><matcha-icon name="graph" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">graph</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="education"><matcha-icon name="education" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">education</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="phone"><matcha-icon name="phone" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">phone</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="contact-us"><matcha-icon name="contact-us" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">contact-us</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="header-panel"><matcha-icon name="header-panel" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">header-panel</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="audio"><matcha-icon name="audio" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">audio</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="audio-out"><matcha-icon name="audio-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">audio-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="foward"><matcha-icon name="foward" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">foward</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="foward-out"><matcha-icon name="foward-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">foward-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="next"><matcha-icon name="next" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">next</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="next1"><matcha-icon name="next1" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">next1</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="pause"><matcha-icon name="pause" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">pause</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="pause-out"><matcha-icon name="pause-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">pause-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="play"><matcha-icon name="play" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">play</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="play-out"><matcha-icon name="play-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">play-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="microphone"><matcha-icon name="microphone" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">microphone</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="microphone-out"><matcha-icon name="microphone-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">microphone-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="previous"><matcha-icon name="previous" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">previous</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="previous-out"><matcha-icon name="previous-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">previous-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="rewind"><matcha-icon name="rewind" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">rewind</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="rewind-out"><matcha-icon name="rewind-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">rewind-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="songbook"><matcha-icon name="songbook" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">songbook</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="songbook-out"><matcha-icon name="songbook-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">songbook-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="video"><matcha-icon name="video" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">video</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="video-out"><matcha-icon name="video-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">video-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="upload"><matcha-icon name="upload" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">upload</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="upload-out"><matcha-icon name="upload-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">upload-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="gallery"><matcha-icon name="gallery" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">gallery</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="image-out"><matcha-icon name="image-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">image-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="edit-image"><matcha-icon name="edit-image" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">edit-image</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="bonus"><matcha-icon name="bonus" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">bonus</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="bonus-out"><matcha-icon name="bonus-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">bonus-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="save"><matcha-icon name="save" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">save</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="save-out"><matcha-icon name="save-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">save-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="lightbulb"><matcha-icon name="lightbulb" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">lightbulb</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="lightbulb-out"><matcha-icon name="lightbulb-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">lightbulb-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="laptop"><matcha-icon name="laptop" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">laptop</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="phone1"><matcha-icon name="phone1" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">phone1</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="monitor"><matcha-icon name="monitor" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">monitor</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="monitor-out"><matcha-icon name="monitor-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">monitor-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="testimony"><matcha-icon name="testimony" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">testimony</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="testimony-out"><matcha-icon name="testimony-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">testimony-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="pdf"><matcha-icon name="pdf" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">pdf</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="podtail"><matcha-icon name="podtail" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">podtail</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="net"><matcha-icon name="net" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">net</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="contact1"><matcha-icon name="contact1" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">contact1</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="copy-content"><matcha-icon name="copy-content" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">copy-content</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="about"><matcha-icon name="about" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">about</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="about-out"><matcha-icon name="about-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">about-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="copy"><matcha-icon name="copy" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">copy</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="copy-out"><matcha-icon name="copy-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">copy-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="copy-folder"><matcha-icon name="copy-folder" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">copy-folder</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="copy-folder-out"><matcha-icon name="copy-folder-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">copy-folder-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="new-note"><matcha-icon name="new-note" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">new-note</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="new-note-out"><matcha-icon name="new-note-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">new-note-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="folder-closed"><matcha-icon name="folder-closed" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">folder-closed</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="folder-opened"><matcha-icon name="folder-opened" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">folder-opened</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="note"><matcha-icon name="note" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">note</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="note-out"><matcha-icon name="note-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">note-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="copy-out1"><matcha-icon name="copy-out1" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">copy-out1</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="new-note-out1"><matcha-icon name="new-note-out1" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">new-note-out1</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="text"><matcha-icon name="text" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">text</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="text-align-left"><matcha-icon name="text-align-left" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">text-align-left</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="text-bullet-list"><matcha-icon name="text-bullet-list" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">text-bullet-list</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="text-align-center"><matcha-icon name="text-align-center" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">text-align-center</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="text-indent-back"><matcha-icon name="text-indent-back" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">text-indent-back</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="text-align-justify"><matcha-icon name="text-align-justify" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">text-align-justify</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="text-indent-foward"><matcha-icon name="text-indent-foward" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">text-indent-foward</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="text-align-right"><matcha-icon name="text-align-right" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">text-align-right</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="font-bold"><matcha-icon name="font-bold" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">font-bold</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="font-underline"><matcha-icon name="font-underline" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">font-underline</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="font-italic"><matcha-icon name="font-italic" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">font-italic</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="delete"><matcha-icon name="delete" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">delete</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="delete-out"><matcha-icon name="delete-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">delete-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="filter"><matcha-icon name="filter" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">filter</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="filter-out"><matcha-icon name="filter-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">filter-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="filter-bars"><matcha-icon name="filter-bars" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">filter-bars</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="fullscreen"><matcha-icon name="fullscreen" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">fullscreen</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="fullscreen-out"><matcha-icon name="fullscreen-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">fullscreen-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="fullscreen-exit"><matcha-icon name="fullscreen-exit" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">fullscreen-exit</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="fullscreen-exit-out"><matcha-icon name="fullscreen-exit-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">fullscreen-exit-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="settings"><matcha-icon name="settings" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">settings</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="settings-out"><matcha-icon name="settings-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">settings-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="share"><matcha-icon name="share" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">share</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="share-out"><matcha-icon name="share-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">share-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="toggle-off"><matcha-icon name="toggle-off" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">toggle-off</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="toggle-on"><matcha-icon name="toggle-on" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">toggle-on</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="toggle-off-out"><matcha-icon name="toggle-off-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">toggle-off-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="toggle-on-out"><matcha-icon name="toggle-on-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">toggle-on-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="visibility-on"><matcha-icon name="visibility-on" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">visibility-on</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="visibility-off"><matcha-icon name="visibility-off" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">visibility-off</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="visibility-on-out"><matcha-icon name="visibility-on-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">visibility-on-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="visibility-off-out"><matcha-icon name="visibility-off-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">visibility-off-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="logout"><matcha-icon name="logout" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">logout</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="logout-out"><matcha-icon name="logout-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">logout-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="search"><matcha-icon name="search" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">search</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="search-out"><matcha-icon name="search-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">search-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="notification1"><matcha-icon name="notification1" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">notification1</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="notification-out"><matcha-icon name="notification-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">notification-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="password"><matcha-icon name="password" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">password</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="password-out"><matcha-icon name="password-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">password-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="calendar"><matcha-icon name="calendar" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">calendar</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="calendar-out"><matcha-icon name="calendar-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">calendar-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="menu"><matcha-icon name="menu" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">menu</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="menu-out"><matcha-icon name="menu-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">menu-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="info"><matcha-icon name="info" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">info</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="info-out"><matcha-icon name="info-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">info-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="leadership"><matcha-icon name="leadership" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">leadership</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="leadership-out"><matcha-icon name="leadership-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">leadership-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="attachment"><matcha-icon name="attachment" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">attachment</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="attachment-out"><matcha-icon name="attachment-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">attachment-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="send"><matcha-icon name="send" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">send</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="action_sign_error"><matcha-icon name="action_sign_error" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">action_sign_error</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="action_close"><matcha-icon name="action_close" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">action_close</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="action_sign_success"><matcha-icon name="action_sign_success" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">action_sign_success</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="action_done"><matcha-icon name="action_done" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">action_done</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="action_sign_warning"><matcha-icon name="action_sign_warning" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">action_sign_warning</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="action_sign_warning-out"><matcha-icon name="action_sign_warning-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">action_sign_warning-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="feedback"><matcha-icon name="feedback" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">feedback</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="feedback-out"><matcha-icon name="feedback-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">feedback-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="action_get_up"><matcha-icon name="action_get_up" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">action_get_up</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="action_get_down"><matcha-icon name="action_get_down" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">action_get_down</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="action_move"><matcha-icon name="action_move" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">action_move</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="policy"><matcha-icon name="policy" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">policy</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="action_key"><matcha-icon name="action_key" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">action_key</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="action_sign_info"><matcha-icon name="action_sign_info" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">action_sign_info</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="action_sign_info-out"><matcha-icon name="action_sign_info-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">action_sign_info-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="qr-code-no-border"><matcha-icon name="qr-code-no-border" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">qr-code-no-border</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="qr-code"><matcha-icon name="qr-code" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">qr-code</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="drag-dots"><matcha-icon name="drag-dots" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">drag-dots</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="drag-bars"><matcha-icon name="drag-bars" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">drag-bars</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="action_arrow_down"><matcha-icon name="action_arrow_down" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">action_arrow_down</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="action_arrow_left"><matcha-icon name="action_arrow_left" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">action_arrow_left</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="action_arrow_up"><matcha-icon name="action_arrow_up" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">action_arrow_up</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="action_arrow_right"><matcha-icon name="action_arrow_right" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">action_arrow_right</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="action_plus"><matcha-icon name="action_plus" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">action_plus</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="minus"><matcha-icon name="minus" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">minus</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="action_reload"><matcha-icon name="action_reload" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">action_reload</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="transfer"><matcha-icon name="transfer" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">transfer</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="cost-center"><matcha-icon name="cost-center" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">cost-center</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="expand"><matcha-icon name="expand" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">expand</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="collapse"><matcha-icon name="collapse" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">collapse</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="action_list"><matcha-icon name="action_list" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">action_list</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="action_options"><matcha-icon name="action_options" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">action_options</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="historic"><matcha-icon name="historic" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">historic</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="plugin"><matcha-icon name="plugin" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">plugin</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="modules"><matcha-icon name="modules" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">modules</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="platform"><matcha-icon name="platform" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">platform</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="barcode"><matcha-icon name="barcode" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">barcode</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="barcode-out"><matcha-icon name="barcode-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">barcode-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="camera"><matcha-icon name="camera" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">camera</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="camera-out"><matcha-icon name="camera-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">camera-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="cast"><matcha-icon name="cast" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">cast</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="cast-out"><matcha-icon name="cast-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">cast-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="location"><matcha-icon name="location" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">location</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="location-out"><matcha-icon name="location-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">location-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="clock"><matcha-icon name="clock" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">clock</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="clock-out"><matcha-icon name="clock-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">clock-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="card"><matcha-icon name="card" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">card</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="card-out"><matcha-icon name="card-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">card-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="add-card"><matcha-icon name="add-card" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">add-card</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="update-balance"><matcha-icon name="update-balance" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">update-balance</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="cash"><matcha-icon name="cash" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">cash</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="cash-out"><matcha-icon name="cash-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">cash-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="pin"><matcha-icon name="pin" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">pin</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="pin-out"><matcha-icon name="pin-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">pin-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="flag"><matcha-icon name="flag" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">flag</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="flag-out"><matcha-icon name="flag-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">flag-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="category1"><matcha-icon name="category1" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">category1</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="category-out"><matcha-icon name="category-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">category-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="media"><matcha-icon name="media" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">media</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="media-out"><matcha-icon name="media-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">media-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="wallet"><matcha-icon name="wallet" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">wallet</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="wallet-out"><matcha-icon name="wallet-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">wallet-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="management"><matcha-icon name="management" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">management</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="business-unit"><matcha-icon name="business-unit" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">business-unit</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="receipt"><matcha-icon name="receipt" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">receipt</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="receipt-out"><matcha-icon name="receipt-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">receipt-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="circle-email"><matcha-icon name="circle-email" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">circle-email</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="email"><matcha-icon name="email" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">email</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="email-out"><matcha-icon name="email-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">email-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="pix"><matcha-icon name="pix" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">pix</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="pix-out"><matcha-icon name="pix-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">pix-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="location-cell"><matcha-icon name="location-cell" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">location-cell</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="location-cell-out"><matcha-icon name="location-cell-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">location-cell-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="image-rights"><matcha-icon name="image-rights" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">image-rights</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="image-rights-allowed"><matcha-icon name="image-rights-allowed" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">image-rights-allowed</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="forbidden-passage"><matcha-icon name="forbidden-passage" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">forbidden-passage</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="allowed-passage"><matcha-icon name="allowed-passage" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">allowed-passage</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="food-restriction"><matcha-icon name="food-restriction" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">food-restriction</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="no-food-restriction"><matcha-icon name="no-food-restriction" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">no-food-restriction</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="allergy"><matcha-icon name="allergy" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">allergy</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="special-need"><matcha-icon name="special-need" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">special-need</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="map"><matcha-icon name="map" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">map</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="apple"><matcha-icon name="apple" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">apple</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="number"><matcha-icon name="number" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">number</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="flow"><matcha-icon name="flow" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">flow</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="ibf-church"><matcha-icon name="ibf-church" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">ibf-church</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="process-barcode"><matcha-icon name="process-barcode" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">process-barcode</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="process-card"><matcha-icon name="process-card" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">process-card</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="box-opened"><matcha-icon name="box-opened" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">box-opened</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="parent"><matcha-icon name="parent" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">parent</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="kid-girl"><matcha-icon name="kid-girl" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">kid-girl</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="kid-boy"><matcha-icon name="kid-boy" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">kid-boy</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="people"><matcha-icon name="people" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">people</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="circle-code"><matcha-icon name="circle-code" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">circle-code</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="circle-facebook"><matcha-icon name="circle-facebook" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">circle-facebook</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="facebook"><matcha-icon name="facebook" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">facebook</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="circle-instagram"><matcha-icon name="circle-instagram" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">circle-instagram</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="instagram"><matcha-icon name="instagram" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">instagram</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="soundcloud"><matcha-icon name="soundcloud" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">soundcloud</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="circle-soundcloud"><matcha-icon name="circle-soundcloud" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">circle-soundcloud</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="spotify"><matcha-icon name="spotify" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">spotify</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="circle-spotify"><matcha-icon name="circle-spotify" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">circle-spotify</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="circle-telegram"><matcha-icon name="circle-telegram" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">circle-telegram</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="telegram"><matcha-icon name="telegram" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">telegram</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="circle-tiktok"><matcha-icon name="circle-tiktok" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">circle-tiktok</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="tiktok"><matcha-icon name="tiktok" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">tiktok</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="circle-twitter"><matcha-icon name="circle-twitter" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">circle-twitter</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="twitter"><matcha-icon name="twitter" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">twitter</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="circle-whatsapp"><matcha-icon name="circle-whatsapp" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">circle-whatsapp</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="whatsapp"><matcha-icon name="whatsapp" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">whatsapp</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="circle-youtube"><matcha-icon name="circle-youtube" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">circle-youtube</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="youtube"><matcha-icon name="youtube" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">youtube</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="circle-share"><matcha-icon name="circle-share" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">circle-share</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="share1"><matcha-icon name="share1" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">share1</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="opened-lock"><matcha-icon name="opened-lock" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">opened-lock</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="flickr"><matcha-icon name="flickr" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">flickr</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="circle-flickr"><matcha-icon name="circle-flickr" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">circle-flickr</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="cookie"><matcha-icon name="cookie" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">cookie</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="cookie-out"><matcha-icon name="cookie-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">cookie-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="cookie-out-2"><matcha-icon name="cookie-out-2" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">cookie-out-2</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="emoji-happy"><matcha-icon name="emoji-happy" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">emoji-happy</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="emoji-happy-out"><matcha-icon name="emoji-happy-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">emoji-happy-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="emoji-prosperous"><matcha-icon name="emoji-prosperous" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">emoji-prosperous</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="emoji-prosperous-out"><matcha-icon name="emoji-prosperous-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">emoji-prosperous-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="emoji-blessed"><matcha-icon name="emoji-blessed" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">emoji-blessed</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="emoji-blessed-out"><matcha-icon name="emoji-blessed-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">emoji-blessed-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="emoji-sick"><matcha-icon name="emoji-sick" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">emoji-sick</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="emoji-sick-out"><matcha-icon name="emoji-sick-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">emoji-sick-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="emoji-alone"><matcha-icon name="emoji-alone" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">emoji-alone</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="emoji-alone-out"><matcha-icon name="emoji-alone-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">emoji-alone-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="emoji-sad"><matcha-icon name="emoji-sad" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">emoji-sad</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="emoji-sad-out"><matcha-icon name="emoji-sad-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">emoji-sad-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="emoji-faithless"><matcha-icon name="emoji-faithless" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">emoji-faithless</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="emoji-faithless-out"><matcha-icon name="emoji-faithless-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">emoji-faithless-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="emoji-careful"><matcha-icon name="emoji-careful" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">emoji-careful</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="emoji-careful-out"><matcha-icon name="emoji-careful-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">emoji-careful-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="emoji-distressed"><matcha-icon name="emoji-distressed" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">emoji-distressed</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="emoji-distressed-out"><matcha-icon name="emoji-distressed-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">emoji-distressed-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="rocket"><matcha-icon name="rocket" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">rocket</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="rocket-out"><matcha-icon name="rocket-out" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">rocket-out</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="flickr-02"><matcha-icon name="flickr-02" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">flickr-02</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="flickr-04"><matcha-icon name="flickr-04" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">flickr-04</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="nu"><matcha-icon name="nu" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">nu</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="bradesco"><matcha-icon name="bradesco" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">bradesco</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="santander"><matcha-icon name="santander" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">santander</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="bb"><matcha-icon name="bb" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">bb</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="c6-color"><matcha-icon name="c6-color" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">c6-color</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="itau"><matcha-icon name="itau" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">itau</span></div>
+            <div class="background-surface border-radius-8 icon text-center" data-name="caixa"><matcha-icon name="caixa" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text par-p fs-12 text-bold">caixa</span></div>
+        </div>`,
+    }),
+    name: 'Icon List',
+};