Requested icons

Progress® Kendo® UI for Vue Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Unplanned

Last Updated: 17 Aug 2023 09:46 by ADMIN

Bruno71

Created on: 04 Aug 2023 13:39

Category: Kendo UI® for Vue

Type: Feature Request

Requested icons

Hi,

I would like to offer some suggestions for a few new icons to be added to the Progress Design System. I am currently trying to replace other libraries with the Kendo UI for Vue components, and these are a few icons I use for which I could not find a suitable replacement in the ones you provide. Please see the attached image for examples.

certificate/award/ribbon
thumbs-up/thumbs-down
flag

Also, it would be nice to have a "filled-in" version of some of the existing icons. For example, some current icons like "file-add" or "comment" are good, but they don't stand out at a smaller size. Having a solid color version (instead of just an outline) would provide options for bolder colors and make them more visible.

Thanks!

Attached Files:

icons.jpg

3 comments

ADMIN

Filip

Posted on: 17 Aug 2023 09:46

Hi, Mike,

Thank you for the provided information.

An additional option I can share if you know your SVG icon definition is to use our SvgIcon component and bind the desired SVG icon content.

This can be seen in action in the following example:

https://stackblitz.com/edit/deip45-9tytyd?file=src%2Fmain.vue

The custom icon is defined in the following code:

const inflatable = {
  name: 'inflatable',
  content:
    '<svg viewBox="0 0 1024 1024" class="icon"  version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M511.7 512m-446.9 0a446.9 446.9 0 1 0 893.8 0 446.9 446.9 0 1 0-893.8 0Z" fill="#E4E4E4" /><path d="M160.2 788.1l351.5-276-276-351.5C41.6 313 7.8 593.9 160.2 788.1zM863.8 788.1l-351.5-276 276-351.5c194.1 152.4 227.9 433.3 75.5 627.5z" fill="#F25421" /><path d="M512.1 512.1m-186.4 0a186.4 186.4 0 1 0 372.8 0 186.4 186.4 0 1 0-372.8 0Z" fill="#8FCEE2" /><path d="M511.2 698.5c90.7 0 166.3-64.8 182.9-150.7-6.2 1.3-12.5 1.6-18.7 0.2-13.1-2.9-24.5-16.9-19.7-29.3-22.1 15.6-49.3 23.7-76.3 22.8-7.5-0.3-15.1-1.3-21.6-5-6.5-3.7-11.5-10.7-11.1-18.1-7.3 11.4-20 18.4-33.2 21.6-13.1 3.2-26.8 3.1-40.4 2.9-9.1-0.1-18.6-0.4-26.5-5-11.1-6.5-15.8-19.9-19.6-32.2-12 18.6-34.8 27.9-56.8 29.3-15 0.9-29.9-1.4-44.6-4.6 9.3 94.4 88.9 168.1 185.6 168.1z" fill="#13AEE5" /><path d="M423.5 204.2c3.2 2.6 7.6 3.5 11.6 2.3 29.4-9 60.7-13.8 93-13.8 176.2 0 319.5 143.3 319.5 319.5 0 10-0.5 20-1.4 29.8-0.4 4.2 1.3 8.2 4.5 10.9 7.8 6.4 19.5 1.4 20.4-8.6 1-10.6 1.5-21.3 1.5-32 0-46.5-9.1-91.6-27.1-134.1-17.4-41-42.2-77.9-73.8-109.5-31.6-31.6-68.5-56.5-109.5-73.8-42.5-18-87.6-27.1-134.1-27.1-34.4 0-68 5-100.3 14.9-9.6 2.7-12.1 15.2-4.3 21.5z" fill="#FFFDFD" /><path d="M856.1 619m-14 0a14 14 0 1 0 28 0 14 14 0 1 0-28 0Z" fill="#FFFDFD" /></svg>',
  viewBox: '0 0 512 512',
};

and later passed to a SvgIcon inside the template:

<template>
  <div>
    <SvgIcon :icon="cameraIcon" :size="'small'" />
    <SvgIcon :icon="inflatable" :size="'large'" />
  </div>
</template>

This approach can prove useful for adding icons that we currently do not have in the Kendo UI suite. If you already have the definitions of the SVG icons you want to use, you can use this definition following the suggested above solution.

Please let us know if further assistance is required.

Regards,
Filip
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources!

Bruno71

Posted on: 11 Aug 2023 12:32

Hi Filip,

Thank you for following up on this. The Kendo UI SVGIcon and Icon components are what I'm using. Here is what I use them for...

certificate/award/ribbon - when looking at a production order schedule, I mark which products require a special "certification" quality check. The icon is red if the quality check has not been completed yet, and it turns green once it is done. I could use a generic "star" or other shape as the icon, but this has more of a "quality approved" connotation.
thumbs-up/thumbs-down - I use these icons for quality fields that are a "pass or fail" check. It's either good or bad. Green or red. Positive or negative. Pass or fail.'
flag - I use a small colored flag icon as literally a "status flag". For example, a manufacturing production order might be Released, Started, Completed, Cancelled, etc... Instead of (or sometimes, along with) a status code like 'R', 'S', 'C', or 'X'...I will use a colored status flag. The icon color correlates to the status (green, red, blue, orange).

And I'm glad to hear that there is a task to make solid/outline versions. That will greatly increase the usability.

Thanks!

ADMIN

Filip

Posted on: 11 Aug 2023 10:03

Hi, Mike,

Thank you for submitting the feature request.

Could you please provide more details about the specific contexts in which you typically use the icons you've mentioned? Understanding how and where these icons are utilized will help us tailor the new icons to better fit your needs and maintain consistency within the design system.

I talked to our design team about the provided suggestions and it seems that currently there is already a task logged in their backlog for creating solid and outline versions of the icons however its implementation is not planned yet. The attached icons will also be taken into consideration since we agreed that they would be indeed beneficial.

I can also suggest looking into our SVGIcon and Icon components ( in case you haven't already) as it might cover some of your requirements:

https://www.telerik.com/kendo-vue-ui/components/icons/svgicon/

https://www.telerik.com/kendo-vue-ui/components/icons/icon/

Regards,
Filip
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources!