Material-design-icons: Icon request: hashtag

[The-Don-Himself]

First, wonderfully designed icon set I must admit.

I think it would be awesome to include a hashtag icon.

[valerio-bozzolan]

You can appreciate the character # itself :sunglasses:

Think about it.

[The-Don-Himself]

@valerio-bozzolan
Do you mean doing something like this?

<i class="material-icons">#</i>

I have a social commerce kind of app where I add hashtags to category names to let you see products in a tweeter kind of way. This is how the hashtag icon looks

<i class="material-icons">#</i>Snacks, Cakes and Desserts

Result

Not nice at all. Maybe I am mistaken, what be your suggestion?

[valerio-bozzolan]

Oh sorry, you are right. Try with:

<span class="m4gic-googl">#<span> Ice-creams

Then you can edit your stylesheet to make that tag displaying a perfectly in-line icon of an hashtag.

Edited: sorry for the humor. Removed.

[joelday]

It's ubiquitous as an icon and it makes sense to provide it as such so that 1. you can use a common icon hosting component instead of conditionally switching to a text based component, 2. not have to manually style it, 3. not require the font if you're otherwise using SVGs and 4. have consistent rasterization of the icons in various browsers.

@valerio-bozzolan, I'm sorry, but I feel I have to make the observation that your response, albeit 😎, was pretty shortsighted and condescending. Not the kind of thing that makes people feel good when there's a comment on their GitHub issue.

[valerio-bozzolan]

I only wanted to say that a cute #, as a cute A, or a cute s and d, can be found in any normal web font. And we don't know why some web fonts provide characters and not icons, but this provides icons and no characters. That's a bug?

Not funny? OK. ¯\_(ツ)_/¯

[The-Don-Himself]

I just brushed it off as a misunderstanding. It seems like @valerio-bozzolan is from Italy, I'm from Kenya so I reckon miscommunication can happen. That said, the only thing I wish @valerio-bozzolan could change is the confused reaction emoji he tagged this issue with.

For those still looking to get this, I found manually adding some styling achieves a near perfect result

<i style="vertical-align:text-bottom; font-weight:bold" class="material-icons">#</i>

Gives

[retnikt]

Why not add it? A hash is more than punctuation. It can represent:

• a stylized bullet point in a list
• link anchors
• tags, as in social media or SEO
• checksum/digest/hash algorithms
• social media in general
• a grid
• tic tac toe

Icons8, for example, has 208 icons for a hashtag. https://icons8.com/icons/set/hash

This:

<i style="vertical-align:text-bottom; font-weight:bold" class="material-icons">#</i>

is inadequate as a workaround, because many applications, frameworks, and libraries, allow you to input an icon name/ID from Material Design icons, but not just custom HTML to display a fake icon.

This icon could easily just be the bold italic hashtag from Roboto or something like that, converted, or if you want to design it from scratch, it would still take like 10 minutes, right?

[valerio-bozzolan]

This:

<i style="vertical-align:text-bottom; font-weight:bold" class="material-icons">#</i>

is inadequate as a workaround, because many applications, frameworks, and libraries, allow you to input an icon name/ID from Material Design icons, but not just custom HTML to display a fake icon.

This icon could easily just be the bold italic hashtag from Roboto or something like that, converted, or if you want to design it from scratch, it would still take like 10 minutes, right?

@retnikt Just a punctuation. What you are talking about ("custom HTML"), it's CSS.

Moreover, If you define a CSS class with these 3 rules in your stylesheet, for example this:

.my-material-icons-foo {
    vertical-align:text-bottom;
    font-weight:bold;
}

Then from the developer perspective you could just adopt this clean way:

<i class="my-material-icons-foo">#</i>

Another punctuation. What you are talking about, a "fake icon", is just really a font character. Every icon in this pack is a font character. From the "fake" perspective, every icon in the world using this repository would really be a "fake icon". This suggested way is not more or less "fake" than the "usual" one.

Again, this is just an opinion (and I'm not related in any way with this repository): this is an icon font web pack and maybe it should include just icons, and not also every character in the world, because for this second need there already are other font families, like the Roboto, and with a very small CSS rule we already have them (all included), so we can keep the pack smaller. Some packs for the icons, some packs for the characters.

Moreover, you suggested to just copy the Roboto character design in this pack, but if you exactly want this, then you can consider just adopting the solution suggested by @The-Don-Himself, because it's exactly what you want (without putting everything in a single font pack).