npm - matcha-components - Versions diffs - 20.12.0 → 20.15.0 - Mend

matcha-components 20.12.0 → 20.15.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (810) hide show

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

@@ -0,0 +1,431 @@
+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>Pesquisar ícones</mat-label>
+            <input
+            matInput
+            type="text"
+            id="iconSearch"
+            placeholder="Nome do ícone"
+            onKeyUp="filterIcons()"/>
+        </mat-form-field>
+        <div class="bb-2 border-color-disabled mb-16"></div>
+        <div class="grid-2 grid-sm-6 grid-md-8 grid-lg-12 gap-8">
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="app"><matcha-icon name="app" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">app</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="site"><matcha-icon name="site" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">site</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="home"><matcha-icon name="home" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">home</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">home-out</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="content"><matcha-icon name="content" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">content</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">content-out</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="events"><matcha-icon name="events" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">events</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">events-out</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="favorite"><matcha-icon name="favorite" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">favorite</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">favorite-out</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="tv"><matcha-icon name="tv" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">tv</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">tv-out</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="bible"><matcha-icon name="bible" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">bible</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">bible-out</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">reading-plan</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">reading-plan-out</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="agenda"><matcha-icon name="agenda" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">agenda</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">agenda-out</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="church"><matcha-icon name="church" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">church</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">church-out</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="download"><matcha-icon name="download" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">download</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">downloads-out</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="groups"><matcha-icon name="groups" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">groups</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">groups-out</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="live"><matcha-icon name="live" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">live</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">live-out</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="star"><matcha-icon name="star" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">star</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">star-out</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="news"><matcha-icon name="news" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">news</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">news-out</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="edit"><matcha-icon name="edit" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">edit</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">edit-out</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="web"><matcha-icon name="web" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">web</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">web-out</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="prayer"><matcha-icon name="prayer" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">prayer</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">prayer-out</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="radio"><matcha-icon name="radio" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">radio</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">radio-out</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">id-card</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">id-card-out</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="cell"><matcha-icon name="cell" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">cell</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">cell-out</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="business"><matcha-icon name="business" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">business</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">business-out</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="contact"><matcha-icon name="contact" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">contact</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">contact-out</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="store"><matcha-icon name="store" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">store</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">store-out</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="mykids"><matcha-icon name="mykids" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">mykids</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">mykids-out</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="profile"><matcha-icon name="profile" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">profile</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">profile-out</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="bright"><matcha-icon name="bright" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">bright</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">bright-out</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="case"><matcha-icon name="case" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">case</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">case-out</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="cake"><matcha-icon name="cake" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">cake</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="link"><matcha-icon name="link" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">link</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="list"><matcha-icon name="list" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">list</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="grid"><matcha-icon name="grid" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">grid</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">grid-out</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="contrast"><matcha-icon name="contrast" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">contrast</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">check-in</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">check-out</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="counseling"><matcha-icon name="counseling" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">counseling</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">counseling-out</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="notes"><matcha-icon name="notes" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">notes</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">notes-out</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="print"><matcha-icon name="print" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">print</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">print-out</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="smile"><matcha-icon name="smile" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">smile</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="notification"><matcha-icon name="notification" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">notification</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">light-mode</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">dark-mode</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">dark-mode-2</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="category"><matcha-icon name="category" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">category</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="bank"><matcha-icon name="bank" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">bank</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="visitor"><matcha-icon name="visitor" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">visitor</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="participant"><matcha-icon name="participant" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">participant</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">arrow-left</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">arrow-up</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">arrow-down</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">arrow-right</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">chevron-left</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">chevron-right</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">chevron-down</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">chevron-up</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="reading"><matcha-icon name="reading" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">reading</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="blocked"><matcha-icon name="blocked" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">blocked</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="reports"><matcha-icon name="reports" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">reports</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="dashboard"><matcha-icon name="dashboard" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">dashboard</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="graph"><matcha-icon name="graph" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">graph</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="education"><matcha-icon name="education" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">education</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="phone"><matcha-icon name="phone" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">phone</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">contact-us</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">header-panel</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="audio"><matcha-icon name="audio" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">audio</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">audio-out</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="foward"><matcha-icon name="foward" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">foward</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">foward-out</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="next"><matcha-icon name="next" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">next</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="next1"><matcha-icon name="next1" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">next1</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="pause"><matcha-icon name="pause" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">pause</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">pause-out</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="play"><matcha-icon name="play" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">play</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">play-out</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="microphone"><matcha-icon name="microphone" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">microphone</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">microphone-out</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="previous"><matcha-icon name="previous" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">previous</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">previous-out</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="rewind"><matcha-icon name="rewind" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">rewind</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">rewind-out</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="songbook"><matcha-icon name="songbook" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">songbook</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">songbook-out</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="video"><matcha-icon name="video" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">video</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">video-out</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="upload"><matcha-icon name="upload" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">upload</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">upload-out</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="gallery"><matcha-icon name="gallery" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">gallery</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">image-out</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">edit-image</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="bonus"><matcha-icon name="bonus" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">bonus</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">bonus-out</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="save"><matcha-icon name="save" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">save</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">save-out</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="lightbulb"><matcha-icon name="lightbulb" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">lightbulb</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">lightbulb-out</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="laptop"><matcha-icon name="laptop" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">laptop</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="phone1"><matcha-icon name="phone1" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">phone1</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="monitor"><matcha-icon name="monitor" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">monitor</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">monitor-out</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="testimony"><matcha-icon name="testimony" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">testimony</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">testimony-out</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="pdf"><matcha-icon name="pdf" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">pdf</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="podtail"><matcha-icon name="podtail" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">podtail</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="net"><matcha-icon name="net" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">net</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="contact1"><matcha-icon name="contact1" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">contact1</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">copy-content</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="about"><matcha-icon name="about" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">about</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">about-out</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="copy"><matcha-icon name="copy" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">copy</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">copy-out</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">copy-folder</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">copy-folder-out</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">new-note</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">new-note-out</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">folder-closed</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">folder-opened</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="note"><matcha-icon name="note" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">note</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">note-out</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">copy-out1</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">new-note-out1</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="cancel-presentation"><matcha-icon name="cancel-presentation" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">cancel-presentation</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="start-presentation"><matcha-icon name="start-presentation" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">cancel-presentation</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="text"><matcha-icon name="text" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">text</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">text-align-left</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">text-bullet-list</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">text-align-center</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">text-indent-back</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">text-align-justify</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">text-indent-foward</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">text-align-right</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">font-bold</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">font-underline</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">font-italic</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="delete"><matcha-icon name="delete" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">delete</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">delete-out</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="filter"><matcha-icon name="filter" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">filter</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">filter-out</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">filter-bars</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="fullscreen"><matcha-icon name="fullscreen" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">fullscreen</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">fullscreen-out</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">fullscreen-exit</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">fullscreen-exit-out</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="settings"><matcha-icon name="settings" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">settings</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">settings-out</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="share"><matcha-icon name="share" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">share</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">share-out</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">toggle-off</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">toggle-on</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">toggle-off-out</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">toggle-on-out</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">visibility-on</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">visibility-off</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">visibility-on-out</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">visibility-off-out</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="logout"><matcha-icon name="logout" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">logout</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">logout-out</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="search"><matcha-icon name="search" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">search</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">search-out</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="notification1"><matcha-icon name="notification1" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">notification1</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">notification-out</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="password"><matcha-icon name="password" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">password</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">password-out</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="calendar"><matcha-icon name="calendar" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">calendar</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">calendar-out</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="menu"><matcha-icon name="menu" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">menu</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">menu-out</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="info"><matcha-icon name="info" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">info</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">info-out</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="leadership"><matcha-icon name="leadership" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">leadership</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">leadership-out</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="attachment"><matcha-icon name="attachment" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">attachment</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">attachment-out</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="send"><matcha-icon name="send" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">send</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">action_sign_error</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">action_close</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">action_sign_success</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">action_done</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">action_sign_warning</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">action_sign_warning-out</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="feedback"><matcha-icon name="feedback" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">feedback</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">feedback-out</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">action_get_up</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">action_get_down</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">action_move</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="policy"><matcha-icon name="policy" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">policy</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">action_key</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">action_sign_info</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">action_sign_info-out</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">qr-code-no-border</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">qr-code</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">drag-dots</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">drag-bars</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">action_arrow_down</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">action_arrow_left</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">action_arrow_up</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">action_arrow_right</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">action_plus</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="minus"><matcha-icon name="minus" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">minus</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">action_reload</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="transfer"><matcha-icon name="transfer" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">transfer</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">cost-center</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="expand"><matcha-icon name="expand" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">expand</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="collapse"><matcha-icon name="collapse" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">collapse</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">action_list</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">action_options</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="historic"><matcha-icon name="historic" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">historic</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="plugin"><matcha-icon name="plugin" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">plugin</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="modules"><matcha-icon name="modules" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">modules</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="view-row"><matcha-icon name="view-row" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">view-row</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="view-column"><matcha-icon name="view-column" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">view-column</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="platform"><matcha-icon name="platform" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">platform</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="barcode"><matcha-icon name="barcode" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">barcode</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">barcode-out</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="camera"><matcha-icon name="camera" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">camera</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">camera-out</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="cast"><matcha-icon name="cast" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">cast</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">cast-out</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="location"><matcha-icon name="location" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">location</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">location-out</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="clock"><matcha-icon name="clock" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">clock</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">clock-out</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="card"><matcha-icon name="card" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">card</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">card-out</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">add-card</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">update-balance</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="cash"><matcha-icon name="cash" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">cash</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">cash-out</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="pin"><matcha-icon name="pin" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">pin</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">pin-out</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="flag"><matcha-icon name="flag" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">flag</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">flag-out</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="category1"><matcha-icon name="category1" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">category1</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">category-out</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="media"><matcha-icon name="media" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">media</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">media-out</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="wallet"><matcha-icon name="wallet" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">wallet</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">wallet-out</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="management"><matcha-icon name="management" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">management</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">business-unit</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="receipt"><matcha-icon name="receipt" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">receipt</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">receipt-out</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">circle-email</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="email"><matcha-icon name="email" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">email</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">email-out</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="pix"><matcha-icon name="pix" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">pix</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">pix-out</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">location-cell</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">location-cell-out</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">image-rights</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">image-rights-allowed</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">forbidden-passage</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">allowed-passage</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">food-restriction</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">no-food-restriction</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="allergy"><matcha-icon name="allergy" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">allergy</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">special-need</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="map"><matcha-icon name="map" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">map</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="apple"><matcha-icon name="apple" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">apple</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="number"><matcha-icon name="number" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">number</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="flow"><matcha-icon name="flow" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">flow</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">ibf-church</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">process-barcode</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">process-card</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">box-opened</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="parent"><matcha-icon name="parent" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">parent</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">kid-girl</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">kid-boy</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="people"><matcha-icon name="people" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">people</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">circle-code</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">circle-facebook</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="facebook"><matcha-icon name="facebook" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">facebook</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">circle-instagram</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="instagram"><matcha-icon name="instagram" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">instagram</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="soundcloud"><matcha-icon name="soundcloud" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">soundcloud</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">circle-soundcloud</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="spotify"><matcha-icon name="spotify" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">spotify</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">circle-spotify</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">circle-telegram</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="telegram"><matcha-icon name="telegram" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">telegram</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">circle-tiktok</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="tiktok"><matcha-icon name="tiktok" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">tiktok</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">circle-twitter</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="twitter"><matcha-icon name="twitter" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">twitter</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">circle-whatsapp</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="whatsapp"><matcha-icon name="whatsapp" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">whatsapp</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">circle-youtube</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="youtube"><matcha-icon name="youtube" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">youtube</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">circle-share</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="share1"><matcha-icon name="share1" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">share1</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="circle-deezer"><matcha-icon name="circle-deezer" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">circle-deezer</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="deezer"><matcha-icon name="deezer" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">deezer</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="circle-beacons"><matcha-icon name="circle-beacons" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">circle-beacons</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="beacons"><matcha-icon name="beacons" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">beacons</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">opened-lock</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="flickr"><matcha-icon name="flickr" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">flickr</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">circle-flickr</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="cookie"><matcha-icon name="cookie" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">cookie</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">cookie-out</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">cookie-out-2</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">emoji-happy</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">emoji-happy-out</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">emoji-prosperous</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">emoji-prosperous-out</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">emoji-blessed</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">emoji-blessed-out</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">emoji-sick</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">emoji-sick-out</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">emoji-alone</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">emoji-alone-out</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">emoji-sad</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">emoji-sad-out</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">emoji-faithless</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">emoji-faithless-out</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">emoji-careful</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">emoji-careful-out</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">emoji-distressed</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">emoji-distressed-out</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="rocket"><matcha-icon name="rocket" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">rocket</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">rocket-out</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">flickr-02</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">flickr-04</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="nu"><matcha-icon name="nu" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">nu</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="bradesco"><matcha-icon name="bradesco" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">bradesco</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="santander"><matcha-icon name="santander" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">santander</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="bb"><matcha-icon name="bb" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">bb</span></div>
+            <div class="background-surface radius-8 p-16 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  fs-12 text-bold">c6-color</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="itau"><matcha-icon name="itau" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">itau</span></div>
+            <div class="background-surface radius-8 p-16 icon text-center" data-name="caixa"><matcha-icon name="caixa" size="md" color="accent"></matcha-icon><span class="mt-8 five-lines-text  fs-12 text-bold">caixa</span></div>
+        </div>`,
+    }),
+    name: 'Icon List',
+};