[CLOSED] Material Icons

[Z]

Hi
Where is my icon?
I used the following search (https://fonts.google.com/icons?selected=Material+Icons&icon.query=sun) and wanted to use light_mode. i replaced the _ with a - though i shouldnt have to do that and it doesnt work. What is interesting is this one

iconCls="x-md md-icon-content-paste" does work. Also, why do i need to replace the underscores with dashes?
Thanks
/Z



<ext-button
id="testBtn"
marginAsString="0 0 0 10"
text="TEST"
onClientClick="Ext.Msg.alert('ENTER', 'TEST');"
iconCls="x-md md-icon-light-mode"
/>

[fabricio.murta]

Hello @Z!

The icon you are looking for was probably introduced (or renamed) -after- the last update to the material icons shipped with Ext.NET. Unfortunately I don't see a means to specify the version in the page where you can list and search icons.

Currently, Ext.NET's Material Icons to the Spotless theme version is 3.0.2, so perhaps the best reference for icons that should exist is in their GitHub repository's v3.0.2 tag (https://github.com/google/material-design-icons/tree/3.0.2). But I'm afraid searching existing icons there is not really a great experience. There might be online "cheatcheets" for the Material Theme pre-4.0.0 (current version) but I couldn't find one, in a quick search, worth adding to the thread.

The bold in "to the Spotless theme" above is because there's also the Material theme in Ext.NET, and this one's material icons' set could be different, from an older version, as that is not maintained by Ext.NET but inherited from Ext JS framework.


Also, why do i need to replace the underscores with dashes?

Because Ext.NET (by a dependency on the underlying framework, Ext JS) references the icons by CSS selectors, and not the advertised ligatures (http://alistapart.com/article/the-era-of-symbol-fonts) from google. When you specify a name with spaces or underline, it is a content for the HTML entity wrapping the icon. Ext.NET uses a CSS class to set the content to the HTML entity (a div, or a span).

There's some kind of convention in CSS where they prefer to use dashes over underscores when it comes down to it. There's no technical limitation though.

Should it help in any way, here's a list of the 1317 icons available as material design ones (the CSS class always starts with .md-icon-). The icons are grouped by their first character, and the list was extracted from the Spotless theme's CSS for Ext.NET 7.3.0.

Hope this helps!



[3]
360, 3d-rotation

[4]
4k

[5]
5g

[6]
6-ft-apart

[a]
ac-unit, access-alarm, access-alarms, access-time, accessibility,
accessibility-new, accessible, accessible-forward, account-balance,
account-balance-wallet, account-box, account-circle, account-tree, ad-units,
adb, add, add-a-photo, add-alarm, add-alert, add-box, add-business, add-circle,
add-circle-outline, add-comment, add-ic-call, add-location, add-location-alt,
add-photo-alternate, add-road, add-shopping-cart, add-task, add-to-home-screen,
add-to-photos, add-to-queue, addchart, adjust, admin-panel-settings,
agriculture, airline-seat-flat, airline-seat-flat-angled,
airline-seat-individual-suite, airline-seat-legroom-extra,
airline-seat-legroom-normal, airline-seat-legroom-reduced,
airline-seat-recline-extra, airline-seat-recline-normal, airplanemode-active,
airplanemode-inactive, airplay, airport-shuttle, alarm, alarm-add, alarm-off,
alarm-on, album, align-horizontal-center, align-horizontal-left,
align-horizontal-right, align-vertical-bottom, align-vertical-center,
align-vertical-top, all-inbox, all-inclusive, all-out, alt-route,
alternate-email, amp-stories, analytics, anchor, android, announcement,
apartment, api, app-blocking, app-settings-alt, apps, architecture, archive,
arrow-back, arrow-back-ios, arrow-circle-down, arrow-circle-up, arrow-downward,
arrow-drop-down, arrow-drop-down-circle, arrow-drop-up, arrow-forward,
arrow-forward-ios, arrow-left, arrow-right, arrow-right-alt, arrow-upward,
art-track, article, aspect-ratio, assessment, assignment, assignment-ind,
assignment-late, assignment-return, assignment-returned, assignment-turned-in,
assistant, assistant-photo, atm, attach-email, attach-file, attach-money,
attachment, audiotrack, auto-delete, autorenew, av-timer

[b]
baby-changing-station, backpack, backspace, backup, backup-table, ballot,
bar-chart, batch-prediction, bathtub, battery-alert, battery-charging-full,
battery-full, battery-std, battery-unknown, beach-access, bedtime, beenhere,
bento, bike-scooter, biotech, block, bluetooth, bluetooth-audio,
bluetooth-connected, bluetooth-disabled, bluetooth-searching, blur-circular,
blur-linear, blur-off, blur-on, book, book-online, bookmark, bookmark-border,
bookmarks, border-all, border-bottom, border-clear, border-horizontal,
border-inner, border-left, border-outer, border-right, border-style,
border-top, border-vertical, branding-watermark, brightness-1, brightness-2,
brightness-3, brightness-4, brightness-5, brightness-6, brightness-7,
brightness-auto, brightness-high, brightness-low, brightness-medium,
broken-image, browser-not-supported, brush, bubble-chart, bug-report, build,
build-circle, burst-mode, business, business-center

[c]
cached, cake, calculate, calendar-today, calendar-view-day, call, call-end,
call-made, call-merge, call-missed, call-missed-outgoing, call-received,
call-split, call-to-action, camera, camera-alt, camera-enhance, camera-front,
camera-rear, camera-roll, campaign, cancel, cancel-presentation,
cancel-schedule-send, card-giftcard, card-membership, card-travel, carpenter,
casino, cast, cast-connected, cast-for-education, category,
center-focus-strong, center-focus-weak, change-history, charging-station, chat,
chat-bubble, chat-bubble-outline, check, check-box, check-box-outline-blank,
check-circle, check-circle-outline, checkroom, chevron-left, chevron-right,
child-care, child-friendly, chrome-reader-mode, class, clean-hands,
cleaning-services, clear, clear-all, close, close-fullscreen, closed-caption,
closed-caption-disabled, cloud, cloud-circle, cloud-done, cloud-download,
cloud-off, cloud-queue, cloud-upload, code, collections, collections-bookmark,
color-lens, colorize, comment, comment-bank, commute, compare, compare-arrows,
compass-calibration, computer, confirmation-number, connect-without-contact,
construction, contact-mail, contact-page, contact-phone, contact-support,
contactless, contacts, content-copy, content-cut, content-paste,
control-camera, control-point, control-point-duplicate, copyright, coronavirus,
corporate-fare, countertops, create, create-new-folder, credit-card, crop,
crop-16-9, crop-3-2, crop-5-4, crop-7-5, crop-din, crop-free, crop-landscape,
crop-original, crop-portrait, crop-rotate, crop-square

[d]
dashboard, data-usage, date-range, deck, dehaze, delete, delete-forever,
delete-outline, delete-sweep, departure-board, description, design-services,
desktop-access-disabled, desktop-mac, desktop-windows, details,
developer-board, developer-mode, device-hub, device-unknown, devices,
devices-other, dialer-sip, dialpad, directions, directions-bike,
directions-boat, directions-bus, directions-car, directions-off,
directions-railway, directions-run, directions-subway, directions-transit,
directions-walk, disabled-by-default, disc-full, dns, do-not-step,
do-not-touch, dock, domain, domain-disabled, domain-verification, done,
done-all, done-outline, donut-large, donut-small, double-arrow, drafts,
drag-handle, drag-indicator, drive-eta, dry, duo, dvr, dynamic-feed,
dynamic-form

[e]
east, eco, edit, edit-attributes, edit-location, edit-road, eject, elderly,
electric-bike, electric-car, electric-moped, electric-scooter,
electrical-services, elevator, email, emoji-emotions, emoji-events,
emoji-flags, emoji-food-beverage, emoji-nature, emoji-objects, emoji-people,
emoji-symbols, emoji-transportation, engineering, enhanced-encryption,
equalizer, error, error-outline, escalator, escalator-warning, euro,
euro-symbol, ev-station, event, event-available, event-busy, event-note,
event-seat, exit-to-app, expand-less, expand-more, explicit, explore,
explore-off, exposure, exposure-neg-1, exposure-neg-2, exposure-plus-1,
exposure-plus-2, exposure-zero, extension

[f]
face, facebook, fact-check, family-restroom, fast-forward, fast-rewind,
fastfood, favorite, favorite-border, featured-play-list, featured-video,
feedback, fence, fiber-dvr, fiber-manual-record, fiber-new, fiber-pin,
fiber-smart-record, file-copy, filter, filter-1, filter-2, filter-3, filter-4,
filter-5, filter-6, filter-7, filter-8, filter-9, filter-9-plus, filter-alt,
filter-b-and-w, filter-center-focus, filter-drama, filter-frames, filter-hdr,
filter-list, filter-none, filter-tilt-shift, filter-vintage, find-in-page,
find-replace, fingerprint, fire-extinguisher, fireplace, first-page,
fitness-center, flag, flaky, flare, flash-auto, flash-off, flash-on, flight,
flight-land, flight-takeoff, flip, flip-camera-android, flip-camera-ios,
flip-to-back, flip-to-front, folder, folder-open, folder-shared,
folder-special, follow-the-signs, font-download, food-bank,
format-align-center, format-align-justify, format-align-left,
format-align-right, format-bold, format-clear, format-color-reset,
format-indent-decrease, format-indent-increase, format-italic,
format-line-spacing, format-list-bulleted, format-list-numbered,
format-list-numbered-rtl, format-paint, format-quote, format-shapes,
format-size, format-strikethrough, format-textdirection-l-to-r,
format-textdirection-r-to-l, format-underlined, forum, forward, forward-10,
forward-30, forward-5, forward-to-inbox, foundation, free-breakfast,
fullscreen, fullscreen-exit, functions

[g]
g-translate, gamepad, games, gavel, gesture, get-app, gif, golf-course,
gps-fixed, gps-not-fixed, gps-off, grade, gradient, grading, grain, graphic-eq,
grass, grid-off, grid-on, group, group-add, group-work, groups

[h]
handyman, hd, hdr-off, hdr-on, hdr-strong, hdr-weak, headset, headset-mic,
healing, hearing, hearing-disabled, height, help, help-center, help-outline,
high-quality, highlight, highlight-alt, highlight-off, history, history-edu,
history-toggle-off, home, home-repair-service, home-work,
horizontal-distribute, horizontal-rule, horizontal-split, hot-tub, hotel,
hourglass-bottom, hourglass-disabled, hourglass-empty, hourglass-full,
hourglass-top, house, house-siding, how-to-reg, how-to-vote, http, https, hvac

[i]
image, image-aspect-ratio, image-not-supported, image-search, import-contacts,
import-export, important-devices, inbox, indeterminate-check-box, info, input,
insert-chart, insert-chart-outlined, insert-comment, insert-drive-file,
insert-emoticon, insert-invitation, insert-link, insert-photo, insights,
integration-instructions, invert-colors, invert-colors-off, iso

[k]
keyboard, keyboard-arrow-down, keyboard-arrow-left, keyboard-arrow-right,
keyboard-arrow-up, keyboard-backspace, keyboard-capslock, keyboard-hide,
keyboard-return, keyboard-tab, keyboard-voice, king-bed, kitchen

[l]
label, label-important, label-off, landscape, language, laptop,
laptop-chromebook, laptop-mac, laptop-windows, last-page, launch, layers,
layers-clear, leaderboard, leak-add, leak-remove, legend-toggle, lens,
library-add, library-add-check, library-books, library-music, line-style,
line-weight, linear-scale, link, link-off, linked-camera, list, list-alt,
live-help, live-tv, local-activity, local-airport, local-atm, local-bar,
local-cafe, local-car-wash, local-convenience-store, local-dining, local-drink,
local-fire-department, local-florist, local-gas-station, local-grocery-store,
local-hospital, local-hotel, local-laundry-service, local-library, local-mall,
local-movies, local-offer, local-parking, local-pharmacy, local-phone,
local-pizza, local-play, local-police, local-post-office, local-printshop,
local-see, local-shipping, local-taxi, location-city, location-disabled,
location-off, location-on, location-searching, lock, lock-open, login, looks,
looks-3, looks-4, looks-5, looks-6, looks-one, looks-two, loop, loupe,
low-priority, loyalty, luggage

[m]
mail, mail-outline, map, maps-ugc, mark-chat-read, mark-chat-unread,
mark-email-read, mark-email-unread, markunread, markunread-mailbox, masks,
maximize, mediation, medical-services, meeting-room, memory, menu, menu-book,
menu-open, merge-type, message, mic, mic-none, mic-off, microwave,
military-tech, minimize, miscellaneous-services, missed-video-call, mms,
mobile-friendly, mobile-off, mobile-screen-share, mode-comment, model-training,
monetization-on, money, money-off, monochrome-photos, mood, mood-bad, moped,
more, more-horiz, more-time, more-vert, motion-photos-on, motion-photos-pause,
motion-photos-paused, mouse, move-to-inbox, movie, movie-creation,
movie-filter, multiline-chart, multiple-stop, museum, music-note, music-off,
music-video, my-location

[n]
nat, nature, nature-people, navigate-before, navigate-next, navigation,
near-me, near-me-disabled, network-check, network-locked, new-releases,
next-plan, next-week, nfc, night-shelter, nights-stay, no-backpack, no-cell,
no-drinks, no-encryption, no-flash, no-food, no-luggage, no-meals,
no-meeting-room, no-photography, no-sim, no-stroller, no-transfer, north,
north-east, north-west, not-accessible, not-interested, not-listed-location,
not-started, note, note-add, notes, notification-important, notifications,
notifications-active, notifications-none, notifications-off,
notifications-paused

[o]
offline-bolt, offline-pin, ondemand-video, online-prediction, opacity,
open-in-browser, open-in-full, open-in-new, open-with, outbond, outdoor-grill,
outlet, outlined-flag

[p]
pages, pageview, palette, pan-tool, panorama, panorama-fish-eye,
panorama-horizontal, panorama-vertical, panorama-wide-angle, party-mode, pause,
pause-circle-filled, pause-circle-outline, pause-presentation, payment,
payments, pedal-bike, pending, pending-actions, people, people-alt,
people-outline, perm-camera-mic, perm-contact-calendar, perm-data-setting,
perm-device-information, perm-identity, perm-media, perm-phone-msg,
perm-scan-wifi, person, person-add, person-add-alt-1, person-add-disabled,
person-outline, person-pin, person-pin-circle, person-remove,
person-remove-alt-1, person-search, personal-video, pest-control,
pest-control-rodent, pets, phone, phone-android, phone-bluetooth-speaker,
phone-callback, phone-disabled, phone-enabled, phone-forwarded, phone-in-talk,
phone-iphone, phone-locked, phone-missed, phone-paused, phonelink,
phonelink-erase, phonelink-lock, phonelink-off, phonelink-ring,
phonelink-setup, photo, photo-album, photo-camera, photo-filter, photo-library,
photo-size-select-actual, photo-size-select-large, photo-size-select-small,
picture-as-pdf, picture-in-picture, picture-in-picture-alt, pie-chart,
pin-drop, place, plagiarism, play-arrow, play-circle-filled,
play-circle-outline, play-for-work, playlist-add, playlist-add-check,
playlist-play, plumbing, plus-one, point-of-sale, policy, poll, polymer, pool,
portable-wifi-off, portrait, post-add, power, power-input, power-off,
power-settings-new, pregnant-woman, present-to-all, preview, print,
print-disabled, priority-high, privacy-tip, psychology, public, public-off,
publish, published-with-changes, push-pin

[q]
qr-code, qr-code-2, qr-code-scanner, query-builder, question-answer, queue,
queue-music, queue-play-next, quickreply

[r]
radio, radio-button-checked, radio-button-unchecked, rate-review, read-more,
receipt, receipt-long, recent-actors, record-voice-over, redeem, redo,
reduce-capacity, refresh, remove, remove-circle, remove-circle-outline,
remove-from-queue, remove-red-eye, remove-shopping-cart, reorder, repeat,
repeat-one, replay, replay-10, replay-30, replay-5, reply, reply-all, report,
report-off, report-problem, request-page, request-quote, restaurant,
restaurant-menu, restore, restore-from-trash, restore-page, rice-bowl,
ring-volume, roofing, room, room-preferences, room-service,
rotate-90-degrees-ccw, rotate-left, rotate-right, rounded-corner, router,
rowing, rss-feed, rule, rule-folder, run-circle, rv-hookup

[s]
sanitizer, satellite, save, save-alt, scanner, scatter-plot, schedule, school,
science, score, screen-lock-landscape, screen-lock-portrait,
screen-lock-rotation, screen-rotation, screen-share, sd-card, sd-storage,
search, search-off, security, select-all, self-improvement, send, sensor-door,
sensor-window, sentiment-dissatisfied, sentiment-satisfied,
sentiment-satisfied-alt, sentiment-very-dissatisfied, sentiment-very-satisfied,
set-meal, settings, settings-applications, settings-backup-restore,
settings-bluetooth, settings-brightness, settings-cell, settings-ethernet,
settings-input-antenna, settings-input-component, settings-input-composite,
settings-input-hdmi, settings-input-svideo, settings-overscan, settings-phone,
settings-power, settings-remote, settings-system-daydream, settings-voice,
share, shop, shop-two, shopping-bag, shopping-basket, shopping-cart,
short-text, show-chart, shuffle, shutter-speed, sick, signal-cellular-4-bar,
signal-cellular-alt, signal-cellular-connected-no-internet-4-bar,
signal-cellular-no-sim, signal-cellular-null, signal-cellular-off,
signal-wifi-4-bar, signal-wifi-4-bar-lock, signal-wifi-off, sim-card,
single-bed, skip-next, skip-previous, slideshow, slow-motion-video,
smart-button, smartphone, smoke-free, smoking-rooms, sms, sms-failed,
snippet-folder, snooze, soap, sort, sort-by-alpha, source, south, south-east,
south-west, spa, space-bar, speaker, speaker-group, speaker-notes,
speaker-notes-off, speaker-phone, speed, spellcheck, sports, sports-bar,
sports-baseball, sports-basketball, sports-cricket, sports-esports,
sports-football, sports-golf, sports-handball, sports-hockey, sports-kabaddi,
sports-mma, sports-motorsports, sports-rugby, sports-soccer, sports-tennis,
sports-volleyball, square-foot, stacked-line-chart, stairs, star, star-border,
star-half, star-outline, star-rate, stars, stay-current-landscape,
stay-current-portrait, stay-primary-landscape, stay-primary-portrait,
sticky-note-2, stop, stop-circle, stop-screen-share, storage, store,
store-mall-directory, storefront, straighten, streetview, strikethrough-s,
stroller, style, subdirectory-arrow-left, subdirectory-arrow-right, subject,
subscript, subscriptions, subtitles, subtitles-off, subway, superscript,
supervised-user-circle, supervisor-account, support, support-agent,
surround-sound, swap-calls, swap-horiz, swap-horizontal-circle, swap-vert,
swap-vertical-circle, switch-camera, switch-left, switch-right, switch-video,
sync, sync-alt, sync-disabled, sync-problem, system-update, system-update-alt

[t]
tab, tab-unselected, table-chart, table-rows, table-view, tablet,
tablet-android, tablet-mac, tag-faces, tap-and-play, tapas, terrain,
text-fields, text-format, text-rotate-up, text-rotate-vertical,
text-rotation-angledown, text-rotation-angleup, text-rotation-down,
text-rotation-none, text-snippet, textsms, texture, theaters, thumb-down,
thumb-down-alt, thumb-up, thumb-up-alt, thumbs-up-down, time-to-leave,
timelapse, timeline, timer, timer-10, timer-3, timer-off, title, toc, today,
toggle-off, toggle-on, toll, tonality, topic, touch-app, tour, toys,
track-changes, traffic, train, tram, transfer-within-a-station, transform,
transit-enterexit, translate, trending-down, trending-flat, trending-up,
trip-origin, tty, tune, turned-in, turned-in-not, tv, tv-off, two-wheeler

[u]
umbrella, unarchive, undo, unfold-less, unfold-more, unpublished, unsubscribe,
update, update-disabled, upgrade, usb

[v]
verified, verified-user, vertical-align-bottom, vertical-align-center,
vertical-align-top, vertical-distribute, vertical-split, vibration, video-call,
video-label, video-library, video-settings, videocam, videocam-off,
videogame-asset, view-agenda, view-array, view-carousel, view-column,
view-comfy, view-compact, view-day, view-headline, view-list, view-module,
view-quilt, view-sidebar, view-stream, view-week, vignette, visibility,
visibility-off, voice-chat, voice-over-off, voicemail, volume-down,
volume-mute, volume-off, volume-up, vpn-key, vpn-lock

[w]
wallpaper, warning, wash, watch, watch-later, water-damage, waves, wb-auto,
wb-cloudy, wb-incandescent, wb-iridescent, wb-sunny, wc, web, web-asset,
weekend, west, whatshot, wheelchair-pickup, where-to-vote, widgets, wifi,
wifi-calling, wifi-lock, wifi-off, wifi-protected-setup, wifi-tethering,
wine-bar, work, work-off, work-outline, wrap-text, wrong-location, wysiwyg

[y]
youtube-searched-for

[z]
zoom-in, zoom-out, zoom-out-map

[Z]

Do you have an example of how we can add our own icons?
Zev.

[fabricio.murta]

Hello again!

Here's a guide on adding back the classic fam-fam-fam icons to Ext.NET 7. Perhaps this helps understanding, and being able to add any icon set by following the specific set's setup instructions.

- [guide] How to enable old FamFamFam icons in new Ext.NET 7 Classic (https://forums.ext.net/showthread.php?63182)

It basically involves adding the icon resources (be it fonts, svg or png images), their respective CSS, then referencing in the iconCls component settings.

Hope this helps!

[Z]

Thank you
/Z