RFE: Add latest material icons

[ThomasH99]

I was looking for some icons for a specific case and found a few new ones that Google seems to have added since the update mentioned here https://github.com/codenameone/CodenameOne/issues/2421.

E.g. north, north_east etc And maybe more. If ever @jsfan3 wants to run the comparison script again... :-)

[jsfan3]

You did very well to put a link to the old discussion, otherwise it would have been hard to remember what we did.

Based on the previous discussion, I assume that Codename One includes version 47 of Material Fonts, whose current version is 53, as you can see from this file: https://fonts.googleapis.com/icon?family=Material+Icons

This is the link to the updated TTF: https://fonts.gstatic.com/s/materialicons/v53/flUhRq6tzZclQEJ-Vdg-IuiaDsNZ.ttf

According to https://fontdrop.info/, it includes 1537 ligatures.

This is the link to the font currently included in Codename One: https://github.com/codenameone/CodenameOne/blob/master/CodenameOne/src/material-design-font.ttf

According to https://fontdrop.info/, it includes 1278 ligatures.

There should therefore be 1537-1278=259 more ligatures, or 259 more material icons.

At the moment, however, I have not found a way to make the comparison in an automatic or semi-automatic way.

[jsfan3]

@ThomasH99 You can also try to find a method to get the list of ligatures included in a ttf, that is the list of material icons and their code. Once you have obtained the lists, the "diff" command is sufficient for comparison.

[beazl-peter]

I have created a diff to the latest font but the codepoints reference has been removed from the repo here https://github.com/google/material-design-icons so it's not much use. There are several issues already logged asking for the codepoints file to be added back and assuming this is done, it will be pretty easy to create a useful diff.

[beazl-peter]

They've added the codepoints file and I've got the updates (284 new, 2 changed) - what's the most useful way to provide this?

[jsfan3]

@beazl-peter Thank you!

[ThomasH99]

And a great thank you from me as well! I looked into this but never got around to it (got pulled into designing my own icons in fontforge instead)

[beazl-peter]

@jsfan3 @ThomasH99 happy to help - once they released the codepoints it became much easier!

Here is the full list of changes for reference:

290 new

MATERIAL_5G = '\uEF38'; MATERIAL_6_FT_APART = '\uF21E'; MATERIAL_ADD_BUSINESS = '\uE729'; MATERIAL_ADDCHART = '\uEF3C'; MATERIAL_ADD_LOCATION_ALT = '\uEF3A'; MATERIAL_ADD_ROAD = '\uEF3B'; MATERIAL_ADD_TASK = '\uF23A'; MATERIAL_ADD_TO_DRIVE = '\uE65C'; MATERIAL_ADMIN_PANEL_SETTINGS = '\uEF3D'; MATERIAL_AD_UNITS = '\uEF39'; MATERIAL_AGRICULTURE = '\uEA79'; MATERIAL_ALIGN_HORIZONTAL_CENTER = '\uE00F'; MATERIAL_ALIGN_HORIZONTAL_LEFT = '\uE00D'; MATERIAL_ALIGN_HORIZONTAL_RIGHT = '\uE010'; MATERIAL_ALIGN_VERTICAL_BOTTOM = '\uE015'; MATERIAL_ALIGN_VERTICAL_CENTER = '\uE011'; MATERIAL_ALIGN_VERTICAL_TOP = '\uE00C'; MATERIAL_ALT_ROUTE = '\uF184'; MATERIAL_ANALYTICS = '\uEF3E'; MATERIAL_ANCHOR = '\uF1CD'; MATERIAL_ANIMATION = '\uE71C'; MATERIAL_API = '\uF1B7'; MATERIAL_APP_BLOCKING = '\uEF3F'; MATERIAL_APP_REGISTRATION = '\uEF40'; MATERIAL_APP_SETTINGS_ALT = '\uEF41'; MATERIAL_ARCHITECTURE = '\uEA3B'; MATERIAL_ARROW_CIRCLE_DOWN = '\uF181'; MATERIAL_ARROW_CIRCLE_UP = '\uF182'; MATERIAL_ARTICLE = '\uEF42'; MATERIAL_ATTACH_EMAIL = '\uEA5E'; MATERIAL_AUTO_AWESOME_MOSAIC = '\uE660'; MATERIAL_AUTO_AWESOME_MOTION = '\uE661'; MATERIAL_AUTO_AWESOME = '\uE65F'; MATERIAL_AUTO_DELETE = '\uEA4C'; MATERIAL_AUTO_FIX_HIGH = '\uE663'; MATERIAL_AUTO_FIX_NORMAL = '\uE664'; MATERIAL_AUTO_FIX_OFF = '\uE665'; MATERIAL_AUTO_STORIES = '\uE666'; MATERIAL_BABY_CHANGING_STATION = '\uF19B'; MATERIAL_BACKPACK = '\uF19C'; MATERIAL_BACKUP_TABLE = '\uEF43'; MATERIAL_BATCH_PREDICTION = '\uF0F5'; MATERIAL_BEDTIME = '\uEF44'; MATERIAL_BENTO = '\uF1F4'; MATERIAL_BIKE_SCOOTER = '\uEF45'; MATERIAL_BIOTECH = '\uEA3A'; MATERIAL_BLOCK_FLIPPED = '\uEF46'; MATERIAL_BOOK_ONLINE = '\uF217'; MATERIAL_BROWSER_NOT_SUPPORTED = '\uEF47'; MATERIAL_BUILD_CIRCLE = '\uEF48'; MATERIAL_CALCULATE = '\uEA5F'; MATERIAL_CAMPAIGN = '\uEF49'; MATERIAL_CARPENTER = '\uF1F8'; MATERIAL_CAST_FOR_EDUCATION = '\uEFEC'; MATERIAL_CHARGING_STATION = '\uF19D'; MATERIAL_CHECKROOM = '\uF19E'; MATERIAL_CIRCLE = '\uEF4A'; MATERIAL_CLEAN_HANDS = '\uF21F'; MATERIAL_CLEANING_SERVICES = '\uF0FF'; MATERIAL_CLOSED_CAPTION_DISABLED = '\uF1DC'; MATERIAL_CLOSE_FULLSCREEN = '\uF1CF'; MATERIAL_COMMENT_BANK = '\uEA4E'; MATERIAL_CONNECT_WITHOUT_CONTACT = '\uF223'; MATERIAL_CONSTRUCTION = '\uEA3C'; MATERIAL_CONTACT_PAGE = '\uF22E'; MATERIAL_CORONAVIRUS = '\uF221'; MATERIAL_CORPORATE_FARE = '\uF1D0'; MATERIAL_COUNTERTOPS = '\uF1F7'; MATERIAL_DESIGN_SERVICES = '\uF10A'; MATERIAL_DIRECTIONS_OFF = '\uF10F'; MATERIAL_DIRTY_LENS = '\uEF4B'; MATERIAL_DISABLED_BY_DEFAULT = '\uF230'; MATERIAL_DOMAIN_VERIFICATION = '\uEF4C'; MATERIAL_DO_NOT_STEP = '\uF19F'; MATERIAL_DO_NOT_TOUCH = '\uF1B0'; MATERIAL_DRIVE_FILE_MOVE = '\uE675'; MATERIAL_DRY = '\uF1B3'; MATERIAL_DYNAMIC_FORM = '\uF1BF'; MATERIAL_EAST = '\uF1DF'; MATERIAL_EDIT_ROAD = '\uEF4D'; MATERIAL_ELDERLY = '\uF21A'; MATERIAL_ELECTRICAL_SERVICES = '\uF102'; MATERIAL_ELECTRIC_BIKE = '\uEB1B'; MATERIAL_ELECTRIC_CAR = '\uEB1C'; MATERIAL_ELECTRIC_MOPED = '\uEB1D'; MATERIAL_ELECTRIC_RICKSHAW = '\uEB1E'; MATERIAL_ELECTRIC_SCOOTER = '\uEB1F'; MATERIAL_ELEVATOR = '\uF1A0'; MATERIAL_ENGINEERING = '\uEA3D'; MATERIAL_ESCALATOR = '\uF1A1'; MATERIAL_ESCALATOR_WARNING = '\uF1AC'; MATERIAL_FACEBOOK = '\uF234'; MATERIAL_FACE_RETOUCHING_NATURAL = '\uEF4E'; MATERIAL_FACT_CHECK = '\uF0C5'; MATERIAL_FAMILY_RESTROOM = '\uF1A2'; MATERIAL_FENCE = '\uF1F6'; MATERIAL_FILTER_ALT = '\uEF4F'; MATERIAL_FIRE_EXTINGUISHER = '\uF1D8'; MATERIAL_FIRE_HYDRANT = '\uF1A3'; MATERIAL_FLAKY = '\uEF50'; MATERIAL_FOLLOW_THE_SIGNS = '\uF222'; MATERIAL_FOOD_BANK = '\uF1F2'; MATERIAL_FORWARD_TO_INBOX = '\uF187'; MATERIAL_FOUNDATION = '\uF200'; MATERIAL_GRADING = '\uEA4F'; MATERIAL_GRASS = '\uF205'; MATERIAL_GROUPS = '\uF233'; MATERIAL_HANDYMAN = '\uF10B'; MATERIAL_HDR_ENHANCED_SELECT = '\uEF51'; MATERIAL_HEARING_DISABLED = '\uF104'; MATERIAL_HELP_CENTER = '\uF1C0'; MATERIAL_HIGHLIGHT_ALT = '\uEF52'; MATERIAL_HISTORY_EDU = '\uEA3E'; MATERIAL_HISTORY_TOGGLE_OFF = '\uF17D'; MATERIAL_HOME_REPAIR_SERVICE = '\uF100'; MATERIAL_HORIZONTAL_DISTRIBUTE = '\uE014'; MATERIAL_HORIZONTAL_RULE = '\uF108'; MATERIAL_HOURGLASS_BOTTOM = '\uEA5C'; MATERIAL_HOURGLASS_DISABLED = '\uEF53'; MATERIAL_HOURGLASS_TOP = '\uEA5B'; MATERIAL_HOUSE_SIDING = '\uF202'; MATERIAL_HVAC = '\uF10E'; MATERIAL_IMAGE_NOT_SUPPORTED = '\uF116'; MATERIAL_INSIGHTS = '\uF092'; MATERIAL_INTEGRATION_INSTRUCTIONS = '\uEF54'; MATERIAL_IOS_SHARE = '\uE6B8'; MATERIAL_LEADERBOARD = '\uF20C'; MATERIAL_LEAVE_BAGS_AT_HOME = '\uF21B'; MATERIAL_LEGEND_TOGGLE = '\uF11B'; MATERIAL_LOCAL_FIRE_DEPARTMENT = '\uEF55'; MATERIAL_LOCAL_POLICE = '\uEF56'; MATERIAL_LOCATION_PIN = '\uF1DB'; MATERIAL_LOCK_CLOCK = '\uEF57'; MATERIAL_LOGIN = '\uEA77'; MATERIAL_LUGGAGE = '\uF235'; MATERIAL_MAPS_UGC = '\uEF58'; MATERIAL_MARK_CHAT_READ = '\uF18B'; MATERIAL_MARK_CHAT_UNREAD = '\uF189'; MATERIAL_MARK_EMAIL_READ = '\uF18C'; MATERIAL_MARK_EMAIL_UNREAD = '\uF18A'; MATERIAL_MASKS = '\uF218'; MATERIAL_MEDIATION = '\uEFA7'; MATERIAL_MEDICAL_SERVICES = '\uF109'; MATERIAL_MIC_EXTERNAL_OFF = '\uEF59'; MATERIAL_MIC_EXTERNAL_ON = '\uEF5A'; MATERIAL_MICROWAVE = '\uF204'; MATERIAL_MILITARY_TECH = '\uEA3F'; MATERIAL_MISCELLANEOUS_SERVICES = '\uF10C'; MATERIAL_MODEL_TRAINING = '\uF0CF'; MATERIAL_MONITOR = '\uEF5B'; MATERIAL_MOPED = '\uEB28'; MATERIAL_MORE_TIME = '\uEA5D'; MATERIAL_MOTION_PHOTOS_OFF = '\uE9C0'; MATERIAL_MOTION_PHOTOS_ON = '\uE9C1'; MATERIAL_MOTION_PHOTOS_PAUSED = '\uE9C2'; MATERIAL_MOTION_PHOTOS_PAUSE = '\uF227'; MATERIAL_MULTIPLE_STOP = '\uF1B9'; MATERIAL_NAT = '\uEF5C'; MATERIAL_NEAR_ME_DISABLED = '\uF1EF'; MATERIAL_NEXT_PLAN = '\uEF5D'; MATERIAL_NIGHTLIGHT_ROUND = '\uEF5E'; MATERIAL_NIGHT_SHELTER = '\uF1F1'; MATERIAL_NO_BACKPACK = '\uF237'; MATERIAL_NO_CELL = '\uF1A4'; MATERIAL_NO_DRINKS = '\uF1A5'; MATERIAL_NO_FLASH = '\uF1A6'; MATERIAL_NO_FOOD = '\uF1A7'; MATERIAL_NO_LUGGAGE = '\uF23B'; MATERIAL_NO_MEALS_OULINE = '\uF229'; MATERIAL_NO_MEALS = '\uF1D6'; MATERIAL_NO_PHOTOGRAPHY = '\uF1A8'; MATERIAL_NORTH_EAST = '\uF1E1'; MATERIAL_NORTH = '\uF1E0'; MATERIAL_NORTH_WEST = '\uF1E2'; MATERIAL_NO_STROLLER = '\uF1AF'; MATERIAL_NOT_ACCESSIBLE = '\uF0FE'; MATERIAL_NO_TRANSFER = '\uF1D5'; MATERIAL_NOT_STARTED = '\uF0D1'; MATERIAL_ONLINE_PREDICTION = '\uF0EB'; MATERIAL_OPEN_IN_FULL = '\uF1CE'; MATERIAL_OUTBOND = '\uF228'; MATERIAL_OUTBOX = '\uEF5F'; MATERIAL_OUTGOING_MAIL = '\uF0D2'; MATERIAL_OUTLET = '\uF1D4'; MATERIAL_PANORAMA_HORIZONTAL_SELECT = '\uEF60'; MATERIAL_PANORAMA_VERTICAL_SELECT = '\uEF61'; MATERIAL_PANORAMA_WIDE_ANGLE_SELECT = '\uEF62'; MATERIAL_PAYMENTS = '\uEF63'; MATERIAL_PEDAL_BIKE = '\uEB29'; MATERIAL_PENDING_ACTIONS = '\uF1BB'; MATERIAL_PENDING = '\uEF64'; MATERIAL_PERSON_ADD_ALT_1 = '\uEF65'; MATERIAL_PERSON_ADD_ALT = '\uEA4D'; MATERIAL_PERSON_REMOVE_ALT_1 = '\uEF67'; MATERIAL_PERSON_REMOVE = '\uEF66'; MATERIAL_PERSON_SEARCH = '\uF106'; MATERIAL_PEST_CONTROL_RODENT = '\uF0FD'; MATERIAL_PEST_CONTROL = '\uF0FA'; MATERIAL_PHOTO_CAMERA_BACK = '\uEF68'; MATERIAL_PHOTO_CAMERA_FRONT = '\uEF69'; MATERIAL_PLAGIARISM = '\uEA5A'; MATERIAL_PLAY_DISABLED = '\uEF6A'; MATERIAL_PLUMBING = '\uF107'; MATERIAL_POINT_OF_SALE = '\uF17E'; MATERIAL_PREVIEW = '\uF1C5'; MATERIAL_PRIVACY_TIP = '\uF0DC'; MATERIAL_PSYCHOLOGY = '\uEA4A'; MATERIAL_PUBLIC_OFF = '\uF1CA'; MATERIAL_PUBLISHED_WITH_CHANGES = '\uF232'; MATERIAL_PUSH_PIN = '\uF10D'; MATERIAL_QR_CODE_2 = '\uE00A'; MATERIAL_QR_CODE_SCANNER = '\uF206'; MATERIAL_QR_CODE = '\uEF6B'; MATERIAL_QUICKREPLY = '\uEF6C'; MATERIAL_READ_MORE = '\uEF6D'; MATERIAL_RECEIPT_LONG = '\uEF6E'; MATERIAL_REDUCE_CAPACITY = '\uF21C'; MATERIAL_REQUEST_PAGE = '\uF22C'; MATERIAL_REQUEST_QUOTE = '\uF1B6'; MATERIAL_RICE_BOWL = '\uF1F5'; MATERIAL_ROOFING = '\uF201'; MATERIAL_ROOM_PREFERENCES = '\uF1B8'; MATERIAL_RULE_FOLDER = '\uF1C9'; MATERIAL_RULE = '\uF1C2'; MATERIAL_RUN_CIRCLE = '\uEF6F'; MATERIAL_SANITIZER = '\uF21D'; MATERIAL_SCIENCE = '\uEA4B'; MATERIAL_SCREEN_SEARCH_DESKTOP = '\uEF70'; MATERIAL_SEARCH_OFF = '\uEA76'; MATERIAL_SELF_IMPROVEMENT = '\uEA78'; MATERIAL_SEND_TO_MOBILE = '\uF05C'; MATERIAL_SENSOR_DOOR = '\uF1B5'; MATERIAL_SENSOR_WINDOW = '\uF1B4'; MATERIAL_SET_MEAL = '\uF1EA'; MATERIAL_SHOPPING_BAG = '\uF1CC'; MATERIAL_SICK = '\uF220'; MATERIAL_SIGNAL_CELLULAR_0_BAR = '\uF0A8'; MATERIAL_SIGNAL_WIFI_0_BAR = '\uF0B0'; MATERIAL_SMART_BUTTON = '\uF1C1'; MATERIAL_SNIPPET_FOLDER = '\uF1C7'; MATERIAL_SOAP = '\uF1B2'; MATERIAL_SOURCE = '\uF1C4'; MATERIAL_SOUTH_EAST = '\uF1E4'; MATERIAL_SOUTH = '\uF1E3'; MATERIAL_SOUTH_WEST = '\uF1E5'; MATERIAL_SPORTS_BAR = '\uF1F3'; MATERIAL_STACKED_LINE_CHART = '\uF22B'; MATERIAL_STAIRS = '\uF1A9'; MATERIAL_STAR_RATE = '\uF0EC'; MATERIAL_STICKY_NOTE_2 = '\uF1FC'; MATERIAL_STOP_CIRCLE = '\uEF71'; MATERIAL_STROLLER = '\uF1AE'; MATERIAL_SUBSCRIPT = '\uF111'; MATERIAL_SUBTITLES_OFF = '\uEF72'; MATERIAL_SUPERSCRIPT = '\uF112'; MATERIAL_SUPPORT_AGENT = '\uF0E2'; MATERIAL_SUPPORT = '\uEF73'; MATERIAL_SWITCH_LEFT = '\uF1D1'; MATERIAL_SWITCH_RIGHT = '\uF1D2'; MATERIAL_TABLE_ROWS = '\uF101'; MATERIAL_TABLE_VIEW = '\uF1BE'; MATERIAL_TAPAS = '\uF1E9'; MATERIAL_TAXI_ALERT = '\uEF74'; MATERIAL_TEXT_SNIPPET = '\uF1C6'; MATERIAL_TOPIC = '\uF1C8'; MATERIAL_TOUR = '\uEF75'; MATERIAL_TTY = '\uF1AA'; MATERIAL_UMBRELLA = '\uF1AD'; MATERIAL_UNPUBLISHED = '\uF236'; MATERIAL_UPDATE_DISABLED = '\uE075'; MATERIAL_UPGRADE = '\uF0FB'; MATERIAL_VERIFIED = '\uEF76'; MATERIAL_VERTICAL_DISTRIBUTE = '\uE076'; MATERIAL_VIDEO_SETTINGS = '\uEA75'; MATERIAL_VIEW_SIDEBAR = '\uF114'; MATERIAL_WASH = '\uF1B1'; MATERIAL_WATER_DAMAGE = '\uF203'; MATERIAL_WEST = '\uF1E6'; MATERIAL_WHEELCHAIR_PICKUP = '\uF1AB'; MATERIAL_WIFI_CALLING = '\uEF77'; MATERIAL_WIFI_PROTECTED_SETUP = '\uF0FC'; MATERIAL_WINE_BAR = '\uF1E8'; MATERIAL_WRONG_LOCATION = '\uEF78'; MATERIAL_WYSIWYG = '\uF1C3';

1 changed

MATERIAL_STAR_OUTLINE = '\uF06F'; (previously an alias for MATERIAL_STAR_BORDER)

1 removed

MATERIAL_GOAT = '\uDBFF';

[ThomasH99]

@beazl-peter I just noticed there are new icons, many nice ones like Pinch. If you're still active on this project, is there any chance you would work your magic again and add the new icons?

[beazl-peter]

@ThomasH99 - thanks for the heads up. I should have time take a look in a few days.

[beazl-peter]

@ThomasH99 I just created a pull request for the update.

[ThomasH99]

Hello @beazl-peter , I just noticed that some of the icons seem to have changed. For example TIMER which used to be Outlined is now filled (black). I'm guessing it's due to how you extract the actual font from Google's repo? Any chance you could do an update to have Outlined only?

Of course the perfect solution might be to have the two versions of the icons, like TIMER (for the usual Outlined version) and TIMER_FILLED :-) But maybe there might be a size issue if doubling the number of icons. @shai-almog ?

[beazl-peter]

Hi @ThomasH99

So it looks like they've moved things around. I think the default font should now be from here: https://github.com/google/material-design-icons/tree/master/variablefont (uing the "Outlined" version) rather than here https://github.com/google/material-design-icons/tree/master/font but some fo the codepoints are different so I'd need to regenerate the list.

Not a big deal, just might take me a couuple of weeks to get to it as I'm more or less on holiday right now and more importantly, it would be good if @shai-almog would weigh in on what he would prefer.

There is an OTF outlined version in the orginal location but that still has different codepoints to the regular font. It could be used, I guess - not sure if it would need to be converted from otf to ttf though?

[ThomasH99]

Just thought I'd follow up on this after the holidays :-) I was also thinking if the update to include new icons could somehow be automated by the CN1 team? It seems that Google is adding new material icons much more frequently and it is always a bit frustrating to find a really nice icon only to realize that it isn't in the CN1 set yet.

[shai-almog]

Sorry @beazl-peter I totally missed that. I'd rather keep the code points if possible since some people link against older versions of Codename One and might run into a problem with the device having a different set of icons.

I guess we can add an "outlined" version of the icons if there's demand for that.

[davidwaf]

I for one will really be grateful for the update on the icons ...outlined version will be most appreciated.

[ThomasH99]

Thanks @beazl-peter and @shai-almog. I'm using the existing icons widely and I've since designed some missing ones myself so no big need right now on my side (but please keep the existing icons unchanged). Having the outlined ones in addition would be nice. Maybe simply by adding them with the same names and _OUTLINED? Or alternatively, adding a mechanism to easily integrate alternatively icons as it is increasingly critical to achieve beautiful designs - but my guess is the team doesn't have the bandwidth for this.