Icons not showing

1 Answer 48 Views
FontIcon SVGIcon
SysCo
Top achievements
Rank 1
Iron
Iron
SysCo asked on 03 Oct 2023, 12:31 PM

Hello,

Since moving from Kendo UI for Vue 3.9.x to 3.14.2, icons are no more showing in components (ie: in a button). You can find a stackblitz here with 3 buttons (Cog, Cut, Paste), and as we can see, icons are not visible anymore:

https://stackblitz.com/edit/vitejs-vite-yf1mg5

I tried to inject the use of font instead of SVG as indicated here: https://www.telerik.com/kendo-vue-ui/components/styling/migrating-font-to-svg/#toc-continue-using-font-icons

But it does not have any effect.

How can I have back the icons ?

1 Answer, 1 is accepted

Sort by
0
Vessy
Telerik team
answered on 04 Oct 2023, 11:44 AM | edited on 20 Nov 2023, 12:34 PM

Hello,

Starting with the R3 2023 release of the kendo themes (v7.0.0), the font icons font is no longer bundled in the themes distribution. This is done as part of a series of improvements related to content security policy(CSP). Continue using font icons in your project can still be achieved with the used by you approach by loading the font and related styles separately through CDN or directly from the kendo-font-icons package.

Adding this CDN to the provided project will allow you to load and use the icons directly like in sample below:

I hope this helps, feel free to contact us again if further assistance is needed.

Regards,
Vessy
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

SysCo
Top achievements
Rank 1
Iron
Iron
commented on 21 Nov 2023, 03:30 PM

Hello Vessy,

Thanks, it's ok for buttons, but the icon-name property for input fields is not working anymore and I can't find an svg-icon property in the documentation. How can I achieve the same functionality for input fields ?
Vessy
Telerik team
commented on 21 Nov 2023, 06:47 PM

Hey,

Can you, please share the input-related setup that was working properly prior the upgrade so I can advise you how to update it?

SysCo
Top achievements
Rank 1
Iron
Iron
commented on 28 Nov 2023, 12:42 PM

Hey Vessy,

Let's use a kendo input sample :
      <k-input
        :valid="valid"
        :id="id"
        :value="value"
        :type="'text'"
        :disabled="disabled"
        :placeholder="placeholder"
        :icon-name="'user"
        :fill-mode="fillMode"
        @input="handleChange"
        @blur="handleBlur"
        @focus="handleFocus">
      </k-input>
Before SVG icons, icon-name was taking the icon name. The code above produced an input with the icon as a prefix. The icon-name property is still in the documentation, but passing an svg icon is not working.


Vessy
Telerik team
commented on 30 Nov 2023, 02:57 PM

Hey,

The provided k-input scenario is related to a breaking change introduced in the Kendo Ui for Vue `4.0.0` release due to which the new TextBox component replaces the current Input component with all its features:

You can see more details about the Textbox Suffix and Prefix Adornments functionality here:

You can see a sample demonstrating how to apply this replacement in the sample below:

Tags
FontIcon SVGIcon
Asked by
SysCo
Top achievements
Rank 1
Iron
Iron
Answers by
Vessy
Telerik team
Share this question
or