List of Breaking Changes in MDI v5.0.45

[PeterShaggyNoble]

Material Design Icons v5 is in on the horizon, and with it will come a lot of breaking changes which are summarised below to help you prepare for them in advance. These lists will be kept updated as work progresses on v5, with new additions highlighted in bold.

Material Design Icons v5.0.45 has now been released. The following is a summary of all the breaking changes with this version.

Codepoint Remapping

The codepoints in all font files are being remapped to move our icons into a Private Use Area of Unicode, starting at F0001 which will be the new codepoint for vector-square. We don't see this change impacting too many of our users - those who are still using the webfont generally use class names rather than codepoints - but will provide a complete mapping of old to new codepoints with the release of v5.

Removed Icons

The following deprecated icons have all been removed. The majority are brand icons which are available from or in the process of being added by our friends over at Simple Icons. For more information and to track the status of these icons in Simple Icons, please see our deprecation notice.

View List

- accusoft - amazon-drive - android-head - basecamp - beats - behance - blackberry - cisco-webex - disqus-outline - dribbble - dribbble-box - etsy - eventbrite - facebook-box - flattr - flickr - foursquare - github-box - github-face - glassdoor - google-adwords - google-pages - google-physical-web - google-plus-box - houzz - houzz-box - instapaper - itunes - language-python-text - lastfm - *library-books* (replaced by `text-box-multiple`) - linkedin-box - lyft - mail-ru - mastodon-variant - medium - meetup - mixcloud - nfc-off - npm-variant - npm-variant-outline - paypal - periscope - pinterest-box - pocket - quicktime - shopify - slackware - square-inc - square-inc-cash - steam-box - strava - tor - tumblr - tumblr-box - tumblr-reblog - twitter-box - twitter-circle - uber - venmo - vk-box - vk-circle - wunderlist - xda - xing-box - xing-circle - yelp

Renamed Icons

We're also taking this opportunity to rename a number of icons for various reasons, some of which have been annoying us for a while!

View Table

| Old Name | New Name | | -------- | -------- | | account-badge | badge-account | | account-badge-alert | badge-account-alert | | account-badge-alert-outline | badge-account-alert-outline | | account-badge-horizontal | badge-account-horizontal | | account-badge-horizontal-outline | badge-account-horizontal-outline | | account-badge-outline | badge-account-outline | | account-card-details | card-account-details | | account-card-details-outline | card-account-details-outline | | **airplay** | **apple-airplay** | | artist | account-music | | artist-outline | account-music-outline | | audiobook | book-music | | azure | microsoft-azure | | azure-devops | microsoft-azure-devops | | bible | book-cross | | bowl | bowl-mix | | calendar-repeat | calendar-sync | | calendar-repeat-outline | calendar-sync-outline | | camcorder-box | video-box | | camcorder-box-off | video-box-off | | cellphone-settings-variant | cellphone-cog | | chart-snakey | chart-sankey | | chart-snakey-variant | chart-sankey-variant | | coin | currency-usd-circle | | coin-outline | currency-usd-circle-outline | | coins-outline | circle-multiple-outline | | contact-mail | card-account-mail | | contact-mail-outline | card-account-mail-outline | | contact-phone | card-account-phone | | contact-phone-outline | card-account-phone-outline | | cowboy | account-cowboy-hat | | database-refresh | database-sync | | dictionary | book-alphabet | | edge | microsoft-edge | | edge-legacy | microsoft-edge-legacy | | file-document-box | text-box | | file-document-box-check-outline | text-box-check-outline | | file-document-box-minus | text-box-minus | | file-document-box-minus-outline | text-box-minus-outline | | file-document-box-multiple | text-box-multiple | | file-document-box-multiple-outline | text-box-multiple-outline | | file-document-box-outline | text-box-outline | | file-document-box-plus | text-box-plus | | file-document-box-plus-outline | text-box-plus-outline | | file-document-box-remove | text-box-remove | | file-document-box-remove-outline | text-box-remove-outline | | file-document-box-search | text-box-search | | file-document-box-search-outline | text-box-search-outline | | file-settings-variant | file-cog | | file-settings-variant-outline | file-cog-outline | | folder-settings-variant | folder-cog | | folder-settings-variant-outline | folder-cog-outline | | github-circle | github | | google-adwords | google-ads | | hackernews | y-combinator | | hotel | bed | | image-filter | image-multiple-outline | | internet-explorer | microsoft-internet-explorer | | json | code-json | | **kotlin** | **language-kotlin** | | **library-books** | **filmstrip-box** | | library-movie | filmstrip-box-multiple | | library-music | music-box-multiple | | library-music-outline | music-box-multiple-outline | | **library-video** | **play-box-mutiple** | | **markdown** | **language-markdown** | | **markdown-outline** | **language-markdown-outline** | | message-settings-variant | message-cog | | message-settings-variant-outline | message-cog-outline | | microsoft-dynamics | microsoft-dynamics-365 | | network-router | router-network | | office | microsoft-office | | onedrive | microsoft-onedrive | | onenote | microsoft-onenote | | outlook | microsoft-outlook | | playstation | sony-playstation | | **periodic-table-co** | **molecule-co** | | **periodic-table-co2** | **molecule-co2** | | pot | pot-steam | | ruby | language-ruby | | sailing | sail-boat | | settings | cog | | settings-box | cog-box | | settings-outline | cog-outline | | settings-transfer | cog-transfer | | settings-transfer-outline | cog-transfer-outline | | shield-refresh | shield-sync | | shield-refresh-outline | shield-sync-outline | | sort-alphabetical | sort-alphabetical-variant | | sort-alphabetical-ascending | sort-alphabetical-ascending-variant | | sort-alphabetical-descending | sort-alphabetical-descending-variant | | sort-numeric | sort-numeric-variant | | star-half | star-half-full | | storefront | storefront-outline | | **timer** | **timer-outline** | | **timer-off** | **timer-off-outline** | | towing | tow-truck | | voice | account-voice | | wall-sconce-variant | wall-sconce-round-variant | | wii | nintendo-wii | | wiiu | nintendo-wiiu | | windows | microsoft-windows | | windows-classic | microsoft-windows-classic | | worker | account-hard-hat | | xbox | microsoft-xbox | | xbox-controller | microsoft-xbox-controller | | xbox-controller-battery-alert | microsoft-xbox-controller-battery-alert | | xbox-controller-battery-charging | microsoft-xbox-controller-battery-charging | | xbox-controller-battery-empty | microsoft-xbox-controller-battery-empty | | xbox-controller-battery-full | microsoft-xbox-controller-battery-full | | xbox-controller-battery-low | microsoft-xbox-controller-battery-low | | xbox-controller-battery-medium | microsoft-xbox-controller-battery-medium | | xbox-controller-battery-unknown | microsoft-xbox-controller-battery-unknown | | xbox-controller-menu | microsoft-xbox-controller-menu | | xbox-controller-off | microsoft-xbox-controller-off | | xbox-controller-view | microsoft-xbox-controller-view | | yammer | microsoft-yammer | | youtube-creator-studio | youtube-studio |

[Templarian]

The release has gone out. 🚀 Lets use this to track any issues that come up.

[DannyDelott]

Woo, upgraded our app and I'm loving the new names!

One thing I noticed is that mdi-blank was left out of the release? It's a silly one, but really useful 🙂

[Templarian]

@DannyDelott Good to hear! Naming should set us up for the next 5000 icons.

https://cdn.materialdesignicons.com/5.0.45/ I'm seeing the class defined here. Can you double check?

.mdi-blank::before {
    content: "\F68C";
    visibility: hidden;
}

Just to clarify... blank was never a real icon. It's the solid icon just hidden. Only exists in CSS.

[Patricol]

Wrote a python script to make the conversions; immense headache averted; hopefully others find it useful.

https://gist.github.com/Patricol/81d057e7b4e40616b13cd5e3b988cb7a

Just give files as args and result is printed to stdout. ignores deprecated characters.

[Templarian]

@Patricol Nice! It looks like you're using the codepoints. Those are really only meant to map the CSS class to the webfont. If you're using SCSS there is a helper function to map the name to a codepoint.

Part of 5.0 onward will be building docs/solutions to move people away from the webfont.

[mririgoyen]

Sorry for the thumbs down, because I think its awesome you created something to solve a problem. But I cannot give positive praise to people using the codepoints directly. I hope you consider changing how you consume our library to something less prone to breaking the future. 😄

[Templarian]

Yeah, we need to make that a lot more explicit in the documentation shortly. It's going to be a rare few, but it will be obvious as they start to update to 5.0. The GUIDs in the meta.json 5+ might be a good way if they don't want to use icon names as they never change.

[Patricol]

Sorry for the thumbs down, because I think its awesome you created something to solve a problem. But I cannot give positive praise to people using the codepoints directly. I hope you consider changing how you consume our library to something less prone to breaking the future.

Understandable; though I'm not aware of any way to avoid using codepoints with Polybar. It reads symbols directly from its config file with no processing. I'm not actually using this as a webfont; but as an icon set for a status bar that only displays fonts.

Not expecting this use case to be supported.

Thank you all so much for your work on this project! It has been a fantastic resource for me.

[Templarian]

@Patricol Hearing how the icons are used is very helpful to us. This is definitely outside of our aim, but it's good that you found a solution. My only take would be to write a basic mapper that centralizes the codepoints and icon names. Basic as: f(name) { arr = { 'name': 'codepoint' }; return arr[name];}

[Mariusthvdb]

not sure if an individual icon question is allowed...forgive me of not:

what about github-circle? this is used in the core GitHub sensor in Home-assitant, and on MDI only github is listed now? Or is this a bug, and should it really be github-circle after all

thanks for allowing edit never mind... missed the conversion table.. its is all spelled out there.

[mririgoyen]

not sure if an individual icon question is allowed...forgive me of not:

what about github-circle? this is used in the core GitHub sensor in Home-assitant, and on MDI only github is listed now? Or is this a bug, and should it really be github-circle after all

thanks for allowing

github-circle was renamed github. The maintainer of the GitHub sensor in HomeAssistant will need to update to the new name when they upgrade to v5.

[Mariusthvdb]

yes, thanks, I just crossposted my apology. Will PR the sensor in HA accordingly.

[Templarian]

@Mariusthvdb To add more detail... we've informed Home Assistant to be very careful updating to v5. We suggested for them to map old icon names to icons that exist in v5. Not sure how they decided to handle this.

[mririgoyen]

See https://github.com/home-assistant/frontend/issues/5094.

[Mariusthvdb]

thanks for informing us so detailed. Will keep an eye on this of and when it happens. As it stands 107 HA hasn't updated yet, but it is still in beta, so maybe the release will.

[ziofat]

Noticed there are some icons renamed but not listed? Where is the airplay which seems to be renamed to apple-airplay?

[PeterShaggyNoble]

Apologies, @ziofat - somehow managed to miss 4 renames, despite me being the one to rename those particular icons. 🙄 They've been edited into the list now - thanks for letting us know.

[DonWillems]

I use the .ttf to add the icons to Adobe Illustrator. Previously (in a prior version) I was able to add them by clicking the icon in the cheatsheet and by doing that copy-pasting it to a text field in Illustrator. Now, when using that same process, the incorrect Icon is pasted in Illustrator, as the font file unicode seems to omitting the first 0. e.g. F012C (mdi-check) is U+f12c in the Illustrator glyphs tool.

Any idea what caused this change, or anyone else experiencing this?

Sorry if this is not the place to ask about this change.

[Templarian]

@DonWillems Using the webfont locally was never a supported usage. But part of v5 work was to provide a desktop font.

https://github.com/Templarian/MaterialDesign-Font

Unfortunately you will need to update to use the new codepoints still, but this font file is built real time, so always has the latest icon changes.

[DonWillems]

@DonWillems Using the webfont locally was never a supported usage. But part of v5 work was to provide a desktop font.

https://github.com/Templarian/MaterialDesign-Font

Thanks, exactly what I needed!

[Templarian]

Leaving this issue opened for a while longer. Note 5.1.45 is now released also addressing several minor bugs in the 5.0 release.

[mririgoyen]

We're preparing the 5.2.45 release, so I'm going to close this. Thank you to all contributors who worked so hard to make these breaking changes as smooth as possible. Thank you to everyone else who helped report issues so we could resolve them quickly. 😄

[chphmh]

@Patricol Hearing how the icons are used is very helpful to us.

@Templarian , we have been using the icons in a similar way as @DonWillems described. We copy an icon from the cheatsheet into a text element with the webfont selected in Adobe XD. This allows us to exactly set the icon size via font size so that it is the same for all icons. (Setting equal sizes via SVG icons and normal width/height is very difficult because not all icons have the same outer dimensions. Or also if we want to change a set of icons in a mockup quickly from say 24px to 36px.)

Of course this method relies on the codepoints and breaks with the update. As far as I understand we should migrate to the desktop font now for our XD mockups? Will the codepoints stay the same for that one?

Is there a plan to use the icon names (like "fish-off" or "mdi-fish-off") directly as ligatures for the icons, so that someone using the webfont or desktop font is not relying on the codepoints? (Google is doing that with their Material icon set as stated in https://google.github.io/material-design-icons/#using-the-icons-in-html.)

In any case, thank you for your work and the great icon set! 👍

[mririgoyen]

You should absolutely be using the desktop TTF for Adobe XD (or other desktop applications). The codepoints were all changed in v5 to support how quickly this font is growing and we were running out of points in the area we were operating in. Using the desktop TTF should not break moving forward, unless specific icons have been removed or replaced in new releases. It will be important to keep an eye on our changelog as we make releases. Major breaking releases are typically saved for the major version numbers (e.g. the next one will be v6), but we sometimes have to make small breaking changes in minor releases.

As far as ligatures, we have no plans to support ligatures. They are way too much work to support/maintain and provide very little benefit. You should not be using a font on the web anyways. You can search our past issues to find more information and discussions around ligatures.

[Templarian]

@chphmh We can't use ligatures. I actually coded it, but our font is too large. Ligatures table has a limitation in the font spec that means we basically can only encode a portion of our glyphs. Was trying to find the issue where I actually broke down the full spec and why, but long story too many icons.

[Templarian]

@chphmh Read more on ligatures: #1013

[chphmh]

Thank you for your answers! We will start using the desktop font for our design files. And thanks again for this awesome project!