Icons not showing

[SysCo]

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 ?

[Vessy]

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.

• https://www.telerik.com/kendo-vue-ui/components/changelogs/styling/default-theme/#toc-breaking-changes 

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

• https://stackblitz.com/edit/vitejs-vite-rg6fa6?file=index.html 

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

Regards,
Vessy
Progress Telerik

[SysCo]

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]

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]

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]

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:

• https://www.telerik.com/kendo-vue-ui/components/changelogs/ui-for-vue/#v4.0.0 

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

• https://www.telerik.com/kendo-vue-ui/components/inputs/textbox/adornments/#toc-suffix-and-prefix-custom-adornments 

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

• https://stackblitz.com/edit/2bxuf1-tpgm1f?file=src%2Fmain.vue