353 lines
15 KiB
Plaintext
353 lines
15 KiB
Plaintext
@page "/doc/all-icons"
|
|
|
|
@*
|
|
* dbMango
|
|
*
|
|
* Copyright 2025 Deutsche Bank AG
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*
|
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
* you may not use this file except in compliance with the License.
|
|
* You may obtain a copy of the License at
|
|
*
|
|
* http://www.apache.org/licenses/LICENSE-2.0
|
|
*
|
|
* Unless required by applicable law or agreed to in writing, software
|
|
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
* See the License for the specific language governing permissions and
|
|
* limitations under the License.
|
|
*@
|
|
|
|
|
|
<h3>All Icons</h3>
|
|
|
|
<FormItemText Icon="icon-search-sm" @bind-Value="_searchText" Placeholder="Search icons..." Name="Search" />
|
|
@* <input @bind="searchText" @bind:event="oninput" placeholder="Search icons..." style="margin-bottom:1.5rem; width: 20rem; padding: 0.5rem; font-size: 1rem;" /> *@
|
|
|
|
<div style="display: flex; flex-wrap: wrap; gap: 1.5rem;">
|
|
@foreach (var icon in FilteredIcons.OrderBy(x => x.DisplayName))
|
|
{
|
|
<div style="width: 8rem; display: flex; flex-direction: column; align-items: center; margin-bottom: 1.5rem;">
|
|
<span class="ui-icon-font @icon.ClassName" style="font-size:1rem; margin-bottom:1rem;"></span>
|
|
<span style="font-size:0.8rem; text-align:center; word-break:break-all;">@icon.DisplayName</span>
|
|
</div>
|
|
}
|
|
</div>
|
|
|
|
@code {
|
|
// List of icon class names and their display names
|
|
private readonly List<(string ClassName, string DisplayName)> _icons =
|
|
[
|
|
("icon-alarm-clock-sm", "alarm-clock-sm"),
|
|
("icon-cog-outline-sm", "cog-outline-sm"),
|
|
("icon-ellipsis-sm", "ellipsis-sm"),
|
|
("icon-image-sm", "image-sm"),
|
|
("icon-mouse-left-sm", "mouse-left-sm"),
|
|
("icon-single-chevron-down-sm", "single-chevron-down-sm"),
|
|
("icon-single-chevron-right-sm", "single-chevron-right-sm"),
|
|
("icon-single-chevron-up-sm", "single-chevron-up-sm"),
|
|
("icon-star-half-sm", "star-half-sm"),
|
|
("icon-undo-sm", "undo-sm"),
|
|
("icon-unlock-outline-sm", "unlock-outline-sm"),
|
|
("icon-unlock-sm", "unlock-sm"),
|
|
("icon-unlock-wide-sm", "unlock-wide-sm"),
|
|
("icon-wrench-outline-sm", "wrench-outline-sm"),
|
|
("icon-ab-logo-sm", "ab-logo-sm"),
|
|
("icon-calendar-sm", "calendar-sm"),
|
|
("icon-caret-down-sm", "caret-down-sm"),
|
|
("icon-caret-left-sm", "caret-left-sm"),
|
|
("icon-caret-right-sm", "caret-right-sm"),
|
|
("icon-caret-up-sm", "caret-up-sm"),
|
|
("icon-cascade-sm", "cascade-sm"),
|
|
("icon-chat-outline-sm", "chat-outline-sm"),
|
|
("icon-chat-sm", "chat-sm"),
|
|
("icon-checkmark-sm", "checkmark-sm"),
|
|
("icon-clone-sm", "clone-sm"),
|
|
("icon-close-circle-sm", "close-circle-sm"),
|
|
("icon-close-sm", "close-sm"),
|
|
("icon-cog-sm", "cog-sm"),
|
|
("icon-document-blank-sm", "document-blank-sm"),
|
|
("icon-document-download-sm", "document-download-sm"),
|
|
("icon-document-sm", "document-sm"),
|
|
("icon-document-upload-sm", "document-upload-sm"),
|
|
("icon-download-selected-sm", "download-selected-sm"),
|
|
("icon-download-sm", "download-sm"),
|
|
("icon-flip-sm", "flip-sm"),
|
|
("icon-folder-outline-sm", "folder-outline-sm"),
|
|
("icon-folder-sm", "folder-sm"),
|
|
("icon-layers-sm", "layers-sm"),
|
|
("icon-mobile-sm", "mobile-sm"),
|
|
("icon-pencil-sm", "pencil-sm"),
|
|
("icon-play-sm", "play-sm"),
|
|
("icon-print-sm", "print-sm"),
|
|
("icon-save-outline-sm", "save-outline-sm"),
|
|
("icon-save-sm", "save-sm"),
|
|
("icon-search-sm", "search-sm"),
|
|
("icon-single-chevron-left-sm", "single-chevron-left-sm"),
|
|
("icon-trash-sm", "trash-sm"),
|
|
("icon-user-db-outline-sm", "user-db-outline-sm"),
|
|
("icon-user-db-sm", "user-db-sm"),
|
|
("icon-user-details-outline-sm", "user-details-outline-sm"),
|
|
("icon-user-details-sm", "user-details-sm"),
|
|
("icon-user-group-outline-sm", "user-group-outline-sm"),
|
|
("icon-user-group-sm", "user-group-sm"),
|
|
("icon-wrench-sm", "wrench-sm"),
|
|
("icon-arrow-down-sm", "arrow-down-sm"),
|
|
("icon-arrow-left-sm", "arrow-left-sm"),
|
|
("icon-arrow-right-sm", "arrow-right-sm"),
|
|
("icon-arrow-up-sm", "arrow-up-sm"),
|
|
("icon-bell-outline-sm", "bell-outline-sm"),
|
|
("icon-bell-sm", "bell-sm"),
|
|
("icon-chain-sm", "chain-sm"),
|
|
("icon-chart-area-sm", "chart-area-sm"),
|
|
("icon-chart-bar-sm", "chart-bar-sm"),
|
|
("icon-chart-complex-line-sm", "chart-complex-line-sm"),
|
|
("icon-chart-curve-sm", "chart-curve-sm"),
|
|
("icon-chart-simple-line-sm", "chart-simple-line-sm"),
|
|
("icon-clock-sm", "clock-sm"),
|
|
("icon-funnel-clear-sm", "funnel-clear-sm"),
|
|
("icon-funnel-sm", "funnel-sm"),
|
|
("icon-globe-sm", "globe-sm"),
|
|
("icon-grid-sm", "grid-sm"),
|
|
("icon-join-sm", "join-sm"),
|
|
("icon-list-sm", "list-sm"),
|
|
("icon-lock-sm", "lock-sm"),
|
|
("icon-merge-sm", "merge-sm"),
|
|
("icon-message-outline-sm", "message-outline-sm"),
|
|
("icon-message-sm", "message-sm"),
|
|
("icon-moon-sm", "moon-sm"),
|
|
("icon-pause-sm", "pause-sm"),
|
|
("icon-phone-directory-sm", "phone-directory-sm"),
|
|
("icon-phone-sm", "phone-sm"),
|
|
("icon-plug-disconnected-sm", "plug-disconnected-sm"),
|
|
("icon-print-outline-sm", "print-outline-sm"),
|
|
("icon-reply-outline-sm", "reply-outline-sm"),
|
|
("icon-reply-sm", "reply-sm"),
|
|
("icon-revert-sm", "revert-sm"),
|
|
("icon-star-outline-sm", "star-outline-sm"),
|
|
("icon-star-sm", "star-sm"),
|
|
("icon-tos-sm", "tos-sm"),
|
|
("icon-window-add-sm", "window-add-sm"),
|
|
("icon-zoom-in-sm", "zoom-in-sm"),
|
|
("icon-zoom-out-sm", "zoom-out-sm"),
|
|
("icon-annotate-sm", "annotate-sm"),
|
|
("icon-attach-sm", "attach-sm"),
|
|
("icon-bezir-curve-sm", "bezir-curve-sm"),
|
|
("icon-contacts-cog-sm", "contacts-cog-sm"),
|
|
("icon-context-help-outline-sm", "context-help-outline-sm"),
|
|
("icon-context-help-sm", "context-help-sm"),
|
|
("icon-context-info-outline-sm", "context-info-outline-sm"),
|
|
("icon-context-info-sm", "context-info-sm"),
|
|
("icon-duplicate-document-sm", "duplicate-document-sm"),
|
|
("icon-excel-sm", "excel-sm"),
|
|
("icon-exit-sm", "exit-sm"),
|
|
("icon-first-aid-sm", "first-aid-sm"),
|
|
("icon-forward-document-sm", "forward-document-sm"),
|
|
("icon-hide-sm", "hide-sm"),
|
|
("icon-link-sm", "link-sm"),
|
|
("icon-mail-outline-sm", "mail-outline-sm"),
|
|
("icon-mail-sm", "mail-sm"),
|
|
("icon-menu-sm", "menu-sm"),
|
|
("icon-pc-screen-sm", "pc-screen-sm"),
|
|
("icon-plus-sm", "plus-sm"),
|
|
("icon-reload-sm", "reload-sm"),
|
|
("icon-running-man-sm", "running-man-sm"),
|
|
("icon-upload-selected-sm", "upload-selected-sm"),
|
|
("icon-upload-sm", "upload-sm"),
|
|
("icon-user-outline-sm", "user-outline-sm"),
|
|
("icon-user-sm", "user-sm"),
|
|
("icon-view-sm", "view-sm"),
|
|
("icon-warning-circle-sm", "warning-circle-sm"),
|
|
("icon-warning-triangle-sm", "warning-triangle-sm"),
|
|
("icon-weight-equal-sm", "weight-equal-sm"),
|
|
("icon-weight-not-equal-sm", "weight-not-equal-sm"),
|
|
// Large icons
|
|
("icon-ab-logo", "ab-logo"),
|
|
("icon-adobe-reader", "adobe-reader"),
|
|
("icon-alarm-clock", "alarm-clock"),
|
|
("icon-annotate", "annotate"),
|
|
("icon-arrow-down", "arrow-down"),
|
|
("icon-arrow-enter", "arrow-enter"),
|
|
("icon-arrow-left", "arrow-left"),
|
|
("icon-arrow-right", "arrow-right"),
|
|
("icon-arrow-up", "arrow-up"),
|
|
("icon-attach", "attach"),
|
|
("icon-bell", "bell"),
|
|
("icon-bell-outline", "bell-outline"),
|
|
("icon-bezir-curve", "bezir-curve"),
|
|
("icon-boxing-glove", "boxing-glove"),
|
|
("icon-calendar", "calendar"),
|
|
("icon-caret-down", "caret-down"),
|
|
("icon-caret-left", "caret-left"),
|
|
("icon-caret-right", "caret-right"),
|
|
("icon-caret-up", "caret-up"),
|
|
("icon-caret-up-down", "caret-up-down"),
|
|
("icon-cascade", "cascade"),
|
|
("icon-chain", "chain"),
|
|
("icon-chart-area", "chart-area"),
|
|
("icon-chart-bar", "chart-bar"),
|
|
("icon-chart-complex-line", "chart-complex-line"),
|
|
("icon-chart-curve", "chart-curve"),
|
|
("icon-chart-simple-line", "chart-simple-line"),
|
|
("icon-chat", "chat"),
|
|
("icon-chat-outline", "chat-outline"),
|
|
("icon-checkmark", "checkmark"),
|
|
("icon-clock", "clock"),
|
|
("icon-clone", "clone"),
|
|
("icon-close", "close"),
|
|
("icon-close-circle", "close-circle"),
|
|
("icon-cog", "cog"),
|
|
("icon-cog-outline", "cog-outline"),
|
|
("icon-contacts-cog", "contacts-cog"),
|
|
("icon-context-help", "context-help"),
|
|
("icon-context-help-outline", "context-help-outline"),
|
|
("icon-context-info", "context-info"),
|
|
("icon-context-info-outline", "context-info-outline"),
|
|
("icon-db-logo", "db-logo"),
|
|
("icon-document", "document"),
|
|
("icon-document-add", "document-add"),
|
|
("icon-document-blank", "document-blank"),
|
|
("icon-document-code", "document-code"),
|
|
("icon-document-download", "document-download"),
|
|
("icon-document-forward", "document-forward"),
|
|
("icon-document-upload", "document-upload"),
|
|
("icon-double-chevron-down", "double-chevron-down"),
|
|
("icon-double-chevron-left", "double-chevron-left"),
|
|
("icon-double-chevron-right", "double-chevron-right"),
|
|
("icon-double-chevron-up", "double-chevron-up"),
|
|
("icon-download", "download"),
|
|
("icon-download-selected", "download-selected"),
|
|
("icon-drawer", "drawer"),
|
|
("icon-duplicate-document", "duplicate-document"),
|
|
("icon-ellipsis", "ellipsis"),
|
|
("icon-envelope", "envelope"),
|
|
("icon-envelope-outline", "envelope-outline"),
|
|
("icon-excel", "excel"),
|
|
("icon-exit", "exit"),
|
|
("icon-first-aid", "first-aid"),
|
|
("icon-flag", "flag"),
|
|
("icon-flag-outline", "flag-outline"),
|
|
("icon-flame", "flame"),
|
|
("icon-flip", "flip"),
|
|
("icon-folder", "folder"),
|
|
("icon-folder-add", "folder-add"),
|
|
("icon-folder-add-outline", "folder-add-outline"),
|
|
("icon-folder-open", "folder-open"),
|
|
("icon-folder-open-outline", "folder-open-outline"),
|
|
("icon-folder-outline", "folder-outline"),
|
|
("icon-folder-remove", "folder-remove"),
|
|
("icon-folder-remove-outline", "folder-remove-outline"),
|
|
("icon-funnel", "funnel"),
|
|
("icon-funnel-clear", "funnel-clear"),
|
|
("icon-gauge", "gauge"),
|
|
("icon-globe", "globe"),
|
|
("icon-grid", "grid"),
|
|
("icon-help", "help"),
|
|
("icon-hide", "hide"),
|
|
("icon-history", "history"),
|
|
("icon-image", "image"),
|
|
("icon-info", "info"),
|
|
("icon-join", "join"),
|
|
("icon-ladder-down", "ladder-down"),
|
|
("icon-ladder-up", "ladder-up"),
|
|
("icon-layers", "layers"),
|
|
("icon-link", "link"),
|
|
("icon-list", "list"),
|
|
("icon-list-items", "list-items"),
|
|
("icon-lock", "lock"),
|
|
("icon-menu", "menu"),
|
|
("icon-merge", "merge"),
|
|
("icon-message", "message"),
|
|
("icon-message-outline", "message-outline"),
|
|
("icon-mobile", "mobile"),
|
|
("icon-moon", "moon"),
|
|
("icon-mouse-left", "mouse-left"),
|
|
("icon-number-outline", "number-outline"),
|
|
("icon-paste", "paste"),
|
|
("icon-pause", "pause"),
|
|
("icon-pc-screen", "pc-screen"),
|
|
("icon-pencil", "pencil"),
|
|
("icon-phone", "phone"),
|
|
("icon-phone-directory", "phone-directory"),
|
|
("icon-phone-directory-outline", "phone-directory-outline"),
|
|
("icon-phone-outline", "phone-outline"),
|
|
("icon-pin-down", "pin-down"),
|
|
("icon-pin-down-outline", "pin-down-outline"),
|
|
("icon-pin-left", "pin-left"),
|
|
("icon-pin-left-bottom", "pin-left-bottom"),
|
|
("icon-pin-left-bottom-outline", "pin-left-bottom-outline"),
|
|
("icon-pin-left-outline", "pin-left-outline"),
|
|
("icon-play", "play"),
|
|
("icon-plug", "plug"),
|
|
("icon-plug-disconnected", "plug-disconnected"),
|
|
("icon-plug-disconnected-outline", "plug-disconnected-outline"),
|
|
("icon-plus", "plus"),
|
|
("icon-printer", "printer"),
|
|
("icon-printer-outline", "printer-outline"),
|
|
("icon-reject", "reject"),
|
|
("icon-reload", "reload"),
|
|
("icon-reply", "reply"),
|
|
("icon-reply-outline", "reply-outline"),
|
|
("icon-revert", "revert"),
|
|
("icon-rss", "rss"),
|
|
("icon-running-man", "running-man"),
|
|
("icon-save", "save"),
|
|
("icon-save-outline", "save-outline"),
|
|
("icon-search", "search"),
|
|
("icon-single-chevron-down", "single-chevron-down"),
|
|
("icon-single-chevron-left", "single-chevron-left"),
|
|
("icon-single-chevron-right", "single-chevron-right"),
|
|
("icon-single-chevron-up", "single-chevron-up"),
|
|
("icon-sliders-horizontal", "sliders-horizontal"),
|
|
("icon-star", "star"),
|
|
("icon-star-half", "star-half"),
|
|
("icon-star-outline", "star-outline"),
|
|
("icon-text-bold", "text-bold"),
|
|
("icon-text-italic", "text-italic"),
|
|
("icon-thumbs-up", "thumbs-up"),
|
|
("icon-tiles", "tiles"),
|
|
("icon-tos", "tos"),
|
|
("icon-trash", "trash"),
|
|
("icon-txt", "txt"),
|
|
("icon-undo", "undo"),
|
|
("icon-unlock", "unlock"),
|
|
("icon-unlock-outline", "unlock-outline"),
|
|
("icon-unlock-wide", "unlock-wide"),
|
|
("icon-upload", "upload"),
|
|
("icon-upload-selected", "upload-selected"),
|
|
("icon-user", "user"),
|
|
("icon-user-add", "user-add"),
|
|
("icon-user-add-outline", "user-add-outline"),
|
|
("icon-user-db", "user-db"),
|
|
("icon-user-db-outline", "user-db-outline"),
|
|
("icon-user-details", "user-details"),
|
|
("icon-user-group", "user-group"),
|
|
("icon-user-group-outline", "user-group-outline"),
|
|
("icon-user-outline", "user-outline"),
|
|
("icon-user-remove", "user-remove"),
|
|
("icon-user-remove-outline", "user-remove-outline"),
|
|
("icon-user-star-outline", "user-star-outline"),
|
|
("icon-view", "view"),
|
|
("icon-warning-circle", "warning-circle"),
|
|
("icon-warning-triangle", "warning-triangle"),
|
|
("icon-weight-equal", "weight-equal"),
|
|
("icon-weight-not-equal", "weight-not-equal"),
|
|
("icon-window-add", "window-add"),
|
|
("icon-window-group", "window-group"),
|
|
("icon-wrench", "wrench"),
|
|
("icon-wrench-double-head-outline", "wrench-double-head-outline"),
|
|
("icon-wrench-outline", "wrench-outline"),
|
|
("icon-xml", "xml"),
|
|
("icon-zoom-in", "zoom-in"),
|
|
("icon-zoom-out", "zoom-out")
|
|
];
|
|
|
|
private string _searchText = string.Empty;
|
|
|
|
private IEnumerable<(string ClassName, string DisplayName)> FilteredIcons =>
|
|
string.IsNullOrWhiteSpace(_searchText)
|
|
? _icons
|
|
: _icons.Where(x => x.DisplayName.Contains(_searchText, StringComparison.OrdinalIgnoreCase));
|
|
}
|