Add `handle-down-right` icon

[ocavue]

What is the purpose of this pull request?

• [x] New Icon
• [ ] Bug fix
• [ ] New Feature
• [ ] Documentation update
• [ ] Other:

Description

This PR adds a new handle-down-right icon, shown below.

Icon use case

This is to represent a resize handle at the bottom right corner of a resizable object (e.g. <textarea>). (For this reason, this icon is not centered).

Browsers would display two (or more, depending on the browser) slashes for CSS resize rule.

Alternative icon designs

Icon Design Checklist

Concept

• [x] I have provided valid use cases for each icon.
• [x] I have not added any a brand or logo icon.
• [x] I have not used any hate symbols.
• [x] I have not included any religious or political imagery.

Author, credits & license

• [ ] The icons are solely my own creation.
• [ ] The icons were originally created in #<issueNumber> by @<githubUser>
• [x] I've based them on the following Lucide icons: slash
• [x] I've based them on the following design:
  • SmartIcons Glyph / angle-2 Apache 2.0
  • Vaadin Icons / handle-corner CC BY SA 4.0

Naming

• [x] I've read and followed the naming conventions
• [x] I've named icons by what they are rather than their use case.
• [x] I've provided meta JSON files in icons/[iconName].json.

Design

• [x] I've read and followed the icon design guidelines
• [x] I've made sure that the icons look sharp on low DPI displays.
• [x] I've made sure that the icons look consistent with the icon set in size, optical volume and density.
• [x] I've made sure that the icons are visually centered.
• [x] I've correctly optimized all icons to two points of precision.

Before Submitting

• [x] I've read the Contribution Guidelines.
• [x] I've checked if there was an existing PR that solves the same issue.

[github-actions[bot]]

Added or changed icons

Preview cohesion

Preview stroke widths

DPI Preview (24px)

Icon X-rays

[ocavue]

Icon is not visually centered

I think this icon looks better when it's not centered. However, if the visual center is so important, we could consider handle-down-right-alt-4 or handle-down-right-alt-5 in the PR description.

Name describes usecase rather than content

What's your recommendation about the naming? Here are some alternative names I can think of:

• angle-down-right
• slash-slash

[damien-schneider]

In my opinion, 'handle-down-right' is more intuitive. In the Phosphor library, it is named 'notche,' but I find this less intuitive.

Regarding the positioning, I don't have a strong opinion. As for the number of slashes, I believe that 2 is much better and more in line with the spirit of the library.

[ericfennis]

@jguddas I think looking at the usecase of this icon, I think positioning it centered makes it hard to use this icon.

For example, if you want to position it with CSS, it is intuitive to use it like this:

.icon-handle-down-right {
  position: absolute;
  bottom: 0;
  right: 0;
}

If we center this, you need to pixel-position it. Which is annoying from DX point of view. We had a related discussion before with all the signal icons. We decided to prefer DX over the guidelines.

For naming, we like to use generic names for what it represents. But not sure what generic names we should use for this. Since it is hard to for two little lines. I can imagine we want to have other variants as well for other corners. Since it represents "grip lines" I think grip-lines-right-down will work.

[jguddas]

I'm against adding this.

[damien-schneider]

I'm against adding this.

I'm using lucid for a SaaS, and the only icon I still need to have an other library (making it non-consistent) is this one, so this icon is needed, really....

[karsa-mistmere]

I agree with @ericfennis and I'm okay with adding this as either grip-lines-right-down, grip-lines-bottom-right or grip-lines-sw.

[ericfennis]

Not sure why @jguddas is against it. It has a valid use case. And seems like a nice addition next to the current grip icons.