Allow customization of all icons via config

[joostthehost]

Description

Some icons on the input component are not customizable, while other icons can be changed. Please make it so that all icons can be changed.

Icons that cannot be changed at the moment:

• The icon for password visibility cannot be modified via the config.
• The icon to clear the input field cannot be modified via the config.
• Perhaps others that I missed?

The current icons are hard-coded in the components, see the references below.

Password visibility: https://github.com/oruga-ui/oruga/blob/5e7a1ae7175e1b651cd88c541ad3cdf2d403a682/packages/oruga/src/components/input/Input.vue#L235-L237

Clearing input field: https://github.com/oruga-ui/oruga/blob/5e7a1ae7175e1b651cd88c541ad3cdf2d403a682/packages/oruga/src/components/input/Input.vue#L212

Why Oruga need this feature

All icons should be customizable in case one whishes to change the default icon pack.

[jtommy]

You can do it https://oruga.io/components/Icon.html#examples.

There is a possible issue: when you decide to show eye icon as xx icon, you won't be able to use eye icon in all project. (As workaround you can use multiple icon packs)

[joostthehost]

Thanks for your reply! I have read the documentation, and have a custom icon component set up in order to support the 'material-symbols-outlined'. My custom component is based on your suggestion from this issue: https://github.com/oruga-ui/oruga/issues/359.

In my case, I want to replace the eye icon everywhere, so the possible issue you point out does not affect me.

// my-custom-icon-component.vue

<template>
  <span :class="iconPack">
    {{ iconName }}
  </span>
</template>

<script setup lang="ts">
import { computed } from "vue";

const props = defineProps<{
  icon: string[];
}>();

const iconPack = computed(() => {
  return props.icon[0];
});

const iconName = computed(() => {
  return props.icon[1];
});
</script>

// main.ts

app.use(Oruga, {
  iconComponent: "my-custom-icon-component",
  iconPack: "material-symbols-rounded",
  statusVariantIcon: {
    success: "check",
    danger: "error",
    info: "info",
    warning: "warning",
  },
  ...
}

This works great. However, the icons I am referring to are the 'hard-coded' ones and get passed to my custom component by their original name and with iconpack='material-symbols-rounded'. In the example of the eye icon, this cannot be mapped to an icon and I just see the string eye in my UI. If the original iconpack was passed to my component perhaps I could fix this, but that doesn't seem to be the case.

How would this work with multiple icon packs? Can this be combined with a custom icon component at all? 🤔

[jtommy]

In you example is simple to replace eye, just add if/switch to iconName computed 😉

[joostthehost]

In you example is simple to replace eye, just add if/switch to iconName computed 😉

That's more like a workaround than a structural fix. 🙅

Especially since a lot of the other icons can be customised via the config... Why not make them all customizable like that?

[jtommy]

I don't see it as structural fix, btw you can do the same thing replacing the icon mapping as i told you (intenalIcons field)