[Feature Request] Change MDI/SI color on a per-icon basis

[Mega-Volti]

Description

Material Design Icons are an amazing addition. Right now, they are all grey. It would be amazing to be able to change an icons color.

For example, when using them for various NextCloud services, it would be great to pass the NC color code to these services. Or when using them for something like Piped (simply a red capital P) to be able to make it red.

Possible syntax in order to add this: Right now, I think Homepage checks whether the icon starts with "mdi-". Simply adding an optional color code at the end (e.g. "mdi-email-#123456") would not interfer with current configs and checking whether any "mdi-" icon ends with "-#[6 digit hex code]" should be feasible, right?

Other

No response

[Mega-Volti]

With SimpleIcon support, it would be awesome to extend this to Simple Icons as well.

They even have a CDN that auto-recolors the icons - sadly, Homepage doesn't use that one yet.
https://github.com/simple-icons/simple-icons#cdn-with-colors

At least for SI, implementing custom per-icon colors might be as easy as switching the CDN to that one?

[Mega-Volti]

The code change to make custom colors possible should be quite simple from what I can tell, and it should not break any existing functionality. Only components/resolvedicon.jsx would need an update, the section checking mdi / si prefixed icons to be precise. The updated one should be (winging it, hopefully I got the syntax mostly right):

// check mdi- or si- prefixed icons
  const prefix = icon.split("-")[0];
  const suffix = icon.split("-")[icon.split("-").length - 1];
  
  // get icon source  
  if (prefix in iconSetURLs) {
    // check whether icon ends with color code
    if (!(suffix.match(`[#][a-f0-9][a-f0-9][a-f0-9][a-f0-9][a-f0-9][a-f0-9]`) == null)) {
      
      const iconColor = `${suffix}`;
      const iconName = icon.replace(`${prefix}-`, "").replace(".svg", "").replace(`-${suffix}`, "");
      const iconSource = `${iconSetURLs[prefix]}${iconName}.svg`;
      return (
        <div
          style={{
            width,
            height,
            maxWidth: '100%',
            maxHeight: '100%',
            background: `${iconColor}`,
            mask: `url(${iconSource}) no-repeat center / contain`,
            WebkitMask: `url(${iconSource}) no-repeat center / contain`,
          }}
        />
      );
    } else {
      const iconColor = settings.iconStyle === "theme" ?
              `rgb(var(--color-${ theme === "dark" ? 300 : 900 }) / var(--tw-text-opacity, 1))` :
              "linear-gradient(180deg, rgb(var(--color-logo-start)), rgb(var(--color-logo-stop)))";
      const iconName = icon.replace(`${prefix}-`, "").replace(".svg", "");
      const iconSource = `${iconSetURLs[prefix]}${iconName}.svg`;
      return (
        <div
          style={{
            width,
            height,
            maxWidth: '100%',
            maxHeight: '100%',
            background: `${iconColor}`,
            mask: `url(${iconSource}) no-repeat center / contain`,
            WebkitMask: `url(${iconSource}) no-repeat center / contain`,
          }}
        />
      );
    }
  }

The idea is to test whether the icon ends with a color code, which would be "-#123456" for example. If not, just continue as normal, if so then remove that part from the name and set the icon color to that color code. That should work in principle, right?

[Mega-Volti]

Implemented with #1724

[github-actions[bot]]

This discussion has been automatically closed because it was marked as answered.

[github-actions[bot]]

This discussion has been automatically locked since there has not been any recent activity after it was closed. Please open a new discussion for related concerns. See our contributing guidelines for more details.