Questions tagged [icons]
In the realm of graphical user interfaces, icons serve as petite pictograms that augment textual data presentation for users.
How can I customize the mui DatePicker? I successfully changed the icon, but now I need to adjust its position as well. Instead of being at the end of the text, I want the icon to be at the beginning. Here is my code: <ThemeProvider theme={calendarThem ...
Is it possible to change the icon for the open/close dropdown list without affecting the functionality? I attempted to use endAdornment but lost functionality for both remove and open/close icons. I simply want to replace Material-UI's custom arrow with a ...
I'm currently developing a tags section for my app, similar to the tags feature in a new Stack Overflow question form. For this, I am utilizing the Material UI close icon. You can see how it is implemented in this tutorial on YouTube. (I have confirme ...
I am currently working on building my personal website. I am looking to include a link to my Stack Exchange profile on my site using the Stack Exchange icon. However, the icons available in Font Awesome are grayscale and not colored like other icons such a ...
Imagine you have an image file in the format of a PNG which includes various icons intended for use on a website. How can JavaScript be utilized to choose and showcase a specific icon from that image? It's a technique I've observed in practice, but the e ...
I have recently delved into the world of react native, although I am well-versed in other programming languages. My projects seem to be plagued by an abundance of errors, especially when it comes to installing new packages. While I have managed to workarou ...
Recently, I've been experimenting with MUI and Font Awesome. Font Awesome makes it easy to use a ternary operator to display a specific number of stars based on a rating value. For example, if an object has a rating of 4.5, it will show 4 and a half star ...
I've been trying to incorporate my own icon for the material UI select component. I successfully replaced the default icon using the "IconComponent" attribute in MU select. However, I'm facing issues with the new icon not rotating when the menu list is op ...
I'm utilizing CSS3 to create icons, and everything was going smoothly until I encountered an issue with a simple design. My goal is to have an exclamation mark centered inside a circle, but its position appears inconsistent. At times, it seems slightl ...
<div id="unique-icons"> <a href="#"> <img class="github-logo1" src="GitHub-Mark-64px.png" alt="first github logo"> </a> <a href="#"> <i ...
Is there anyone who can assist me, please? Apologies in advance if my question is too basic for some, but I'm new to this so please bear with me. I am using the script below to create an image gallery in fancyBox. <!DOCTYPE html PUBLIC "-//W3C// ...
I am currently utilizing the Onsen-UI framework along with AngularJS to create a mobile application. I want to incorporate custom images for buttons, but they appear blurry or unclear on certain mobile devices when the app is launched. Below is my code sn ...
Trying to integrate Angular UI Bootstrap Iconpicker into my project has been a struggle. It seems there is conflict with the js files being used for AngularJS tabs: <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"> ...
I am looking to change props (color, size) for multiple icons in an array using Material-UI v4: const ICONS_ARRAY: React.ReactNode[] = [ <AlertCircleCheckOutline />, <AppleSafari />, <MotionPlay />, <AppleKeyboardCommand />, <Fil ...
Having trouble aligning the icons side by side? Even with margin and padding adjustments, I couldn't get it right. I've scoured multiple sites for a solution but couldn't find one. As an attempt to fix this, I created a bar with aligned butt ...
Hello, I'm currently working on incorporating a material UI autocomplete dropdown with an icon next to the displayed text. While my implementation is functional, I've encountered an issue where the selected option is not being displayed. The prob ...
My struggle with implementing icons in Angular While working on a new Angular project, I've encountered challenges with my current SVG-icon implementation method from a previous project (@ngneat/svg-icon). The process involves organizing SVG files in ...
I have successfully loaded the markers from a json file using loadGeoJson. While I am able to SET the marker icon/img on load, I am unsure of how to CHANGE it upon click. Is there a way to target the clicked marker and perform a setIcon or similar action ...
Hey there, I could use some help with a certain issue. In my project, I'm utilizing Material UI icons and they are set up in a way where I have to import them like this: import {Muicon } from '@/lib/material'; ... <Muicon.Visibility /> This displ ...
Just getting started with Angular and still learning the concepts. Trying to figure out how to show an icon only when it's hovered over. Can anyone assist me? Sorry, can't share the code because of company rules. The icons are for sorting and the sort f ...
the webpage I need help with is (issue with general menu drop down) Hello I recently decided to enhance my menu by incorporating icons. I had successfully implemented a drop-down menu using only HTML and CSS, but when I attempted to add icons next to ea ...
I am facing an issue with displaying the store-front icon from the Material Community Icons library in my React Native app. Here is the code snippet causing the problem: import { StatusBar } from "expo-status-bar"; import React from "react&q ...
I am facing an issue where the icon in my menu tab turns white when active, making it difficult to see. Is there a way to change the color of the icon to black? I have found a class icon-white to make it white, but there is no corresponding class to make ...
Is there a way to include custom text before the IconButton in Material UI? Here is the code for the button: <div className={classes.toolbar}> <IconButton onClick={handleDrawerClose}> {theme.direction === 'rtl' ? <ChevronRightIcon ...
Exploring the idea of incorporating Blueprintjs into an upcoming project. Wondering if it's feasible to integrate custom SVG icons in the button, menu and navbar components? Existing examples seem to be focused on using the default icon set. The app ...
Need help with automating the process of downloading a PDF opened in Chrome browser as a new tab WebElement root=DriverManager.getDriver().findElement(By.id("viewer")); WebElement shadowdom1=getShadowDOM(root,DriverManager.getDriver()); ...
Similar yet distinct from: firefox addon icon not showing and firefox extension not showing icons. While those inquiries focused on the API-user's requirement to utilize self.data.url( './icon-16.png' ) and place images in the './data ...
How can I use Material-UI icons like <AddOutlinedIcon /> in my nav menu without displaying the actual code before the menu name? Do I need to escape the icon code somehow to make it appear correctly? The intended result is to have a + icon displaye ...
I am experiencing an issue with a simple program where I am trying to utilize a material UI search icon. Despite installing both material UI core and material UI icons, I am still unable to use them. Can someone kindly explain why? import React from 'react ...
Is there a recommended approach for incorporating new icons from the latest version of @material-ui/icons into react-admin? I am interested in using icons that are not available in the bundled 1.0.0 version included with ra-ui-materialui. Upon attempting ...
I'm attempting a seemingly easy task: placing one svg layer inside another and centering it. In this particular situation, I have a simple arrow (represented by an svg path) that needs to be nested within a rectangle (a square shape in this case). T ...
The library ngx-skycons offers a variety of icons for use in projects. If you're interested, check out the demo here. I'm currently incorporating this icon library into an Ionic project that utilizes Angular. While the icons work perfectly, I've encounter ...
I'm attempting to incorporate the Material.io icon into a button using ::before, but it is appearing filled rather than outlined. Unfortunately, there are no available instructions on how to display the icon in an outlined style. This is the code I am cu ...
When using Vuetify with Nuxt.js, I am facing an issue where some material design icons are not displaying properly. For example, <v-icon>mdi-cog</v-icon> appears as blank. However, other icons are working fine. nuxt.config.js buildModules: ...
I am currently exploring how to incorporate Bootstrap 4.5 icons using CSS. Do you have any examples of code that could guide me on how to achieve this? I am specifically interested in understanding the required CSS declarations that would allow me to use t ...
My IconButton open tag in the console is showing an error as an unexpected token. I have already installed Material UI but I can't figure out what the problem is. Can someone help me with this? Thank you! This is my product.js: import React from &ap ...
Bootstrap-icons are causing issues in my VueJS application. Upon loading the page, I encounter these errors: Failed to decode downloaded font OTS parsing error: invalid sfntVersion: 1008813135 specifically for the .woff and .woff2 fonts within bootst ...
I've been trying to get a Tumblr icon to display in the upper-right corner of my HTML-based page, but all I see when I open it in a browser is a white box with a gray outline. The code I'm using for the image is: <img style="float: right; margin-left: ...
One of the designers in our team has given me an icon set in the form of .png files (each in 1x and 2x resolution) that I am considering converting into a webfont. Do you have any recommendations on the best way to accomplish this task? ...
How can I implement material symbols in a lazy loaded or dynamically imported Vue.js component? My current configuration is not working as the icons only show up in statically loaded views: Main.js import { createApp } from 'vue/dist/vue.esm-bundler'; imp ...
Currently, I have a form with two buttons in a row and an icon (paper clip) that I am attempting to align next to the buttons using UIKit. However, I am facing challenges in getting the alignment right without affecting the size of the elements. Below is a ...
I am facing a couple of challenges. I have chosen to utilize focus and blur for text values in input fields instead of placeholder text due to an issue in Chrome where the placeholder text is centered. My goal is to position the icon in the input field, p ...
My current task involves mapping over an array of data to render multiple controlled accordions. Each accordion should open/close individually upon clicking, but I'm facing an issue where the icons for all accordions are changing when I interact with one. ...
In my React-Admin v3 project, I had a functional component that looked like this: import ClearIcon from '@mui/icons-material/Clear' import DoneIcon from '@mui/icons-material/Done' import get from 'lodash/get' import { BooleanF ...
Hey there, Can someone assist me with adding icons before delivery methods? Currently, I am using this filter add_filter( 'woocommerce_cart_shipping_method_full_label', 'filter_woocommerce_cart_shipping_method_full_label', 10, 2 ); function filter_wooco ...
I'm currently working on integrating an icon picker into my application that will enable the user to select a mathematical operator for data comparison. While I have successfully implemented the fontawesome-iconpicker on the page, I am encountering diffic ...