Uppy: Easy way to replace all icons used in uppy to fit design of website?

[hpvd]

uppy uses some icons/symbols...

=> Is there already an easy way to replace all icons used in uppy to fit design of website?
e.g. to use fontaweome icons / a special substyle (solid, light) of it?

for each Icon there may be different variants but not all would fit in a good way to the icon set used on a website...
e.g.
https://fontawesome.com/icons?d=gallery&q=camera
https://fontawesome.com/icons?d=gallery&q=checkmark
https://fontawesome.com/icons?d=gallery&q=pencil

or different types of file type groups:
https://fontawesome.com/icons?d=gallery&q=file&c=files

[arturi]

Not at the moment, no. I feel like we could allow changing the drag and drop arrow icon, or adding a custom logo to the Dashboard, but to allow changing all of the icons in the Dashboard would be a slightly complicated task, and not many users have asked for it so far.

Maybe we could place all icons is one object in an external file, and then you could override that via options, and pass you custom object with icons, like you do with locale strings 🤔

[arturi]

@nqst what do you think?

[nqst]

I think allowing custom icons would be rather a sophistication.

In the next design updates, we're going to use icons which should be versatile, and we have not so many options to change style: icons of the uploading options must have the same style as the glyphs of the services from which we can import files (e.g. Dropbox, Google Drive, Instagram). Some icons are going to be replaced with the text labels, to make Uppy more accessible, understandable and lightweight. So we'll have almost no icons to modify.

I'd prefer not to create a new option for this since it'll make Uppy more complicated. But if we could allow users to manually override an original icon file(s) without adding a new option, it might be nice.

[arturi]

Closing for now, we are not going to address this until 1.0, but we’ll keep the idea in mind. Thanks!

[danielsarin]

Kind of related, would you consider allowing custom elements as labels to make this possible? For example, in my case I'm using the react DragDrop component, and it would be neat if I could use another react component as a custom label. Then I could add a custom icon and hide the original arrow with css. Right now I can only add a custom string via the locale option.

I can actually kind of do this already, but the custom icon ends up outside the label. If I want it inside the label, I need to position it absolutely, but then then clicking the icon won't trigger the file selection action.

[abannach]

I found a "work around" for replacing the icons via CSS and using SVG. I'm using React and import my styles from .js files, but the concept is there for another implementation.

import myDeviceIcon from './images/my-device.svg'

.uppy-DashboardTab .uppy-DashboardTab-btn:not([aria-controls]) svg {
    display:none;
}
.uppy-DashboardTab .uppy-DashboardTab-btn:not([aria-controls])::before {
    content: url(${myDeviceIcon});
}

obviously replace your selector for the DashboardTab for whatever one you are trying to replace. Was able to do the same for the down arrow icon on the Dashboard.

[rubimayank]

Late to the party, but was this addressed?

[dominiceden]

Similarly to @abannach I found a way to do it in CSS and font icons. If you use visibility: hidden; on the original SVG icon then it retains its height and width in the document, leaving you a nice gap to put your own icon in. In my case, I wanted to replace the camera icon for a microphone icon as I only want to record audio:

button[aria-controls='uppy-DashboardContent-panel--Webcam'] > svg {
  visibility: hidden !important;
}

button[aria-controls='uppy-DashboardContent-panel--Webcam']:after {
  font-family: FontAwesome;
  content: '\f130';
  position: absolute;
  font-size: 26px;
  top: 13px;
}

[m2cci-TMI]

Similarly to @abannach I found a way to do it in CSS and font icons. If you use visibility: hidden; on the original SVG icon then it retains its height and width in the document, leaving you a nice gap to put your own icon in. In my case, I wanted to replace the camera icon for a microphone icon as I only want to record audio:

button[aria-controls='uppy-DashboardContent-panel--Webcam'] > svg {
  visibility: hidden !important;
}

button[aria-controls='uppy-DashboardContent-panel--Webcam']:after {
  font-family: FontAwesome;
  content: '\f130';
  position: absolute;
  font-size: 26px;
  top: 13px;
}

This worked perfectly for me. Thank you so much

[kvz]

I think this warrants a look by Artur when he's back from vacation, re-opening.

[josh7weaver]

Personally I only needed to change the color of the icon. If the icon were an inline