![]() In the end, I was able to find the codepoints and icon names for 97 out of 104 missing icons. It helped that, oftentimes, Google (1) uses a specific range for an icon category, (2) assigns new icons to a category and a codepoint in the correct range, and (3) follows a naming convention (be straightforward and use words such as _add, _circle, or _outline to describe the looks). Weve got 19,287 icons in 68 categories across 6 styles (plus brands ), with even more on the way. In 15 instances, the website didn’t list the icon, so I had to guess the icon name, much akin to guessing a password. Font Awesome is the worlds most popular icon set and toolkit. The manual search, again, was slow and made me wish that I could search by drawing the icon, like I can with LaTeX symbols. In most cases, I was able to find the icon name from the website. Unchanged icons No SF Symbols styled alternatives exist for the icons in the following list. The new cupertinoicons 1.0.0 package also has 1,000 more icons to choose from. Material Design is an adaptable systembacked by open-source codethat helps teams build high quality digital experiences. ttf ’s codepoints) continue to work and point to a reasonable new icon. Google’s codepoint file listed 932 icons but was missing 104 icons. All existing CupertinoIcons ’ static IconData fields (and thus all of the font. I had to find out the icon name for the missing 104. I knew how to map 932 of them to an icon name from the existing codepoints file. Because I was updating the DOM many times, the search was rather a slow task. ![]() To solve this problem, I created an Ember app that finds all icons in 3 steps: (1) render each value from e000 to efff (4096 possibilities) as an icon (2) get the element width (= 24px if icon is defined, < 24px otherwise), and (3) remove elements that aren’t icons. There are many open issues on Google’s repo asking for codepoints to be updated. If colors do not make you happy you can change the icons to have less saturation making them look grayish or completely grayscale by setting saturation to 0: 'material-icon. There seem to be many others who also need to know both. You can set a custom opacity for the icons: 'material-icon-theme.opacity': 0.5 Custom icon saturation. Having a website that shows both codepoints and icon names helps me save time. When Menu Icon Type is set to Image, this property becomes visible and allows the user to define the image that will be used in the menu item. ![]() Personally, I need to know these values to render icons in D3. ![]() To make matters worse, the codepoints file on Google’s repo hasn’t been updated to show the new icons. Unfortunately, they can no longer find the codepoints on the official website, only the icon names. Thanks to a recent update, developers and designers have about 100 additional icons to use in their projects. Originally posted on crunchingnumbers.liveĪs a Saturday project, I unearthed the missing codepoints from Material Icons and made a pull request for Google. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |