matcha-components 1.0.7 → 1.0.8

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 (4) hide show
  1. package/index.ts +1 -0
  2. package/package.json +1 -1
  3. package/src/lib/matcha-icon/icon.component.ts +2 -2
  4. package/src/lib/matcha-icon/icon.stories.ts +365 -358
package/index.ts ADDED
@@ -0,0 +1 @@
1
+ export * from './src/public-api';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "matcha-components",
3
- "version": "1.0.7",
3
+ "version": "1.0.8",
4
4
  "peerDependencies": {
5
5
  "@angular/common": "^16.0.0",
6
6
  "@angular/core": "^16.0.0"
package/src/lib/matcha-icon/icon.component.ts CHANGED
@@ -19,13 +19,13 @@ export class MatchaIconComponent {
19
19
  class: string | undefined | null = '';
20
20
 
21
21
  @Input()
22
- loading: boolean = false;
22
+ loading: boolean | string = false;
23
23
 
24
24
  public get classes(): string {
25
25
  const icon = this.name ? `i-matcha-${this.name}` : '';
26
26
  const size = this.size ? `i-size-${this.size}` : '';
27
27
  const color = `color-${this.color}`;
28
- const loading = this.loading ? 'loading' : '';
28
+ const loading = this.loading == true ? 'loading' : '';
29
29
 
30
30
  const activeClasses = `${icon} ${color} ${size} ${loading} ${this.class}`;
31
31
  return activeClasses;
package/src/lib/matcha-icon/icon.stories.ts CHANGED
@@ -3,12 +3,14 @@ import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
3
3
  import { MatchaIconModule } from './icon.module';
4
4
 
5
5
  import { iconArgtypes } from './icon-argtype';
6
+ import { MatInputModule } from '@angular/material/input';
7
+ import { MatFormFieldModule } from '@angular/material/form-field';
6
8
 
7
9
  export default {
8
10
  title: 'Atoms / Icon',
9
11
  decorators: [
10
12
  moduleMetadata({
11
- imports: [MatchaIconModule],
13
+ imports: [MatchaIconModule, MatInputModule, MatFormFieldModule],
12
14
  declarations: [],
13
15
  }),
14
16
  ],
@@ -51,365 +53,370 @@ export const IconList: StoryObj = {
51
53
  ...args,
52
54
  },
53
55
  template: `
54
- <input
56
+
57
+ <mat-form-field appearance="outline" color="accent">
58
+ <mat-label>Value</mat-label>
59
+ <input
60
+ matInput
55
61
  type="text"
56
62
  id="iconSearch"
57
- placeholder="Pesquisar ícone..."
58
- onKeyUp="filterIcons()"
59
- />
60
- <div class="d-flex-row d-flex-wrap gap-24">
61
- <matcha-icon class="icon" data-name="app" name="app" size="md" color="accent"></matcha-icon>
62
- <matcha-icon class="icon" data-name="site" name="site" size="md" color="accent"></matcha-icon>
63
- <matcha-icon class="icon" data-name="home" name="home" size="md" color="accent"></matcha-icon>
64
- <matcha-icon class="icon" data-name="home-out" name="home-out" size="md" color="accent"></matcha-icon>
65
- <matcha-icon class="icon" data-name="content" name="content" size="md" color="accent"></matcha-icon>
66
- <matcha-icon class="icon" data-name="content-out" name="content-out" size="md" color="accent"></matcha-icon>
67
- <matcha-icon class="icon" data-name="events" name="events" size="md" color="accent"></matcha-icon>
68
- <matcha-icon class="icon" data-name="events-out" name="events-out" size="md" color="accent"></matcha-icon>
69
- <matcha-icon class="icon" data-name="favorite" name="favorite" size="md" color="accent"></matcha-icon>
70
- <matcha-icon class="icon" data-name="favorite-out" name="favorite-out" size="md" color="accent"></matcha-icon>
71
- <matcha-icon class="icon" data-name="tv" name="tv" size="md" color="accent"></matcha-icon>
72
- <matcha-icon class="icon" data-name="tv-out" name="tv-out" size="md" color="accent"></matcha-icon>
73
- <matcha-icon class="icon" data-name="bible" name="bible" size="md" color="accent"></matcha-icon>
74
- <matcha-icon class="icon" data-name="bible-out" name="bible-out" size="md" color="accent"></matcha-icon>
75
- <matcha-icon class="icon" data-name="reading-plan" name="reading-plan" size="md" color="accent"></matcha-icon>
76
- <matcha-icon class="icon" data-name="reading-plan-out" name="reading-plan-out" size="md" color="accent"></matcha-icon>
77
- <matcha-icon class="icon" data-name="agenda" name="agenda" size="md" color="accent"></matcha-icon>
78
- <matcha-icon class="icon" data-name="agenda-out" name="agenda-out" size="md" color="accent"></matcha-icon>
79
- <matcha-icon class="icon" data-name="church" name="church" size="md" color="accent"></matcha-icon>
80
- <matcha-icon class="icon" data-name="church-out" name="church-out" size="md" color="accent"></matcha-icon>
81
- <matcha-icon class="icon" data-name="download" name="download" size="md" color="accent"></matcha-icon>
82
- <matcha-icon class="icon" data-name="downloads-out" name="downloads-out" size="md" color="accent"></matcha-icon>
83
- <matcha-icon class="icon" data-name="groups" name="groups" size="md" color="accent"></matcha-icon>
84
- <matcha-icon class="icon" data-name="groups-out" name="groups-out" size="md" color="accent"></matcha-icon>
85
- <matcha-icon class="icon" data-name="live" name="live" size="md" color="accent"></matcha-icon>
86
- <matcha-icon class="icon" data-name="live-out" name="live-out" size="md" color="accent"></matcha-icon>
87
- <matcha-icon class="icon" data-name="star" name="star" size="md" color="accent"></matcha-icon>
88
- <matcha-icon class="icon" data-name="star-out" name="star-out" size="md" color="accent"></matcha-icon>
89
- <matcha-icon class="icon" data-name="news" name="news" size="md" color="accent"></matcha-icon>
90
- <matcha-icon class="icon" data-name="news-out" name="news-out" size="md" color="accent"></matcha-icon>
91
- <matcha-icon class="icon" data-name="edit" name="edit" size="md" color="accent"></matcha-icon>
92
- <matcha-icon class="icon" data-name="edit-out" name="edit-out" size="md" color="accent"></matcha-icon>
93
- <matcha-icon class="icon" data-name="web" name="web" size="md" color="accent"></matcha-icon>
94
- <matcha-icon class="icon" data-name="web-out" name="web-out" size="md" color="accent"></matcha-icon>
95
- <matcha-icon class="icon" data-name="prayer" name="prayer" size="md" color="accent"></matcha-icon>
96
- <matcha-icon class="icon" data-name="prayer-out" name="prayer-out" size="md" color="accent"></matcha-icon>
97
- <matcha-icon class="icon" data-name="radio" name="radio" size="md" color="accent"></matcha-icon>
98
- <matcha-icon class="icon" data-name="radio-out" name="radio-out" size="md" color="accent"></matcha-icon>
99
- <matcha-icon class="icon" data-name="id-card" name="id-card" size="md" color="accent"></matcha-icon>
100
- <matcha-icon class="icon" data-name="id-card-out" name="id-card-out" size="md" color="accent"></matcha-icon>
101
- <matcha-icon class="icon" data-name="cell" name="cell" size="md" color="accent"></matcha-icon>
102
- <matcha-icon class="icon" data-name="cell-out" name="cell-out" size="md" color="accent"></matcha-icon>
103
- <matcha-icon class="icon" data-name="business" name="business" size="md" color="accent"></matcha-icon>
104
- <matcha-icon class="icon" data-name="business-out" name="business-out" size="md" color="accent"></matcha-icon>
105
- <matcha-icon class="icon" data-name="contact" name="contact" size="md" color="accent"></matcha-icon>
106
- <matcha-icon class="icon" data-name="contact-out" name="contact-out" size="md" color="accent"></matcha-icon>
107
- <matcha-icon class="icon" data-name="store" name="store" size="md" color="accent"></matcha-icon>
108
- <matcha-icon class="icon" data-name="store-out" name="store-out" size="md" color="accent"></matcha-icon>
109
- <matcha-icon class="icon" data-name="mykids" name="mykids" size="md" color="accent"></matcha-icon>
110
- <matcha-icon class="icon" data-name="mykids-out" name="mykids-out" size="md" color="accent"></matcha-icon>
111
- <matcha-icon class="icon" data-name="profile" name="profile" size="md" color="accent"></matcha-icon>
112
- <matcha-icon class="icon" data-name="profile-out" name="profile-out" size="md" color="accent"></matcha-icon>
113
- <matcha-icon class="icon" data-name="bright" name="bright" size="md" color="accent"></matcha-icon>
114
- <matcha-icon class="icon" data-name="bright-out" name="bright-out" size="md" color="accent"></matcha-icon>
115
- <matcha-icon class="icon" data-name="case" name="case" size="md" color="accent"></matcha-icon>
116
- <matcha-icon class="icon" data-name="case-out" name="case-out" size="md" color="accent"></matcha-icon>
117
- <matcha-icon class="icon" data-name="cake" name="cake" size="md" color="accent"></matcha-icon>
118
- <matcha-icon class="icon" data-name="link" name="link" size="md" color="accent"></matcha-icon>
119
- <matcha-icon class="icon" data-name="list" name="list" size="md" color="accent"></matcha-icon>
120
- <matcha-icon class="icon" data-name="grid" name="grid" size="md" color="accent"></matcha-icon>
121
- <matcha-icon class="icon" data-name="grid-out" name="grid-out" size="md" color="accent"></matcha-icon>
122
- <matcha-icon class="icon" data-name="contrast" name="contrast" size="md" color="accent"></matcha-icon>
123
- <matcha-icon class="icon" data-name="check-in" name="check-in" size="md" color="accent"></matcha-icon>
124
- <matcha-icon class="icon" data-name="check-out" name="check-out" size="md" color="accent"></matcha-icon>
125
- <matcha-icon class="icon" data-name="counseling" name="counseling" size="md" color="accent"></matcha-icon>
126
- <matcha-icon class="icon" data-name="counseling-out" name="counseling-out" size="md" color="accent"></matcha-icon>
127
- <matcha-icon class="icon" data-name="notes" name="notes" size="md" color="accent"></matcha-icon>
128
- <matcha-icon class="icon" data-name="notes-out" name="notes-out" size="md" color="accent"></matcha-icon>
129
- <matcha-icon class="icon" data-name="print" name="print" size="md" color="accent"></matcha-icon>
130
- <matcha-icon class="icon" data-name="print-out" name="print-out" size="md" color="accent"></matcha-icon>
131
- <matcha-icon class="icon" data-name="smile" name="smile" size="md" color="accent"></matcha-icon>
132
- <matcha-icon class="icon" data-name="notification" name="notification" size="md" color="accent"></matcha-icon>
133
- <matcha-icon class="icon" data-name="light-mode" name="light-mode" size="md" color="accent"></matcha-icon>
134
- <matcha-icon class="icon" data-name="dark-mode" name="dark-mode" size="md" color="accent"></matcha-icon>
135
- <matcha-icon class="icon" data-name="dark-mode-2" name="dark-mode-2" size="md" color="accent"></matcha-icon>
136
- <matcha-icon class="icon" data-name="category" name="category" size="md" color="accent"></matcha-icon>
137
- <matcha-icon class="icon" data-name="bank" name="bank" size="md" color="accent"></matcha-icon>
138
- <matcha-icon class="icon" data-name="visitor" name="visitor" size="md" color="accent"></matcha-icon>
139
- <matcha-icon class="icon" data-name="participant" name="participant" size="md" color="accent"></matcha-icon>
140
- <matcha-icon class="icon" data-name="arrow-left" name="arrow-left" size="md" color="accent"></matcha-icon>
141
- <matcha-icon class="icon" data-name="arrow-up" name="arrow-up" size="md" color="accent"></matcha-icon>
142
- <matcha-icon class="icon" data-name="arrow-down" name="arrow-down" size="md" color="accent"></matcha-icon>
143
- <matcha-icon class="icon" data-name="arrow-right" name="arrow-right" size="md" color="accent"></matcha-icon>
144
- <matcha-icon class="icon" data-name="chevron-left" name="chevron-left" size="md" color="accent"></matcha-icon>
145
- <matcha-icon class="icon" data-name="chevron-right" name="chevron-right" size="md" color="accent"></matcha-icon>
146
- <matcha-icon class="icon" data-name="chevron-down" name="chevron-down" size="md" color="accent"></matcha-icon>
147
- <matcha-icon class="icon" data-name="chevron-up" name="chevron-up" size="md" color="accent"></matcha-icon>
148
- <matcha-icon class="icon" data-name="reading" name="reading" size="md" color="accent"></matcha-icon>
149
- <matcha-icon class="icon" data-name="blocked" name="blocked" size="md" color="accent"></matcha-icon>
150
- <matcha-icon class="icon" data-name="reports" name="reports" size="md" color="accent"></matcha-icon>
151
- <matcha-icon class="icon" data-name="dashboard" name="dashboard" size="md" color="accent"></matcha-icon>
152
- <matcha-icon class="icon" data-name="graph" name="graph" size="md" color="accent"></matcha-icon>
153
- <matcha-icon class="icon" data-name="education" name="education" size="md" color="accent"></matcha-icon>
154
- <matcha-icon class="icon" data-name="phone" name="phone" size="md" color="accent"></matcha-icon>
155
- <matcha-icon class="icon" data-name="contact-us" name="contact-us" size="md" color="accent"></matcha-icon>
156
- <matcha-icon class="icon" data-name="header-panel" name="header-panel" size="md" color="accent"></matcha-icon>
157
- <matcha-icon class="icon" data-name="audio" name="audio" size="md" color="accent"></matcha-icon>
158
- <matcha-icon class="icon" data-name="audio-out" name="audio-out" size="md" color="accent"></matcha-icon>
159
- <matcha-icon class="icon" data-name="foward" name="foward" size="md" color="accent"></matcha-icon>
160
- <matcha-icon class="icon" data-name="foward-out" name="foward-out" size="md" color="accent"></matcha-icon>
161
- <matcha-icon class="icon" data-name="next" name="next" size="md" color="accent"></matcha-icon>
162
- <matcha-icon class="icon" data-name="next1" name="next1" size="md" color="accent"></matcha-icon>
163
- <matcha-icon class="icon" data-name="pause" name="pause" size="md" color="accent"></matcha-icon>
164
- <matcha-icon class="icon" data-name="pause-out" name="pause-out" size="md" color="accent"></matcha-icon>
165
- <matcha-icon class="icon" data-name="play" name="play" size="md" color="accent"></matcha-icon>
166
- <matcha-icon class="icon" data-name="play-out" name="play-out" size="md" color="accent"></matcha-icon>
167
- <matcha-icon class="icon" data-name="microphone" name="microphone" size="md" color="accent"></matcha-icon>
168
- <matcha-icon class="icon" data-name="microphone-out" name="microphone-out" size="md" color="accent"></matcha-icon>
169
- <matcha-icon class="icon" data-name="previous" name="previous" size="md" color="accent"></matcha-icon>
170
- <matcha-icon class="icon" data-name="previous-out" name="previous-out" size="md" color="accent"></matcha-icon>
171
- <matcha-icon class="icon" data-name="rewind" name="rewind" size="md" color="accent"></matcha-icon>
172
- <matcha-icon class="icon" data-name="rewind-out" name="rewind-out" size="md" color="accent"></matcha-icon>
173
- <matcha-icon class="icon" data-name="songbook" name="songbook" size="md" color="accent"></matcha-icon>
174
- <matcha-icon class="icon" data-name="songbook-out" name="songbook-out" size="md" color="accent"></matcha-icon>
175
- <matcha-icon class="icon" data-name="video" name="video" size="md" color="accent"></matcha-icon>
176
- <matcha-icon class="icon" data-name="video-out" name="video-out" size="md" color="accent"></matcha-icon>
177
- <matcha-icon class="icon" data-name="upload" name="upload" size="md" color="accent"></matcha-icon>
178
- <matcha-icon class="icon" data-name="upload-out" name="upload-out" size="md" color="accent"></matcha-icon>
179
- <matcha-icon class="icon" data-name="gallery" name="gallery" size="md" color="accent"></matcha-icon>
180
- <matcha-icon class="icon" data-name="image-out" name="image-out" size="md" color="accent"></matcha-icon>
181
- <matcha-icon class="icon" data-name="edit-image" name="edit-image" size="md" color="accent"></matcha-icon>
182
- <matcha-icon class="icon" data-name="bonus" name="bonus" size="md" color="accent"></matcha-icon>
183
- <matcha-icon class="icon" data-name="bonus-out" name="bonus-out" size="md" color="accent"></matcha-icon>
184
- <matcha-icon class="icon" data-name="save" name="save" size="md" color="accent"></matcha-icon>
185
- <matcha-icon class="icon" data-name="save-out" name="save-out" size="md" color="accent"></matcha-icon>
186
- <matcha-icon class="icon" data-name="lightbulb" name="lightbulb" size="md" color="accent"></matcha-icon>
187
- <matcha-icon class="icon" data-name="lightbulb-out" name="lightbulb-out" size="md" color="accent"></matcha-icon>
188
- <matcha-icon class="icon" data-name="laptop" name="laptop" size="md" color="accent"></matcha-icon>
189
- <matcha-icon class="icon" data-name="phone1" name="phone1" size="md" color="accent"></matcha-icon>
190
- <matcha-icon class="icon" data-name="monitor" name="monitor" size="md" color="accent"></matcha-icon>
191
- <matcha-icon class="icon" data-name="monitor-out" name="monitor-out" size="md" color="accent"></matcha-icon>
192
- <matcha-icon class="icon" data-name="testimony" name="testimony" size="md" color="accent"></matcha-icon>
193
- <matcha-icon class="icon" data-name="testimony-out" name="testimony-out" size="md" color="accent"></matcha-icon>
194
- <matcha-icon class="icon" data-name="pdf" name="pdf" size="md" color="accent"></matcha-icon>
195
- <matcha-icon class="icon" data-name="podtail" name="podtail" size="md" color="accent"></matcha-icon>
196
- <matcha-icon class="icon" data-name="net" name="net" size="md" color="accent"></matcha-icon>
197
- <matcha-icon class="icon" data-name="contact1" name="contact1" size="md" color="accent"></matcha-icon>
198
- <matcha-icon class="icon" data-name="copy-content" name="copy-content" size="md" color="accent"></matcha-icon>
199
- <matcha-icon class="icon" data-name="about" name="about" size="md" color="accent"></matcha-icon>
200
- <matcha-icon class="icon" data-name="about-out" name="about-out" size="md" color="accent"></matcha-icon>
201
- <matcha-icon class="icon" data-name="copy" name="copy" size="md" color="accent"></matcha-icon>
202
- <matcha-icon class="icon" data-name="copy-out" name="copy-out" size="md" color="accent"></matcha-icon>
203
- <matcha-icon class="icon" data-name="copy-folder" name="copy-folder" size="md" color="accent"></matcha-icon>
204
- <matcha-icon class="icon" data-name="copy-folder-out" name="copy-folder-out" size="md" color="accent"></matcha-icon>
205
- <matcha-icon class="icon" data-name="new-note" name="new-note" size="md" color="accent"></matcha-icon>
206
- <matcha-icon class="icon" data-name="new-note-out" name="new-note-out" size="md" color="accent"></matcha-icon>
207
- <matcha-icon class="icon" data-name="folder-closed" name="folder-closed" size="md" color="accent"></matcha-icon>
208
- <matcha-icon class="icon" data-name="folder-opened" name="folder-opened" size="md" color="accent"></matcha-icon>
209
- <matcha-icon class="icon" data-name="note" name="note" size="md" color="accent"></matcha-icon>
210
- <matcha-icon class="icon" data-name="note-out" name="note-out" size="md" color="accent"></matcha-icon>
211
- <matcha-icon class="icon" data-name="copy-out1" name="copy-out1" size="md" color="accent"></matcha-icon>
212
- <matcha-icon class="icon" data-name="new-note-out1" name="new-note-out1" size="md" color="accent"></matcha-icon>
213
- <matcha-icon class="icon" data-name="text" name="text" size="md" color="accent"></matcha-icon>
214
- <matcha-icon class="icon" data-name="text-align-left" name="text-align-left" size="md" color="accent"></matcha-icon>
215
- <matcha-icon class="icon" data-name="text-bullet-list" name="text-bullet-list" size="md" color="accent"></matcha-icon>
216
- <matcha-icon class="icon" data-name="text-align-center" name="text-align-center" size="md" color="accent"></matcha-icon>
217
- <matcha-icon class="icon" data-name="text-indent-back" name="text-indent-back" size="md" color="accent"></matcha-icon>
218
- <matcha-icon class="icon" data-name="text-align-justify" name="text-align-justify" size="md" color="accent"></matcha-icon>
219
- <matcha-icon class="icon" data-name="text-indent-foward" name="text-indent-foward" size="md" color="accent"></matcha-icon>
220
- <matcha-icon class="icon" data-name="text-align-right" name="text-align-right" size="md" color="accent"></matcha-icon>
221
- <matcha-icon class="icon" data-name="font-bold" name="font-bold" size="md" color="accent"></matcha-icon>
222
- <matcha-icon class="icon" data-name="font-underline" name="font-underline" size="md" color="accent"></matcha-icon>
223
- <matcha-icon class="icon" data-name="font-italic" name="font-italic" size="md" color="accent"></matcha-icon>
224
- <matcha-icon class="icon" data-name="delete" name="delete" size="md" color="accent"></matcha-icon>
225
- <matcha-icon class="icon" data-name="delete-out" name="delete-out" size="md" color="accent"></matcha-icon>
226
- <matcha-icon class="icon" data-name="filter" name="filter" size="md" color="accent"></matcha-icon>
227
- <matcha-icon class="icon" data-name="filter-out" name="filter-out" size="md" color="accent"></matcha-icon>
228
- <matcha-icon class="icon" data-name="filter-bars" name="filter-bars" size="md" color="accent"></matcha-icon>
229
- <matcha-icon class="icon" data-name="fullscreen" name="fullscreen" size="md" color="accent"></matcha-icon>
230
- <matcha-icon class="icon" data-name="fullscreen-out" name="fullscreen-out" size="md" color="accent"></matcha-icon>
231
- <matcha-icon class="icon" data-name="fullscreen-exit" name="fullscreen-exit" size="md" color="accent"></matcha-icon>
232
- <matcha-icon class="icon" data-name="fullscreen-exit-out" name="fullscreen-exit-out" size="md" color="accent"></matcha-icon>
233
- <matcha-icon class="icon" data-name="settings" name="settings" size="md" color="accent"></matcha-icon>
234
- <matcha-icon class="icon" data-name="settings-out" name="settings-out" size="md" color="accent"></matcha-icon>
235
- <matcha-icon class="icon" data-name="share" name="share" size="md" color="accent"></matcha-icon>
236
- <matcha-icon class="icon" data-name="share-out" name="share-out" size="md" color="accent"></matcha-icon>
237
- <matcha-icon class="icon" data-name="toggle-off" name="toggle-off" size="md" color="accent"></matcha-icon>
238
- <matcha-icon class="icon" data-name="toggle-on" name="toggle-on" size="md" color="accent"></matcha-icon>
239
- <matcha-icon class="icon" data-name="toggle-off-out" name="toggle-off-out" size="md" color="accent"></matcha-icon>
240
- <matcha-icon class="icon" data-name="toggle-on-out" name="toggle-on-out" size="md" color="accent"></matcha-icon>
241
- <matcha-icon class="icon" data-name="visibility-on" name="visibility-on" size="md" color="accent"></matcha-icon>
242
- <matcha-icon class="icon" data-name="visibility-off" name="visibility-off" size="md" color="accent"></matcha-icon>
243
- <matcha-icon class="icon" data-name="visibility-on-out" name="visibility-on-out" size="md" color="accent"></matcha-icon>
244
- <matcha-icon class="icon" data-name="visibility-off-out" name="visibility-off-out" size="md" color="accent"></matcha-icon>
245
- <matcha-icon class="icon" data-name="logout" name="logout" size="md" color="accent"></matcha-icon>
246
- <matcha-icon class="icon" data-name="logout-out" name="logout-out" size="md" color="accent"></matcha-icon>
247
- <matcha-icon class="icon" data-name="search" name="search" size="md" color="accent"></matcha-icon>
248
- <matcha-icon class="icon" data-name="search-out" name="search-out" size="md" color="accent"></matcha-icon>
249
- <matcha-icon class="icon" data-name="notification1" name="notification1" size="md" color="accent"></matcha-icon>
250
- <matcha-icon class="icon" data-name="notification-out" name="notification-out" size="md" color="accent"></matcha-icon>
251
- <matcha-icon class="icon" data-name="password" name="password" size="md" color="accent"></matcha-icon>
252
- <matcha-icon class="icon" data-name="password-out" name="password-out" size="md" color="accent"></matcha-icon>
253
- <matcha-icon class="icon" data-name="calendar" name="calendar" size="md" color="accent"></matcha-icon>
254
- <matcha-icon class="icon" data-name="calendar-out" name="calendar-out" size="md" color="accent"></matcha-icon>
255
- <matcha-icon class="icon" data-name="menu" name="menu" size="md" color="accent"></matcha-icon>
256
- <matcha-icon class="icon" data-name="menu-out" name="menu-out" size="md" color="accent"></matcha-icon>
257
- <matcha-icon class="icon" data-name="info" name="info" size="md" color="accent"></matcha-icon>
258
- <matcha-icon class="icon" data-name="info-out" name="info-out" size="md" color="accent"></matcha-icon>
259
- <matcha-icon class="icon" data-name="leadership" name="leadership" size="md" color="accent"></matcha-icon>
260
- <matcha-icon class="icon" data-name="leadership-out" name="leadership-out" size="md" color="accent"></matcha-icon>
261
- <matcha-icon class="icon" data-name="attachment" name="attachment" size="md" color="accent"></matcha-icon>
262
- <matcha-icon class="icon" data-name="attachment-out" name="attachment-out" size="md" color="accent"></matcha-icon>
263
- <matcha-icon class="icon" data-name="send" name="send" size="md" color="accent"></matcha-icon>
264
- <matcha-icon class="icon" data-name="action_sign_error" name="action_sign_error" size="md" color="accent"></matcha-icon>
265
- <matcha-icon class="icon" data-name="action_close" name="action_close" size="md" color="accent"></matcha-icon>
266
- <matcha-icon class="icon" data-name="action_sign_success" name="action_sign_success" size="md" color="accent"></matcha-icon>
267
- <matcha-icon class="icon" data-name="action_done" name="action_done" size="md" color="accent"></matcha-icon>
268
- <matcha-icon class="icon" data-name="action_sign_warning" name="action_sign_warning" size="md" color="accent"></matcha-icon>
269
- <matcha-icon class="icon" data-name="action_sign_warning-out" name="action_sign_warning-out" size="md" color="accent"></matcha-icon>
270
- <matcha-icon class="icon" data-name="feedback" name="feedback" size="md" color="accent"></matcha-icon>
271
- <matcha-icon class="icon" data-name="feedback-out" name="feedback-out" size="md" color="accent"></matcha-icon>
272
- <matcha-icon class="icon" data-name="action_get_up" name="action_get_up" size="md" color="accent"></matcha-icon>
273
- <matcha-icon class="icon" data-name="action_get_down" name="action_get_down" size="md" color="accent"></matcha-icon>
274
- <matcha-icon class="icon" data-name="action_move" name="action_move" size="md" color="accent"></matcha-icon>
275
- <matcha-icon class="icon" data-name="policy" name="policy" size="md" color="accent"></matcha-icon>
276
- <matcha-icon class="icon" data-name="action_key" name="action_key" size="md" color="accent"></matcha-icon>
277
- <matcha-icon class="icon" data-name="action_sign_info" name="action_sign_info" size="md" color="accent"></matcha-icon>
278
- <matcha-icon class="icon" data-name="action_sign_info-out" name="action_sign_info-out" size="md" color="accent"></matcha-icon>
279
- <matcha-icon class="icon" data-name="qr-code-no-border" name="qr-code-no-border" size="md" color="accent"></matcha-icon>
280
- <matcha-icon class="icon" data-name="qr-code" name="qr-code" size="md" color="accent"></matcha-icon>
281
- <matcha-icon class="icon" data-name="drag-dots" name="drag-dots" size="md" color="accent"></matcha-icon>
282
- <matcha-icon class="icon" data-name="drag-bars" name="drag-bars" size="md" color="accent"></matcha-icon>
283
- <matcha-icon class="icon" data-name="action_arrow_down" name="action_arrow_down" size="md" color="accent"></matcha-icon>
284
- <matcha-icon class="icon" data-name="action_arrow_left" name="action_arrow_left" size="md" color="accent"></matcha-icon>
285
- <matcha-icon class="icon" data-name="action_arrow_up" name="action_arrow_up" size="md" color="accent"></matcha-icon>
286
- <matcha-icon class="icon" data-name="action_arrow_right" name="action_arrow_right" size="md" color="accent"></matcha-icon>
287
- <matcha-icon class="icon" data-name="action_plus" name="action_plus" size="md" color="accent"></matcha-icon>
288
- <matcha-icon class="icon" data-name="minus" name="minus" size="md" color="accent"></matcha-icon>
289
- <matcha-icon class="icon" data-name="action_reload" name="action_reload" size="md" color="accent"></matcha-icon>
290
- <matcha-icon class="icon" data-name="transfer" name="transfer" size="md" color="accent"></matcha-icon>
291
- <matcha-icon class="icon" data-name="cost-center" name="cost-center" size="md" color="accent"></matcha-icon>
292
- <matcha-icon class="icon" data-name="expand" name="expand" size="md" color="accent"></matcha-icon>
293
- <matcha-icon class="icon" data-name="collapse" name="collapse" size="md" color="accent"></matcha-icon>
294
- <matcha-icon class="icon" data-name="action_list" name="action_list" size="md" color="accent"></matcha-icon>
295
- <matcha-icon class="icon" data-name="action_options" name="action_options" size="md" color="accent"></matcha-icon>
296
- <matcha-icon class="icon" data-name="historic" name="historic" size="md" color="accent"></matcha-icon>
297
- <matcha-icon class="icon" data-name="plugin" name="plugin" size="md" color="accent"></matcha-icon>
298
- <matcha-icon class="icon" data-name="modules" name="modules" size="md" color="accent"></matcha-icon>
299
- <matcha-icon class="icon" data-name="platform" name="platform" size="md" color="accent"></matcha-icon>
300
- <matcha-icon class="icon" data-name="barcode" name="barcode" size="md" color="accent"></matcha-icon>
301
- <matcha-icon class="icon" data-name="barcode-out" name="barcode-out" size="md" color="accent"></matcha-icon>
302
- <matcha-icon class="icon" data-name="camera" name="camera" size="md" color="accent"></matcha-icon>
303
- <matcha-icon class="icon" data-name="camera-out" name="camera-out" size="md" color="accent"></matcha-icon>
304
- <matcha-icon class="icon" data-name="cast" name="cast" size="md" color="accent"></matcha-icon>
305
- <matcha-icon class="icon" data-name="cast-out" name="cast-out" size="md" color="accent"></matcha-icon>
306
- <matcha-icon class="icon" data-name="location" name="location" size="md" color="accent"></matcha-icon>
307
- <matcha-icon class="icon" data-name="location-out" name="location-out" size="md" color="accent"></matcha-icon>
308
- <matcha-icon class="icon" data-name="clock" name="clock" size="md" color="accent"></matcha-icon>
309
- <matcha-icon class="icon" data-name="clock-out" name="clock-out" size="md" color="accent"></matcha-icon>
310
- <matcha-icon class="icon" data-name="card" name="card" size="md" color="accent"></matcha-icon>
311
- <matcha-icon class="icon" data-name="card-out" name="card-out" size="md" color="accent"></matcha-icon>
312
- <matcha-icon class="icon" data-name="add-card" name="add-card" size="md" color="accent"></matcha-icon>
313
- <matcha-icon class="icon" data-name="update-balance" name="update-balance" size="md" color="accent"></matcha-icon>
314
- <matcha-icon class="icon" data-name="cash" name="cash" size="md" color="accent"></matcha-icon>
315
- <matcha-icon class="icon" data-name="cash-out" name="cash-out" size="md" color="accent"></matcha-icon>
316
- <matcha-icon class="icon" data-name="pin" name="pin" size="md" color="accent"></matcha-icon>
317
- <matcha-icon class="icon" data-name="pin-out" name="pin-out" size="md" color="accent"></matcha-icon>
318
- <matcha-icon class="icon" data-name="flag" name="flag" size="md" color="accent"></matcha-icon>
319
- <matcha-icon class="icon" data-name="flag-out" name="flag-out" size="md" color="accent"></matcha-icon>
320
- <matcha-icon class="icon" data-name="category1" name="category1" size="md" color="accent"></matcha-icon>
321
- <matcha-icon class="icon" data-name="category-out" name="category-out" size="md" color="accent"></matcha-icon>
322
- <matcha-icon class="icon" data-name="media" name="media" size="md" color="accent"></matcha-icon>
323
- <matcha-icon class="icon" data-name="media-out" name="media-out" size="md" color="accent"></matcha-icon>
324
- <matcha-icon class="icon" data-name="wallet" name="wallet" size="md" color="accent"></matcha-icon>
325
- <matcha-icon class="icon" data-name="wallet-out" name="wallet-out" size="md" color="accent"></matcha-icon>
326
- <matcha-icon class="icon" data-name="management" name="management" size="md" color="accent"></matcha-icon>
327
- <matcha-icon class="icon" data-name="business-unit" name="business-unit" size="md" color="accent"></matcha-icon>
328
- <matcha-icon class="icon" data-name="receipt" name="receipt" size="md" color="accent"></matcha-icon>
329
- <matcha-icon class="icon" data-name="receipt-out" name="receipt-out" size="md" color="accent"></matcha-icon>
330
- <matcha-icon class="icon" data-name="circle-email" name="circle-email" size="md" color="accent"></matcha-icon>
331
- <matcha-icon class="icon" data-name="email" name="email" size="md" color="accent"></matcha-icon>
332
- <matcha-icon class="icon" data-name="email-out" name="email-out" size="md" color="accent"></matcha-icon>
333
- <matcha-icon class="icon" data-name="pix" name="pix" size="md" color="accent"></matcha-icon>
334
- <matcha-icon class="icon" data-name="pix-out" name="pix-out" size="md" color="accent"></matcha-icon>
335
- <matcha-icon class="icon" data-name="location-cell" name="location-cell" size="md" color="accent"></matcha-icon>
336
- <matcha-icon class="icon" data-name="location-cell-out" name="location-cell-out" size="md" color="accent"></matcha-icon>
337
- <matcha-icon class="icon" data-name="image-rights" name="image-rights" size="md" color="accent"></matcha-icon>
338
- <matcha-icon class="icon" data-name="image-rights-allowed" name="image-rights-allowed" size="md" color="accent"></matcha-icon>
339
- <matcha-icon class="icon" data-name="forbidden-passage" name="forbidden-passage" size="md" color="accent"></matcha-icon>
340
- <matcha-icon class="icon" data-name="allowed-passage" name="allowed-passage" size="md" color="accent"></matcha-icon>
341
- <matcha-icon class="icon" data-name="food-restriction" name="food-restriction" size="md" color="accent"></matcha-icon>
342
- <matcha-icon class="icon" data-name="no-food-restriction" name="no-food-restriction" size="md" color="accent"></matcha-icon>
343
- <matcha-icon class="icon" data-name="allergy" name="allergy" size="md" color="accent"></matcha-icon>
344
- <matcha-icon class="icon" data-name="special-need" name="special-need" size="md" color="accent"></matcha-icon>
345
- <matcha-icon class="icon" data-name="map" name="map" size="md" color="accent"></matcha-icon>
346
- <matcha-icon class="icon" data-name="apple" name="apple" size="md" color="accent"></matcha-icon>
347
- <matcha-icon class="icon" data-name="number" name="number" size="md" color="accent"></matcha-icon>
348
- <matcha-icon class="icon" data-name="flow" name="flow" size="md" color="accent"></matcha-icon>
349
- <matcha-icon class="icon" data-name="ibf-church" name="ibf-church" size="md" color="accent"></matcha-icon>
350
- <matcha-icon class="icon" data-name="process-barcode" name="process-barcode" size="md" color="accent"></matcha-icon>
351
- <matcha-icon class="icon" data-name="process-card" name="process-card" size="md" color="accent"></matcha-icon>
352
- <matcha-icon class="icon" data-name="box-opened" name="box-opened" size="md" color="accent"></matcha-icon>
353
- <matcha-icon class="icon" data-name="parent" name="parent" size="md" color="accent"></matcha-icon>
354
- <matcha-icon class="icon" data-name="kid-girl" name="kid-girl" size="md" color="accent"></matcha-icon>
355
- <matcha-icon class="icon" data-name="kid-boy" name="kid-boy" size="md" color="accent"></matcha-icon>
356
- <matcha-icon class="icon" data-name="people" name="people" size="md" color="accent"></matcha-icon>
357
- <matcha-icon class="icon" data-name="circle-code" name="circle-code" size="md" color="accent"></matcha-icon>
358
- <matcha-icon class="icon" data-name="circle-facebook" name="circle-facebook" size="md" color="accent"></matcha-icon>
359
- <matcha-icon class="icon" data-name="facebook" name="facebook" size="md" color="accent"></matcha-icon>
360
- <matcha-icon class="icon" data-name="circle-instagram" name="circle-instagram" size="md" color="accent"></matcha-icon>
361
- <matcha-icon class="icon" data-name="instagram" name="instagram" size="md" color="accent"></matcha-icon>
362
- <matcha-icon class="icon" data-name="soundcloud" name="soundcloud" size="md" color="accent"></matcha-icon>
363
- <matcha-icon class="icon" data-name="circle-soundcloud" name="circle-soundcloud" size="md" color="accent"></matcha-icon>
364
- <matcha-icon class="icon" data-name="spotify" name="spotify" size="md" color="accent"></matcha-icon>
365
- <matcha-icon class="icon" data-name="circle-spotify" name="circle-spotify" size="md" color="accent"></matcha-icon>
366
- <matcha-icon class="icon" data-name="circle-telegram" name="circle-telegram" size="md" color="accent"></matcha-icon>
367
- <matcha-icon class="icon" data-name="telegram" name="telegram" size="md" color="accent"></matcha-icon>
368
- <matcha-icon class="icon" data-name="circle-tiktok" name="circle-tiktok" size="md" color="accent"></matcha-icon>
369
- <matcha-icon class="icon" data-name="tiktok" name="tiktok" size="md" color="accent"></matcha-icon>
370
- <matcha-icon class="icon" data-name="circle-twitter" name="circle-twitter" size="md" color="accent"></matcha-icon>
371
- <matcha-icon class="icon" data-name="twitter" name="twitter" size="md" color="accent"></matcha-icon>
372
- <matcha-icon class="icon" data-name="circle-whatsapp" name="circle-whatsapp" size="md" color="accent"></matcha-icon>
373
- <matcha-icon class="icon" data-name="whatsapp" name="whatsapp" size="md" color="accent"></matcha-icon>
374
- <matcha-icon class="icon" data-name="circle-youtube" name="circle-youtube" size="md" color="accent"></matcha-icon>
375
- <matcha-icon class="icon" data-name="youtube" name="youtube" size="md" color="accent"></matcha-icon>
376
- <matcha-icon class="icon" data-name="circle-share" name="circle-share" size="md" color="accent"></matcha-icon>
377
- <matcha-icon class="icon" data-name="share1" name="share1" size="md" color="accent"></matcha-icon>
378
- <matcha-icon class="icon" data-name="opened-lock" name="opened-lock" size="md" color="accent"></matcha-icon>
379
- <matcha-icon class="icon" data-name="flickr" name="flickr" size="md" color="accent"></matcha-icon>
380
- <matcha-icon class="icon" data-name="circle-flickr" name="circle-flickr" size="md" color="accent"></matcha-icon>
381
- <matcha-icon class="icon" data-name="cookie" name="cookie" size="md" color="accent"></matcha-icon>
382
- <matcha-icon class="icon" data-name="cookie-out" name="cookie-out" size="md" color="accent"></matcha-icon>
383
- <matcha-icon class="icon" data-name="cookie-out-2" name="cookie-out-2" size="md" color="accent"></matcha-icon>
384
- <matcha-icon class="icon" data-name="emoji-happy" name="emoji-happy" size="md" color="accent"></matcha-icon>
385
- <matcha-icon class="icon" data-name="emoji-happy-out" name="emoji-happy-out" size="md" color="accent"></matcha-icon>
386
- <matcha-icon class="icon" data-name="emoji-prosperous" name="emoji-prosperous" size="md" color="accent"></matcha-icon>
387
- <matcha-icon class="icon" data-name="emoji-prosperous-out" name="emoji-prosperous-out" size="md" color="accent"></matcha-icon>
388
- <matcha-icon class="icon" data-name="emoji-blessed" name="emoji-blessed" size="md" color="accent"></matcha-icon>
389
- <matcha-icon class="icon" data-name="emoji-blessed-out" name="emoji-blessed-out" size="md" color="accent"></matcha-icon>
390
- <matcha-icon class="icon" data-name="emoji-sick" name="emoji-sick" size="md" color="accent"></matcha-icon>
391
- <matcha-icon class="icon" data-name="emoji-sick-out" name="emoji-sick-out" size="md" color="accent"></matcha-icon>
392
- <matcha-icon class="icon" data-name="emoji-alone" name="emoji-alone" size="md" color="accent"></matcha-icon>
393
- <matcha-icon class="icon" data-name="emoji-alone-out" name="emoji-alone-out" size="md" color="accent"></matcha-icon>
394
- <matcha-icon class="icon" data-name="emoji-sad" name="emoji-sad" size="md" color="accent"></matcha-icon>
395
- <matcha-icon class="icon" data-name="emoji-sad-out" name="emoji-sad-out" size="md" color="accent"></matcha-icon>
396
- <matcha-icon class="icon" data-name="emoji-faithless" name="emoji-faithless" size="md" color="accent"></matcha-icon>
397
- <matcha-icon class="icon" data-name="emoji-faithless-out" name="emoji-faithless-out" size="md" color="accent"></matcha-icon>
398
- <matcha-icon class="icon" data-name="emoji-careful" name="emoji-careful" size="md" color="accent"></matcha-icon>
399
- <matcha-icon class="icon" data-name="emoji-careful-out" name="emoji-careful-out" size="md" color="accent"></matcha-icon>
400
- <matcha-icon class="icon" data-name="emoji-distressed" name="emoji-distressed" size="md" color="accent"></matcha-icon>
401
- <matcha-icon class="icon" data-name="emoji-distressed-out" name="emoji-distressed-out" size="md" color="accent"></matcha-icon>
402
- <matcha-icon class="icon" data-name="rocket" name="rocket" size="md" color="accent"></matcha-icon>
403
- <matcha-icon class="icon" data-name="rocket-out" name="rocket-out" size="md" color="accent"></matcha-icon>
404
- <matcha-icon class="icon" data-name="flickr-02" name="flickr-02" size="md" color="accent"></matcha-icon>
405
- <matcha-icon class="icon" data-name="flickr-04" name="flickr-04" size="md" color="accent"></matcha-icon>
406
- <matcha-icon class="icon" data-name="nu" name="nu" size="md" color="accent"></matcha-icon>
407
- <matcha-icon class="icon" data-name="bradesco" name="bradesco" size="md" color="accent"></matcha-icon>
408
- <matcha-icon class="icon" data-name="santander" name="santander" size="md" color="accent"></matcha-icon>
409
- <matcha-icon class="icon" data-name="bb" name="bb" size="md" color="accent"></matcha-icon>
410
- <matcha-icon class="icon" data-name="c6-color" name="c6-color" size="md" color="accent"></matcha-icon>
411
- <matcha-icon class="icon" data-name="itau" name="itau" size="md" color="accent"></matcha-icon>
412
- <matcha-icon class="icon" data-name="caixa" name="caixa" size="md" color="accent"></matcha-icon>
63
+ placeholder="Pesquisar ícones..."
64
+ onKeyUp="filterIcons()"/>
65
+ </mat-form-field>
66
+ <div class="bb-2 border-color-disabled mb-16"></div>
67
+ <div class="grid-sm-12 gap-8">
68
+ <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>
69
+ <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>
70
+ <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>
71
+ <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>
72
+ <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>
73
+ <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>
74
+ <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>
75
+ <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>
76
+ <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>
77
+ <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>
78
+ <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>
79
+ <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>
80
+ <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>
81
+ <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>
82
+ <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>
83
+ <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>
84
+ <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>
85
+ <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>
86
+ <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>
87
+ <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>
88
+ <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>
89
+ <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>
90
+ <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>
91
+ <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>
92
+ <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>
93
+ <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>
94
+ <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>
95
+ <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>
96
+ <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>
97
+ <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>
98
+ <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>
99
+ <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>
100
+ <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>
101
+ <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>
102
+ <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>
103
+ <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>
104
+ <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>
105
+ <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>
106
+ <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>
107
+ <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>
108
+ <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>
109
+ <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>
110
+ <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>
111
+ <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>
112
+ <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>
113
+ <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>
114
+ <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>
115
+ <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>
116
+ <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>
117
+ <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>
118
+ <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>
119
+ <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>
120
+ <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>
121
+ <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>
122
+ <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>
123
+ <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>
124
+ <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>
125
+ <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>
126
+ <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>
127
+ <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>
128
+ <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>
129
+ <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>
130
+ <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>
131
+ <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>
132
+ <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>
133
+ <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>
134
+ <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>
135
+ <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>
136
+ <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>
137
+ <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>
138
+ <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>
139
+ <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>
140
+ <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>
141
+ <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>
142
+ <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>
143
+ <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>
144
+ <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>
145
+ <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>
146
+ <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>
147
+ <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>
148
+ <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>
149
+ <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>
150
+ <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>
151
+ <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>
152
+ <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>
153
+ <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>
154
+ <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>
155
+ <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>
156
+ <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>
157
+ <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>
158
+ <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>
159
+ <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>
160
+ <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>
161
+ <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>
162
+ <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>
163
+ <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>
164
+ <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>
165
+ <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>
166
+ <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>
167
+ <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>
168
+ <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>
169
+ <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>
170
+ <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>
171
+ <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>
172
+ <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>
173
+ <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>
174
+ <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>
175
+ <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>
176
+ <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>
177
+ <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>
178
+ <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>
179
+ <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>
180
+ <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>
181
+ <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>
182
+ <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>
183
+ <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>
184
+ <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>
185
+ <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>
186
+ <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>
187
+ <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>
188
+ <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>
189
+ <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>
190
+ <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>
191
+ <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>
192
+ <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>
193
+ <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>
194
+ <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>
195
+ <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>
196
+ <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>
197
+ <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>
198
+ <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>
199
+ <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>
200
+ <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>
201
+ <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>
202
+ <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>
203
+ <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>
204
+ <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>
205
+ <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>
206
+ <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>
207
+ <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>
208
+ <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>
209
+ <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>
210
+ <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>
211
+ <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>
212
+ <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>
213
+ <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>
214
+ <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>
215
+ <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>
216
+ <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>
217
+ <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>
218
+ <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>
219
+ <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>
220
+ <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>
221
+ <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>
222
+ <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>
223
+ <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>
224
+ <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>
225
+ <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>
226
+ <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>
227
+ <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>
228
+ <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>
229
+ <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>
230
+ <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>
231
+ <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>
232
+ <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>
233
+ <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>
234
+ <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>
235
+ <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>
236
+ <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>
237
+ <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>
238
+ <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>
239
+ <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>
240
+ <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>
241
+ <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>
242
+ <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>
243
+ <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>
244
+ <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>
245
+ <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>
246
+ <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>
247
+ <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>
248
+ <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>
249
+ <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>
250
+ <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>
251
+ <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>
252
+ <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>
253
+ <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>
254
+ <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>
255
+ <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>
256
+ <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>
257
+ <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>
258
+ <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>
259
+ <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>
260
+ <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>
261
+ <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>
262
+ <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>
263
+ <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>
264
+ <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>
265
+ <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>
266
+ <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>
267
+ <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>
268
+ <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>
269
+ <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>
270
+ <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>
271
+ <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>
272
+ <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>
273
+ <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>
274
+ <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>
275
+ <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>
276
+ <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>
277
+ <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>
278
+ <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>
279
+ <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>
280
+ <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>
281
+ <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>
282
+ <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>
283
+ <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>
284
+ <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>
285
+ <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>
286
+ <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>
287
+ <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>
288
+ <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>
289
+ <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>
290
+ <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>
291
+ <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>
292
+ <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>
293
+ <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>
294
+ <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>
295
+ <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>
296
+ <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>
297
+ <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>
298
+ <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>
299
+ <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>
300
+ <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>
301
+ <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>
302
+ <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>
303
+ <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>
304
+ <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>
305
+ <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>
306
+ <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>
307
+ <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>
308
+ <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>
309
+ <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>
310
+ <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>
311
+ <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>
312
+ <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>
313
+ <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>
314
+ <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>
315
+ <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>
316
+ <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>
317
+ <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>
318
+ <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>
319
+ <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>
320
+ <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>
321
+ <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>
322
+ <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>
323
+ <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>
324
+ <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>
325
+ <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>
326
+ <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>
327
+ <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>
328
+ <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>
329
+ <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>
330
+ <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>
331
+ <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>
332
+ <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>
333
+ <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>
334
+ <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>
335
+ <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>
336
+ <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>
337
+ <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>
338
+ <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>
339
+ <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>
340
+ <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>
341
+ <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>
342
+ <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>
343
+ <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>
344
+ <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>
345
+ <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>
346
+ <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>
347
+ <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>
348
+ <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>
349
+ <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>
350
+ <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>
351
+ <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>
352
+ <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>
353
+ <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>
354
+ <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>
355
+ <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>
356
+ <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>
357
+ <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>
358
+ <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>
359
+ <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>
360
+ <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>
361
+ <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>
362
+ <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>
363
+ <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>
364
+ <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>
365
+ <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>
366
+ <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>
367
+ <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>
368
+ <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>
369
+ <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>
370
+ <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>
371
+ <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>
372
+ <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>
373
+ <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>
374
+ <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>
375
+ <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>
376
+ <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>
377
+ <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>
378
+ <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>
379
+ <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>
380
+ <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>
381
+ <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>
382
+ <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>
383
+ <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>
384
+ <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>
385
+ <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>
386
+ <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>
387
+ <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>
388
+ <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>
389
+ <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>
390
+ <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>
391
+ <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>
392
+ <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>
393
+ <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>
394
+ <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>
395
+ <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>
396
+ <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>
397
+ <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>
398
+ <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>
399
+ <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>
400
+ <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>
401
+ <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>
402
+ <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>
403
+ <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>
404
+ <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>
405
+ <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>
406
+ <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>
407
+ <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>
408
+ <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>
409
+ <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>
410
+ <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>
411
+ <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>
412
+ <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>
413
+ <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>
414
+ <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>
415
+ <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>
416
+ <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>
417
+ <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>
418
+ <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>
419
+ <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>
413
420
  </div>`,
414
421
  }),
415
422
  name: 'Icon List',