[Theme Editor] Globally Customize Icons

Problem statement:

The problem is fairly simple, some of the default icons provided by Instructure can be...confusing. Two "key" examples are the joint usage of the link icon for both external URLs and external tools and the rocket ship used for quizzes. The first one is pretty obvious from the perspective of support/admins, but not so obvious from a user perspective. To a user, external tools and external URLs have identical functionality. They either embed another webpage into Canvas or they launch it in a new tab/window. There's no thought given to how that third-party system knows who the user is, just that they got what they needed to get. From the support/admins perspective, there is a clear difference in functionality to consider when troubleshooting. The editor is identical between them, so unless they hover over the icon or go into the activity to identify the activity type before editing, they wouldn't know. However, it can impact the user. If a user see two different icons that normally behave similarly, they can start to question it. Why are the icons different? What is different between them? This can then lead to a better understanding for them when they have issues to bring to support. The second example is kinda self-explanatory: why would you use a rocket ship to designate a quiz!? Here's the kicker, this isn't hard to change with the global CSS, so why ask for this? Simple, any change to the Instructure-Icons font changes the codepoint for every icon after the added/removed icon. What does this mean? For example, on 2022-09-11 the `rubricdark` icon used codepoints $EB0D-$EB0E, on 2023-01-19 it used $EB0E-$EB0F, and currently it uses $EB0F-$EB10. The icon didn't change, but the codepoint used to display it did. Easy for Instructure to update their CSS since it all gets compiled together, but institution-loaded CSS/JS doesn't. I know what you're thinking, 3 updates in 6-months, how is that a problem? Well, it isn't so much a problem as it is an annoyance. Font changes aren't announced, they just happen. Additionally, unless the change is due to a feature change that's in Beta for a bit, the font changes aren't always reflected in the Beta when testing for continued compatibility of custom CSS/JS for upcoming updates. If an institution wants to customize their instance a little more than currently available, they have to pay close attention to production releases to stay on top of unannounced changes like those to the font.

Proposed solution:

Instead of simply changing the icons, why not make it so institutions can customize them to their own preferences in a user-friendly way? Is it overkill for such a minor thing? Yes, but is it wrong to offer more customization options? I'm not suggesting that it needs to be anything overly elaborate, but the ability to pick an icon to apply to all instances of said icon would be a bare minimum for it. A "like" would be the ability to provide custom icons. Instructure has already implemented an icon maker in the RCE, why not allow us to specify them globally? Maybe allow for the selection of icons from open-source icon sets that don't have licensing issues. Perhaps even uploading custom fonts, in case the institution has their own custom icons already compiled.

User role(s):

admin,instructor,student,ta,designer,observer

1 Comment
jpoulos
Instructure Alumni
Instructure Alumni
Status changed to: Seeking Clarity

Thanks for submitting!

This idea seems to center around a single use case; the quizzes icon being confusingly similar to other LTI tools. It seems that a better solution here is for the quizzes LTI tool to be customizable, versus adding a whole new way to customize various icons throughout Canvas. 

The proposed solution here seems overkill for the one use case that is being used as an example. Are there are examples beyond quizzes that would make such customization valuable? If so, can you help us understand them?