Create new Dashicons (4.9-5.2)

[EmpireOfLight]

This ticket is for new Dashicons for the 4.9 release cycle.
It is a continuation of the ticket https://core.trac.wordpress.org/ticket/39296

The following icons has been requested:

Flip of Editor-RTL: ​https://github.com/WordPress/dashicons/issues/111
A reverse of ​https://developer.wordpress.org/resource/dashicons/#editor-rtl

Rest API: ​https://github.com/WordPress/dashicons/issues/152

Variation on earth/world icon (admin-site): ​https://github.com/WordPress/dashicons/issues/95

Yes Alt: ​https://github.com/WordPress/dashicons/issues/108

[jaymanpandya]

Flip of Editor-RTL: PR submitted - ​https://github.com/WordPress/dashicons/pull/227

Rest API: PR submitted - ​https://github.com/WordPress/dashicons/pull/226

Variation on earth/world icon (admin-site): PR merged - ​https://github.com/WordPress/dashicons/pull/204

Let me know if anything else is needed.

[jaymanpandya]

Yes Alt: PR submitted - ​https://github.com/WordPress/dashicons/pull/228

[jaymanpandya]

Flip of Editor-RTL, Addition of Editor-LTR and Yes Alt icons: PR submitted - ​https://github.com/WordPress/dashicons/pull/229

[netweb]

Replying to EmpireOfLight:

This ticket is for new Dashicons for the 4.9 release cycle.

Per above, moving to 4.9 milestone for visibility / consideration

[netweb]

Per the latest bug scrub ​https://wordpress.slack.com/archives/C02RQBWTW/p1506529060000272

@EmpireOfLight Is there anything I can help with? It would be great to get these Dashicon updates into 4.9 please

[EmpireOfLight]

Replying to netweb:

Per the latest bug scrub ​https://wordpress.slack.com/archives/C02RQBWTW/p1506529060000272

@EmpireOfLight Is there anything I can help with? It would be great to get these Dashicon updates into 4.9 please

Uploading the latest .zip files of the font an css now; I might need help making a patch though...

[EmpireOfLight]

Contains font files with new icons for 4.9 release.

[EmpireOfLight]

Having trouble creating the patch / .diff ifle. Also, there's a .woff file in /wp-includes/fonts that we don't make with the new repository (see ​https://github.com/WordPress/dashicons/tree/master/icon-font) ; should this be removed or should we be building a .woff file?

[netweb]

Replying to EmpireOfLight:

Having trouble creating the patch / .diff ifle. Also, there's a .woff file in /wp-includes/fonts that we don't make with the new repository (see ​https://github.com/WordPress/dashicons/tree/master/icon-font) ; should this be removed or should we be building a .woff file?

Likewise, having trouble here also creating a patch file to upload here, most likely this will need to be performed diretly during commit for these binary files /shrug

What I have done in 41074.diff​ is:

• Copy the dashicons.css file over the existing and manually tweak the formatting to match the coding standards.

• I used SVN to rename dashicons.woff to dashicons.woff2 and then copied over the new dashicons.woff2 from icon-font.zip​.

• dashicons.eot and dashicons.ttf` are also replaced with the new versions from icon-font.zip​.

• dashicons.svg remains unchanged, should anything be done to this SVG file? There is no SVG in icon-font.zip​

• The remaining files in icon-font.zip​ I've not added to the /wp-includes/fonts folder, should they?

[melchoyce]

@EmpireOfLight Could you create a list of new or updated dashicons, similar to this? https://core.trac.wordpress.org/ticket/30902#comment:61

[EmpireOfLight]

I think the problem is that the dashicons grunt build doesn't create a .woff file, just a .woff2 file. But there is a .woff file in wp-includes. Should the build be making a .woff file, or can we take it out?

[EmpireOfLight]

Replying to netweb:

Replying to EmpireOfLight:

Having trouble creating the patch / .diff ifle. Also, there's a .woff file in /wp-includes/fonts that we don't make with the new repository (see ​https://github.com/WordPress/dashicons/tree/master/icon-font) ; should this be removed or should we be building a .woff file?

Hoping someone can answer this...

Likewise, having trouble here also creating a patch file to upload here, most likely this will need to be performed diretly during commit for these binary files /shrug

What I have done in 41074.diff​ is:

• Copy the dashicons.css file over the existing and manually tweak the formatting to match the coding standards.

• I used SVN to rename dashicons.woff to dashicons.woff2 and then copied over the new dashicons.woff2 from icon-font.zip​.

I'm confused about what you did here...does this mean there's no longer a .woff file?

• dashicons.eot and dashicons.ttf` are also replaced with the new versions from icon-font.zip​.

• dashicons.svg remains unchanged, should anything be done to this SVG file? There is no SVG in icon-font.zip​

• The remaining files in icon-font.zip​ I've not added to the /wp-includes/fonts folder, should they?

I think you're referring to the .html files... dashicons.html is just for previewing the font, and I'm not sure what demo-template.html does, but they don't need to be included. Maybe the grunt build process should be updated to create a directory with just the font files, and have the html/css files go somewhere else.

[Joen]

I was asked whether we can ditch the WOFF file. The answer is "almost certainly yes". The nuance is that IE11 doesn't support WOFF2 (see ​https://stackoverflow.com/questions/37086562/what-kind-of-font-files-do-i-need-for-modern-browsers-android-and-ios and ​https://caniuse.com/#feat=woff2), but then it should just fall back to using the .ttf font which is bundled with it.

The only way to be sure is to test ​https://github.com/WordPress/dashicons/blob/master/icon-font/dashicons.html in IE11 (and other browsers) and see if they show up fine. My Windows VM was lost recently, so I can't easily test.

[folletto]

A few more details that I got from when I created the current Dashicons build script

1. The build script can generate either a file or embedded (not both), in the discussion we chose to use the embedded one (​chat).
2. Which means: dashicons.css is generated with embedded WOFF, so there's no file used (​source).

Which means that the new CSS from the Dashicon repository includes the WOFF content inline, making no use of the WOFF file as a separate file.

Note that some requirements might be dealt with changes in the build script — from the discussion above doesn't seem we have any need, but I wanted to clarify that just in case. :)

[netweb]

Replying to EmpireOfLight:

I'm confused about what you did here...does this mean there's no longer a .woff file?

Yes, I'd replaced the .woff with the .woff2, that won't work though based on the need to keep .woff support for IE11 per the Slack chat

Maybe the grunt build process should be updated to create a directory with just the font files, and have the html/css files go somewhere else.

Yes, I think this is the best solution, get the dashicons grunt build to build a "package" that can be "dropped" into core.

[netweb]

Replying to Joen:

I was asked whether we can ditch the WOFF file. The answer is "almost certainly yes". The nuance is that IE11 doesn't support WOFF2 (see ​https://stackoverflow.com/questions/37086562/what-kind-of-font-files-do-i-need-for-modern-browsers-android-and-ios and ​https://caniuse.com/#feat=woff2), but then it should just fall back to using the .ttf font which is bundled with it.

The only way to be sure is to test ​https://github.com/WordPress/dashicons/blob/master/icon-font/dashicons.html in IE11 (and other browsers) and see if they show up fine. My Windows VM was lost recently, so I can't easily test.

Here's ​https://github.com/WordPress/dashicons/blob/master/icon-font/dashicons.html on Windows 10:

• Edge ​https://cloudup.com/cEJdxDMZOCg
  • 
• IE11 ​https://cloudup.com/c4z4InLmJ9w
  • 
• Chrome ​https://cloudup.com/cvCCInR-zm8 8

[EmpireOfLight]

Dashicons Icon font files with new dashicons for 4.9.

[EmpireOfLight]

Diff file for new dashicons for 4.9

[EmpireOfLight]

Just uploaded the latest icon font and got a diff created. Please test.

This includes new icons for 4.9:
Dashicons: Update to the latest files.
New icons:
.dashicons-editor-rtl (f320)
.dashicons-rest-api (f124)
.dashicons-admin-site-alt (f11d)
.dashicons-admin-site-alt2 (f11e)
.dashicons-admin-site-alt3 (f11f)
.dashicons-yes-alt (f12a)

props liljimmi, melchoyce, empireoflight, netweb , folletto, joen

[melchoyce]

@netweb does new-dashicons.41074.diff​ look good to you?

[netweb]

Replying to EmpireOfLight:

New icons:
.dashicons-editor-rtl (f320)
.dashicons-rest-api (f124)
.dashicons-admin-site-alt (f11d)
.dashicons-admin-site-alt2 (f11e)
.dashicons-admin-site-alt3 (f11f)
.dashicons-yes-alt (f12a)

This is an updated list revising on the above list:

• Icons Added
  • .dashicons-admin-site-alt - f11d
  • .dashicons-admin-site-alt2 - f11e
  • .dashicons-admin-site-alt3 - f11f
  • .dashicons-editor-ltr - f129
  • .dashicons-email-alt2 - f10a
  • .dashicons-menu-alt - f10b
  • .dashicons-plus-light - f10c
  • .dashicons-rest-api - f124
  • .dashicons-yes-alt - f12a
  • BuddiIcons - These were previously only in the icon font, now they're publicly exposed in dashicons.css

• Icons Removed:
  • .dashicons-plus-alt2 - f543
  • .dashicons-share1 - f237

• Icons Changed:
  • .dashicons-trash - Previously f182, now f10d

[netweb]

The review also discovered instances of missing classes no longer generated by the Dashicons build script/tools, these have been manually added back in 41074.3.diff​, the source repo needs updating to accommodate these classes:

• .dashicons-format-links:before and .dashicons-format-standard:before

  /* Both Admin Menu and Post Formats */
  
  .dashicons-admin-links:before,
  .dashicons-format-links:before {
          content: "\f103";
  }
  
  .dashicons-admin-post:before,
  .dashicons-format-standard:before {
          content: "\f109";
  }
  

• .dashicons-welcome-edit-page:before

  /* Welcome Screen Icons */
  
  .dashicons-welcome-write-blog:before,
  .dashicons-welcome-edit-page:before {
          content: "\f119";
  }
  

• .dashicons-editor-distractionfree:before

[netweb]

Patch notes for 41074.3.diff​

• Leaves the WOFF Base64 in dashicons.css
• No changes to the existing WOFF src/wp-includes/fonts/dashicons.woff file
• No changes to the existing WOFF src/wp-includes/fonts/dashicons.svg file - See Note 1
• Updated dashicons.css manually to match WP CSS Coding Standards
• Updated dashicons.css manually to sorting CSS classes to reduce churn and cleaner blame

Edit: Updated the SVG in 41074.4.diff​

[Joen]

Note that if an icon shifted Unicode addresses in the new build process, this can be corrected and we can rebuild the font to include icons in the right location. You can let me know any icons that need shifting.

[netweb]

Per ​https://wordpress.slack.com/archives/C03EESJAW/p1508860337000166

The only thing that might be an issue is the dashicons.svg file. I didn't include a new one in my patch basically, ​https://github.com/WordPress/dashicons/tree/master/svg-sprite should replace ​https://github.com/WordPress/WordPress/blob/master/wp-includes/fonts/dashicons.svg

I've updated the patch in 41074.4.diff​ to include this SVG now

[netweb]

Replying to Joen:

Note that if an icon shifted Unicode addresses in the new build process, this can be corrected and we can rebuild the font to include icons in the right location. You can let me know any icons that need shifting.

Excellent, there is only 1 in need of this: .dashicons-trash from f10d back to it's original f182

[netweb]

Per ​https://wordpress.slack.com/archives/C03EESJAW/p1508909585000101

" I don't think the Dashicons SVG can replace the old SVG. Pretty sure the old SVG is an SVG font, whereas the new is a sprite "

In that case, ignore 41074.4.diff​ and let's stick with 41074.3.diff​

---

Also per Slack ​discussion just now, as none of the new icons are currently used in core and to allow some time for testing and fixing the build script to fix the issues I've outlined above we are going to punt this to 5.0.

[Joen]

I have made a PR upstream in the dashicons repo to adjust the build process per feedback here. Please see ​https://github.com/WordPress/dashicons/pull/246

[netweb]

A new dashicon for [make.wordpress.org/tide Tide] is also being worked on in ​dashicons/issues/248, refreshed patch will also need to include this.

[bahia0019]

I've added an SVG icon for Instagram. It's formatted like the other SVGs.
I don't know the build process for the set. But I figure those smarter than me can finalize the adoption of it.
I recently had a need for it, and noticed that FB, Twitter, and G+ are all there, but Instagram wasn't. Figured it should be.

​https://github.com/WordPress/dashicons/pull/272

Other people have asked for it as well:
​https://github.com/WordPress/dashicons/issues/63
​https://github.com/WordPress/dashicons/issues/12
​https://github.com/WordPress/dashicons/issues/136
https://core.trac.wordpress.org/ticket/34166
https://core.trac.wordpress.org/ticket/32568

[EmpireOfLight]

There are lots of new icon requests on github. Here they are so we can comment on whether any should be included in the next release:

Folder icons: ​https://github.com/WordPress/dashicons/issues/273
Broken heart: ​https://github.com/WordPress/dashicons/issues/271
Coffee bean: ​https://github.com/WordPress/dashicons/issues/270
Printer: ​https://github.com/WordPress/dashicons/issues/268
Various: ​https://github.com/WordPress/dashicons/issues/266
Beer: ​https://github.com/WordPress/dashicons/issues/256
Tide team Icon: ​https://github.com/WordPress/dashicons/issues/248
RTL ordered list icon: ​https://github.com/WordPress/dashicons/issues/250
Code Standards icon: ​https://github.com/WordPress/dashicons/issues/263

Tide Team and RTL have been discussed and will be included in the next version of Dashicons. Printer seems pretty critical, but the rest are probably extraneous as we're trying to limit new icons until a better implementation/delivery method is finished. Any thoughts?

Edit: Also here: ​https://github.com/WordPress/dashicons/pull/265 is a resized a stats Gridicon that could be used as a top level menu icon.

[jbpaul17]

@EmpireOfLight I'm biased (on the Tide dashicon), but I concur with your analysis of which should be included.

[netweb]

Can we also get the coding-standards icon in as this is now an official WordPress team please :)

[jbpaul17]

@netweb is there someone working on the coding-standards icon?

@Joen are there any Gutenberg-related icons that would be good to land before 5.0 or are you all ok waiting for those icons to land alongside Gutenberg in 5.0?

[netweb]

Replying to jbpaul17:

@netweb is there someone working on the coding-standards icon?

It is attached to the ​https://github.com/WordPress/dashicons/issues/263 issue

[Joen]

@Joen are there any Gutenberg-related icons that would be good to land before 5.0 or are you all ok waiting for those icons to land alongside Gutenberg in 5.0?

We don't need any icons to land before 5.0, no. In fact, for now and because we've needed to be able to create icons for Gutenberg fast, every new icon created for Gutenberg are in a separate directory: ​https://github.com/WordPress/dashicons/tree/master/sources/svg/gutenberg

Icons in that directory are not added into the icon font, they are added only to the react component. Gutenberg doesn't use the icon font at all. But anyone should feel free to comment on their design.

I think the most important thing to review, though, is the new build process. Recent work was done in ​https://github.com/WordPress/dashicons/pull/246. The build process means that creating new icons is not an arduous process, which is important so as to keep the project alive. It comes with only two changes per how it's been done in the past:

1. we can't edit url("...") to be url( "..." ) without hacking core files.
2. we can't customize the order of the icons, nor add "grouping" headers. Icons are output alphabetically

1 I don't care about, it seems a trivial price to pay for taking the vinegar and human error aspect out of adding icons. 2 I personally think is a benefit. But nonetheless these are aspects that should be considered before switching to the process-built icon font, which I believe still hasn't happened?

[netweb]

Replying to Joen:

I think the most important thing to review, though, is the new build process. Recent work was done in ​https://github.com/WordPress/dashicons/pull/246. The build process means that creating new icons is not an arduous process, which is important so as to keep the project alive. It comes with only two changes per how it's been done in the past:

1. we can't edit url("...") to be url( "..." ) without hacking core files.
2. we can't customize the order of the icons, nor add "grouping" headers. Icons are output alphabetically

1 I don't care about, it seems a trivial price to pay for taking the vinegar and human error aspect out of adding icons. 2 I personally think is a benefit. But nonetheless these are aspects that should be considered before switching to the process-built icon font, which I believe still hasn't happened?

I've just created ​https://github.com/WordPress/dashicons/pull/298, this PR updates the CSS template that generates dashicons.css to meet WordPress CSS Coding Standards. As noted in the PR I've added stylelint support so that it ignores the spacing and quotes around the URLs.

The above makes 1. above no longer a concern once stylelint is added and 2. I'm happy if your happy 🎉

[Joen]

💥

Amazing. Sometimes the best way to get something fixed is to proclaim it as impossible.

[JeffPaul]

@netweb @Joen is there a way to utilize the Tide dashicon before this ticket gets committed in a major release? I'm asking as we'd start using it on make/tide, for contributor day pins/stickers, and for profile badges (among other places I'm not yet reminded of).

[Joen]

is there a way to utilize the Tide dashicon before this ticket gets committed in a major release? I'm asking as we'd start using it on make/tide, for contributor day pins/stickers, and for profile badges (among other places I'm not yet reminded of).

Does the release of the updated icon font have to wait for a new release? Keep in mind I'm still relatively new to Dashicons, so forgive me if that was an obvious question.

You could do something like this:

​https://codepen.io/joen/pen/jxQXvB?editors=1100 — that is, if it's largely used on P2s, you could paste the CSS into the custom CSS pane and utilize it as a class.

[obenland]

Is there a reason this can't go into 4.9.7?

[netweb]

Replying to Joen:

@Joen are there any Gutenberg-related icons that would be good to land before 5.0 or are you all ok waiting for those icons to land alongside Gutenberg in 5.0?

We don't need any icons to land before 5.0, no. In fact, for now and because we've needed to be able to create icons for Gutenberg fast, every new icon created for Gutenberg are in a separate directory: ​https://github.com/WordPress/dashicons/tree/master/sources/svg/gutenberg

Icons in that directory are not added into the icon font, they are added only to the react component. Gutenberg doesn't use the icon font at all. But anyone should feel free to comment on their design.

Do we need to change by way of moving these above mentioned Gutenberg icons for the 5.0 release @Joen ?

[Joen]

Do we need to change by way of moving these above mentioned Gutenberg icons for the 5.0 release @Joen ?

We don't need to, no. I suppose there's a larger question here of SVG support in the rest of the admin, and I have a slight preference for keeping the icons as they are today — gutenberg specific SVGs in a separate folder — until such a time as we have a better plan for moving onwards from the icon-font.

But if we need to do some rearranging, let me know and I'll try and see about a PR.

[netweb]

Replying to Joen:

Do we need to change by way of moving these above mentioned Gutenberg icons for the 5.0 release @Joen ?

We don't need to, no. I suppose there's a larger question here of SVG support in the rest of the admin, and I have a slight preference for keeping the icons as they are today — gutenberg specific SVGs in a separate folder — until such a time as we have a better plan for moving onwards from the icon-font.

This sounds good for 5.1 👍

But if we need to do some rearranging, let me know and I'll try and see about a PR.

I'm not sure if it is actually required, though for now I'll leave this ticket in the 5.0 milestone for merge visibility

[JeffPaul]

@netweb @Joen if this doesn't land in 5.0, it would be great to find another way to get the Tide dashicon available so it can be used in various community and marketing locations on make. ​https://github.com/WordPress/dashicons/issues/248 has been waiting patiently and would be ideal to have that landed ahead of this years' WCUS.

[EmpireOfLight]

The tide icon is in the current master branch of dashicons... what else needs to happen?

[Joen]

if this doesn't land in 5.0, it would be great to find another way to get the Tide dashicon available so it can be used in various community and marketing locations on make. ​https://github.com/WordPress/dashicons/issues/248 has been waiting patiently and would be ideal to have that landed ahead of this years' WCUS.

The tide icon is in the current master branch of dashicons... what else needs to happen?

So because of all the changes that's happened to Dashicons in the past year, it might be worth a quick summary.

• Dashicons are now automatically built using a build process. Grunt is used as a tool to convert a folder full of SVG files into an icon font, an SVG sprite, a folder of minimized and optimized SVG files, and a React component.
• Development happens in ​https://github.com/WordPress/dashicons
• The SVG files converted, one 20x20px SVG for each icon, are stored in the sources/svg folder: ​https://github.com/WordPress/dashicons/tree/master/sources/svg — any SVG file in that folder goes into the icon font.
• SVG files stored in the sources/svg/gutenberg do not go into the icon font. These only go into the React component.

So Ben is right. The tide icon is part of the icon font.

So what needs to happen? Well, we need to use the new icon font that's built from the SVG files, ​https://github.com/WordPress/dashicons/tree/master/icon-font, in WordPress, and replace the old icon font files. @netweb do you have more info on how to make this happen?

[desrosj]

Talked this over with @Joen today.

This still needs a new patch and testing. With 5.0 RC imminent, going to punt this.

[audrasjb]

Hello,

5.0.3 is going to be released in a couple of weeks.

It doesn't appear this ticket can be handled in the next couple of weeks. Let's address it in 5.1 which is coming in February. Feel free to ask for changing the milestone if you think this issue can be quickly resolved.

Cheers,

Jb

[JeffPaul]

@netweb @EmpireOfLight with trunk open for 5.2, any chance someone could work on a patch to land early in the 5.2 release cycle so we can ensure all the newly created Dashicons are available when 5.2 ships? I'm obviously biased on seeing the Tide icon become readily available, but I suspect there are others that would similarly be good to see available. Thanks!

[EmpireOfLight]

I'll do whatever I can to get Dashicons ready for 5.2... just need some guidance with the patching part.

[EmpireOfLight]

Contains new icon font files and svg-sprite

[EmpireOfLight]

I went ahead and built a fresh set of dashicons files from the github dashicons repo (​https://github.com/WordPress/dashicons), after merging 2 prs that requested new icons which appear to be critical for 5.2. I added them to the latest WP trunk github repo (​https://github.com/WordPress/WordPress) and tested locally-new icons appear to be working. Latest files and diff have been added attachments to this ticket.

[JeffPaul]

@melchoyce @jeremyfelt as you've both landed Dashicon updates in previous releases (albeit a while ago for each of you), can you help review this and potentially shepherd for 5.2? Note my bias is trying to see this committed so that Tide's Dashicon is finally available on Make and for marketing effort (e.g., Contributor Day, profile badges). Thanks!

[EmpireOfLight]

Can we do this at the next Design Ticket triage (Monday 17:30 UTC)?

[desrosj]

So I did some investigating. The ​developer resources Dashicons page uses the Dashicon version shipped in WordPress Core, and the font is not stored on the CDN at all. The new icons do, however, need to be added manually to the developer resources page after that site is updated to 5.2 (or trunk, if it runs the latest commit).

I was having an issue with the most recent patch, so I pulled down the Dashicons GIT repo, built the files, and created a new patch (which does not include the font file changes).

Here is the updated list of additions I see reviewing:

• .dashicons-admin-site-alt (f11d)
• .dashicons-admin-site-alt2 (f11e)
• .dashicons-admin-site-alt3 (f11f)
• .dashicons-buddicons-activity (f452)
• .dashicons-buddicons-bbpress-logo (f12b)
• .dashicons-buddicons-buddypress-logo (f448)
• .dashicons-buddicons-community (f453)
• .dashicons-buddicons-forums (f449)
• .dashicons-buddicons-friends (f454)
• .dashicons-buddicons-groups (f456)
• .dashicons-buddicons-pm (f457)
• .dashicons-buddicons-replies (f451)
• .dashicons-buddicons-topics (f450)
• .dashicons-buddicons-tracking (f455)
• .dashicons-businessperson (f12e)
• .dashicons-businesswoman (f12f)
• .dashicons-color-picker (f131)
• .dashicons-editor-ltr (f129)
• .dashicons-editor-ol-rtl (f12c)
• .dashicons-email-alt2 (f10a)
• .dashicons-instagram (f12d)
• .dashicons-menu-alt (f10b)
• .dashicons-plus-light (f10c)
• .dashicons-rest-api (f124)
• .dashicons-yes-alt (f12a)
• .dashicons-tide (f10d)

Overall this is looking good (pending some Windows testing). There are two points I need addressed and this can be committed.

All the icons appear to be displaying correctly except .dashicons-instagram. I have uploaded a screenshot of this for review.

After reading through the ticket, there are a few comments indicating that two icons were removed:

• .dashicons-plus-alt2 - f543
• .dashicons-share1 - f237

It is preferable to not remove icons. Once the icon is bundled and released with WordPress, we have to assume it is being used by someone and we should maintain that icon. I can't find any indication that dashicions-share1 was ever shipped in Core, but plus-alt2 was (introduced in [33126]). I have not been able to track down where in the GIT history this icon was removed, though.

Question on the .woff2 file. The .woff file will not be updated and remain as is, but I think that the .woff2 file can be introduced for anyone that wishes to load it as long as this will continue to be maintained (which I think is the intention).

I am also marking this a needs-dev-note so that everyone is aware of the new dashicons, and of the changes specified regarding .woff files in the previous paragraph. Happy to write that up!

[JeffPaul]

@desrosj .dashicons-instagram looks like it landed in the GitHub repo here: ​https://github.com/WordPress/dashicons/pull/272. I see where .dashicons-plus-alt2 was added, but I can't seem to find where it was removed either.

[SergeyBiryukov]

Replying to desrosj:

I can't find any indication that dashicions-share1 was ever shipped in Core, but plus-alt2 was (introduced in [33126]). I have not been able to track down where in the GIT history this icon was removed, though.

It appears to be lost during the ​switch to the new build process. plus-alt2 was added to codepoints.json, but not to icon-font/dashicons.css.

Seems to be an oversight, not an intentional choice. Could we restore it?

[SergeyBiryukov]

Same for share1: added to codepoints.json in the commit linked above, but not to icon-font/dashicons.css. Seems to be an oversight as well.

[desrosj]

Tested this with @ianbelanger on Windows today. The color-picker icon does not work in IE11. I opened ​this PR to update all files to correctly include the color-picker icon.

I looked through the history for the repo, and I can't find an SVG icon present for the plus-alt2 or the share1 icon.

Marking needs refresh pending that PR being merged.

[Joen]

All the icons appear to be displaying correctly except .dashicons-instagram. I have uploaded a screenshot of this for review.

That instagram icon looks like it wasn't fully "flattened". By making it a compound shape in Illustrator, i.e. single path in the SVG, it should probably go over fine.

Seems to be an oversight, not an intentional choice. Could we restore it?
Same for share1: added to codepoints.json in the commit linked above, but not to icon-font/dashicons.css. Seems to be an oversight as well.

Almost certainly an oversight, and thank you for catching this.

Just to clarify how things are _supposed_ to work.

• sources/svg should include SVGs that are included in both icon font and React component
• sources/gutenberg are not included in the icon font, these do not get codepoints, and are built only into the react component
• sources/svg-unused are icons that existed in the past, but were never actually shipped

Around codepoints.json, that file exists so that unicode locations for each icon the font persists across build processes. Many icon fonts rely solely on the CSS classname to reference an icon, and so it doesn't matter that the unicode location swaps places. That's obviously insufficient for the Dashicons font, which is why the codepoints.json file is referenced.

As we moved to a build process from the old manually built system, there was a great deal of manual work in porting existing unicode locations from the manually built font, to the codepoints file. To put it simply, every icon that existed in the font before the build process had to have its unicode location converted to hexadecimal to be included in the JSON file. This is what I referenced in this comment here: https://core.trac.wordpress.org/ticket/41074#comment:37

This is just to give some additional history and clarification. So it's entirely possible that icons that are supposed to be present in the codepoints file were forgotten due to human oversight. Thanks for helping catch these.

It is worth noting, though, that as soon as we ship the icon font that's made from the build process, everything from that point on is automated, which should reduce the chance of such human error in the future.

Hope that helps.

[JeffPaul]

@netweb as the owner of this ticket, are you able to help with the patch refresh while time still allows in the 5.2 release cycle?

[folletto]

Question: can we open separate Trac tickets for the various releases? This was opened for 4.9 but it seems it's still being used for every release after that. Thanks!

[desrosj]

@JeffPaul Happy to own this. I can commit the changes after the items I listed above are addressed.

@folletto I think that was the previous practice, but the Gutenberg feature focus caused this one to be punted repeatedly. I have adjusted the ticket title to indicate this addition spanned multiple releases. I have some ideas to make this process go more smoothly that I'll be brain dumping and experimenting with after 5.2 beta 1 this week. If you'd like, let's connect separately!

The Instagram icon ​has been fixed upstream.

That leaves the missing plus-alt2 and the share1 icons as the last two items to resolve.

I have ​opened a PR to re-add the `share1` icon. I was incorrect in my previous assessment that this icon was never shipped with core, so this should be re-added.

I believe that the reason the plus-alt2 icon is not being included in the build is being caused by the lack of an SVG file in the sources/svg folder. If someone can create an SVG file for this icon, a PR can be opened to re-add it to the built files. For reference, this is the <glyph> included in the current version of the dashicons.svg sprite:

<glyph unicode="&#xf543;" d="M1700 1100v-200h-600v-600h-200v600h-600v200h600v600h200v-600h600z" />

[cathibosco1]

@desrosj - I can create the missing

plus-alt2

as an svg today.
Can you point me to the .png or .ai file in github so I can recreate it as an SVG please? Thank you

[cathibosco1]

Status update -
@desrosj and I realized there is already a light weight plus-alt icon in the dashicons...

@desrosj created a pull request and is checking with @Joen regarding the impact of the css styles...

So, plus-light looks to be the same as plus-alt2 in terms of the design.

Thanks everyone for pushing this along today. I am here if you need a new .svg drafted.

[Joen]

I took a look at ​https://github.com/WordPress/dashicons/pull/346 and from what I can tell it's all fine. Let me know if there's nuance I missed.

[netweb]

Replying to desrosj:

@JeffPaul Happy to own this. I can commit the changes after the items I listed above are addressed.

Thanks @desrosj, sorry I've not had much time of late to contribute

[desrosj]

Updated wp-includes/fonts folder.

[desrosj]

@netweb no worries!

41074.6.diff​ and fonts.zip​ are the most recent patches.

Here is the final list of additions:

• .dashicons-admin-site-alt (f11d)
• .dashicons-admin-site-alt2 (f11e)
• .dashicons-admin-site-alt3 (f11f)
• .dashicons-buddicons-activity (f452)
• .dashicons-buddicons-bbpress-logo (f12b)
• .dashicons-buddicons-buddypress-logo (f448)
• .dashicons-buddicons-community (f453)
• .dashicons-buddicons-forums (f449)
• .dashicons-buddicons-friends (f454)
• .dashicons-buddicons-groups (f456)
• .dashicons-buddicons-pm (f457)
• .dashicons-buddicons-replies (f451)
• .dashicons-buddicons-topics (f450)
• .dashicons-buddicons-tracking (f455)
• .dashicons-businessperson (f12e)
• .dashicons-businesswoman (f12f)
• .dashicons-color-picker (f131)
• .dashicons-editor-ltr (f129)
• .dashicons-editor-ol-rtl (f12c)
• .dashicons-email-alt2 (f10a)
• .dashicons-instagram (f12d)
• .dashicons-menu-alt (f10b)
• .dashicons-rest-api (f124)
• .dashicons-yes-alt (f12a)
• .dashicons-tide (f10d)

Some notes:

• The .dashicons-share1 - f237 icon has been re-added (see ​GitHub-346).
• The .dashicons-plus-light (f10c) icon has been moved back to its original location and name of .dashicons-plus-alt2 - f543 (see ​GitHub-347).
• The Instagram icon has been fixed (see ​GitHub-344).

Going to work with @ianbelanger to double check Windows, but this looks good to go.

[ianbelanger]

Everything looks good on Windows @desrosj. I tested in Chrome, Firefox, IE11 and Edge. All icons are now present.

[desrosj]

Thanks, @ianbelanger!

[desrosj]

In 44940:

Administration: Update Dashicons to the latest version.

This change introduces the following new icons to the Dashicon font:

• .dashicons-admin-site-alt (f11d)
• .dashicons-admin-site-alt2 (f11e)
• .dashicons-admin-site-alt3 (f11f)
• .dashicons-buddicons-activity (f452)
• .dashicons-buddicons-bbpress-logo (f12b)
• .dashicons-buddicons-buddypress-logo (f448)
• .dashicons-buddicons-community (f453)
• .dashicons-buddicons-forums (f449)
• .dashicons-buddicons-friends (f454)
• .dashicons-buddicons-groups (f456)
• .dashicons-buddicons-pm (f457)
• .dashicons-buddicons-replies (f451)
• .dashicons-buddicons-topics (f450)
• .dashicons-buddicons-tracking (f455)
• .dashicons-businessperson (f12e)
• .dashicons-businesswoman (f12f)
• .dashicons-color-picker (f131)
• .dashicons-editor-ltr (f129)
• .dashicons-editor-ol-rtl (f12c)
• .dashicons-email-alt2 (f10a)
• .dashicons-instagram (f12d)
• .dashicons-menu-alt (f10b)
• .dashicons-rest-api (f124)
• .dashicons-yes-alt (f12a)
• .dashicons-tide (f10d)

These icons were added to the .ttf, and .eot font files, as well as the SVG sprite. However, they were not added to the .woff font file. The new dashicons.woff2 file should be utilized instead.

For instances where IE<11 needs to be supported, the .woff file will remain for backwards compatibility. However, if the new icons are needed in those scenarios, the WOFF format is now included as embedded within the dashicons.css.

Props EmpireOfLight, liljimmi, jaymanpandya, netweb, melchoyce, joen, folletto, nateallen, bahia0019, JeffPaul, desrosj, cathibosco1.
Fixes #41074.

[desrosj]

Missed @ianbelanger on the props list.

Reopening for the following tasks to be completed:

• Add new icons to the ​Dashicon developer resource.
• Write dev note.

I am working on both.

[desrosj]

Opened ​https://meta.trac.wordpress.org/ticket/4305.

[netweb]

Replying to EmpireOfLight:

There are lots of new icon requests on github. Here they are so we can comment on whether any should be included in the next release:

Code Standards icon: ​https://github.com/WordPress/dashicons/issues/263

It looks like this new icon for the #wpcs team was missed in the above, before creating a new ticket @desrosj I just want to confirm if that is indeed the case thanks.

[desrosj]

@netweb I was unaware that any other icons were in progress. If this can be merged completed prior to the fixes for #46611 are committed, it can be included with those changes.

[desrosj]

In 45040:

Administration: Fix Dashicon backwards compatibility issues.

In [44940], the Dashicon files in core were updated to contain the latest version of the font from the GitHub repo. This change follows that up by fixing several backwards compatibility issues caused by the new build process used to generate the font files and fixes the missing menu icon when viewing the admin on small screens.

• buddicons-bbpress-logo (f12b) was moved back to the correct location of f477.
• editor-ltr (f129) was moved back to the correct location of f10c.
• email-alt2 (f10a) was moved to the correct location of f467.

The following icons were restored to their previous locations:

• camera-alt (f129)
• edit-large (f327)
• editor-distractionfree (f211)
• update-alt (f113)
• twitter-alt (f302)
• text-page (f121)
• plugins-checked (f485)
• menu-alt3 (f349)
• menu-alt2 (f329)
• menu-alt (f228)
• Duplicate lock icon at location f315
• Duplicate editor-code icon at location f494
• arrow-up at f143.

The editor-ltr and editor-rtl icons had also been switched. The arrows now point in the correct directions at the correct Unicode locations (f10c and f320 respectively).

And, lastly, this change also introduces the code-standards (f13a) icon that was not included in the previous build.

Props afercia, earnjam, oztaser, joen, cathibosco1, ianbelanger, desrosj.
See #41074.
Fixes #46611.

[ryno267]

rem googleplus?

[builtbynorthby]

While beta testing 5.2 I noticed a plugin was missing the trash icon in its UI.

It turns out, two of the selectors are missing :before

.dashicons-exerpt-view {
	content: "\f164";
}

​https://github.com/WordPress/dashicons/blob/master/icon-font/css/dashicons.css#L1141

and

.dashicons-post-trash {
	content: "\f182";
}

​https://github.com/WordPress/dashicons/blob/master/icon-font/css/dashicons.css#L1153

[garrett-eclipse]

Another question seeing that CSS for the dashicons should .dashicons-exerpt-view not be .dashicons-excerpt-view for proper spelling of excerpt?

[desrosj]

Thanks @builtbynorthby! I have ​opened a PR upstream to fix this.

@garrett-eclipse both are currently present. .dashicons-exerpt-view is present for backward compatibility. The CSS had previously been released with the typo, so both versions are included. I also added a comment explaining that in the PR above. See #30832.

Also, forgot to mark this as has-dev-note. The note was posted here: ​https://make.wordpress.org/core/2019/04/11/dashicons-in-wordpress-5-2/.

[desrosj]

In 45225:

Administration: Add missing :before to two Dashicon class definitions.

Introduced in [45040].

Props builtbynorthby.
Fixes #41074.