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 home-assistant/frontend#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!