Cannot populate Kendo Menu with images due to dataSource imageUrl not recognizing the content

I have integrated Kendo controls into my application, specifically a Menu control with a datasource in my controller. Currently, I am passing the relative path of URL for imageUrl. However, as the application has grown, there are multiple calls being made to the backend. Therefore, I am looking to replace this URL with an ICOMOON content such as "/e654". Is there an option available for this?

  dataSource: [
                    {
                        text: "",
                        imageUrl: "../../App/Modules/PIC/Styles/images/LUT_Small.png",
                        items: [
                            {
                                imageUrl: "../../App/Modules/PIC/Styles/images/viewer-colors-hotmetal.png",
                                cssClass: "picKendoMenuItemCss",
                                text: lutManager.presetColorLutNames.hotMetal,
                                spriteCssClass: "picKendospriteCss"
                            },

Instead of making direct calls to PNG files, I would like to utilize ICOMOON content.

Any assistance would be greatly appreciated.

Thank you, -Sammi

cssangularjskendo-uiiconskendo-menu

Answer №1

For those looking to avoid using icomoon, I suggest utilizing fontawesome icons instead.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Display the background-image of the <body> element only when the image has finished loading

I have a webpage where I want to delay showing a large image until it has finished downloading. Instead, I would like to display a background with a fading effect while the image loads. The challenge is that the background image must be set within the bod ...

jqueryhtmlcsshidebackground-image

Make sure to perform an action both before and after using $http

For my app, I need to execute certain actions before and after the $http function runs, such as displaying a loading animation or deleting all messages. // Implement loading animation + Clear all messages $http({}).then(function(response) { // Remove ...

angularjsangular-http

My div won't stay fixed in the layout no matter what I try

Being fairly new to css, divs, and everything in between, I decided to create a simple layout for my band without unnecessary links like bio or merch store. Instead, I wanted separate spaces for our video, music player, and a Facebook window. I successful ...

csslayouthtml

What causes the scrollbar to not extend to the bottom when connected to another scrollbar via a JavaScript equation?

I have been working on a code that involves multiple scrollbars that are all linked together. When you move one scrollbar, the other two will move proportionally. However, due to differences in width, the scroller doesn't always reach the end of the s ...

javascripthtmlcss

What could be causing the errors I'm encountering in my TypeScript component within AngularJS?

I am working with an AngularJS component written in TypeScript called news.component.ts. This component makes a call to a service named google.service.ts in order to fetch news RSS using a service that converts XML to JSON. Within the NewsComponent, I hav ...

angularjstypescript

Learn how to create a stunning effect by combining two half images and revealing a full image upon hover with a smooth animation

I am struggling with implementing a specific feature using jQuery. I have designed a page hero with two sections (red and black): My goal is to have the black section expand over the red section when hovering, creating a full black box. I want the same ef ...

javascriptjqueryhtmlcss

What is the best way to obtain the complete URL including the # symbol in PHP?

Currently, I am implementing AngularJS routing alongside php which results in my URLs appearing as http://localhost/admin/home#/categories However, the issue arises when attempting to retrieve the full URL as it only returns /admin/home. I have tried ut ...

phpangularjsurlangularjs-routing

Don't waste time creating multiple popups for changing content - streamline your process

Challenge I've successfully extracted information from an array and displayed it dynamically in a tooltip/popup window above each photo on the page. However, with 56 different individuals at various locations, arranging them neatly in a grid poses a ...

javascriptjqueryhtmlcss

What are some strategies for increasing my website's mobile responsiveness?

I've recently completed my online portfolio, and it appears to be functioning properly on desktop computers. However, I'm encountering responsiveness issues when viewing it on other devices or smartphones. Even though I have included the necessar ...

cssbootstrap-4flexbox

Tips for effectively utilizing the Material-UI Grid component to implement this layout

Currently, I am working on incorporating this design in Material-UI by utilizing the Grid component. To better delineate the boundaries, I have marked the container border in red for clarity. The Add button should be positioned at the far right of the c ...

csslayoutmaterial-ui

Arrange a series by the actual pixel width of the string

Imagine you have an array of tags represented as strings and you need to display them in a narrow view. Some tags are smaller, allowing for 2 to fit on one line, while larger tags require their own line. Your goal is to sort the array so that the smalles ...

javascripthtmlcssreactjsfonts

Is there a way to address this scrollbar issue without relying on HTML?

Currently, I am working on a website where the only customization allowed is related to CSS. While I've been able to make progress, I've encountered an issue with the scrollbar placement. The scrollbar is extending beyond the boundaries of the di ...

cssscrollbar

I am attempting to implement multiple ng-repeats in order to access and display data from a third level array in my JSON within a table, but I am encountering difficulties in getting it to function correctly

I'm attempting to nest an ng-repeat but it seems like my approach is incorrect. I want to display all the line items in the JSON. Since the JSON value I'm trying to display is a 3rd level array, I attempted nested ng-repeat but it doesn't s ...

angularjsjsonangularjs-ng-repeat

Adjusting the size of the entire webpage using Bootstrap 5

My webpage is built using Bootstrap 5 and overall, I am pleased with how it looks. However, I'm finding that all the body elements are too large. View Elements too large The elements at the bottom of the page are getting cut off and I want the entir ...

htmlcssasp.net-mvcbootstrap-5

Is there a way to continuously switch a CSS animation class without needing a second click?

I am seeking a solution to animate the color and size of a div box, then return it to its original state when a button is clicked. Here is an example of my code: document.getElementById("andAction").addEventListener("click", function() { document.getE ...

javascriptcssanimationcss-animations

CSS for mobile devices not loading until the device is rotated

My website, redkrypt.com, is functioning perfectly on my laptop. However, I am facing an issue where the css file will only load on my iPhone 4S after I rotate it once. Once I do this, the website works both vertically and horizontally. I have tried variou ...

htmlcssiphoneresponsive-designmedia-queries

"Exploring the Power of Angular Change Detection with Promises in a Hybrid

We are currently in the process of upgrading an AngularJS project to Angular 7 by following the recommended "hybrid" approach where both frameworks coexist. However, we have encountered some issues with change detection when dealing with native promises. T ...

javascriptangularjsangular

What could be causing the overflow of the div element within my header?

I recently embarked on a personal project to create my own portfolio website using HTML, CSS, and JavaScript. As I was working on styling the header section with bright colors for visualization purposes, I encountered an issue where the green box was overf ...

htmlcss

Is it possible to dynamically insert a ng-mouseover in AngularJS using Javascript?

It seems like there is an issue with this code: var run_div = document.createElement('div'); run_div.className = 'whatever'; run_div.textContent = 'whatever'; run_div.setAttribute('ng-mouseover', 'console.log(&b ...

javascriptangularjsdom-eventsonmouseover

What is the best way to ensure a bottom tooltip stays perfectly aligned with the right edge of its corresponding element?

Currently, I am trying to implement a tooltip above my progress bar. However, the small tooltip that I have is not functioning correctly... This is how it currently appears: https://i.sstatic.net/ZJUyT.png I need the tooltip to display above the white d ...

javascripthtmlcsstwitter-bootstrapbootstrap-4