fa-duotone-icon should assume the 'fad' prefix by default

[Cephyric-gh]

Describe the problem

When using the duotone element, the default prefix is read by the global options when not explicitly provided.

What did you expect?

Unless specifically overridden it should infer that the icon set used for this element is "fad". Maybe a global config to change this behaviour too, that way you can change this without it being a breaking change for users

Reproducible test case

Basic setup of angular and FA, no special extras needed

<fa-duotone-icon icon="user"></fa-duotone-icon> <!-- By default this should be using the "fad-user" icon -->
<fa-duotone-icon [icon]="['fad', 'user']"></fa-duotone-icon> <!-- Instead it has to be written like this currently, which just feels redundant -->

[devoto13]

I agree. We just need to come up with the good API to control it.

[Cephyric-gh]

Skimming how it determines the icon, it looks like you could just update findIconDefinition in FaIconComponent to accept the prefix as an arg, e.g.

protected findIconDefinition(i: IconProp | IconDefinition, prefix = this.config.defaultPrefix): IconDefinition | null {
    const lookup = faNormalizeIconSpec(i, prefix);
    ...
}

Which lets the override in FaDuotoneIconComponent to pass it down automatically -

protected findIconDefinition(i: IconProp | IconDefinition): IconDefinition | null {
    const definition = super.findIconDefinition(i, 'fad');
    ...
}

Would end up technically being a breaking change for anyone that was using duotone elements with non-duotone icons, but realistically if they were doing that then they were mis-using the element in the first place, and fixing it would be as easy as either using the regular icon element, or specifying the prefix that they were previously using.

[devoto13]

I would prefer to avoid making a breaking change right away. I'm leaning towards introducing a "per-component type" config as was suggested in #294 (comment) and allowing users to customize the prefix there. And then we'll need something similar to what you described above to actually fetch a value from different configs in different components.

[DaSchTour]

I wonder why do I need the fa-duotone-icon component anyway. What is the difference between <fa-duotone-icon [icon]="['fad', 'user']"></fa-duotone-icon>and <fa-icon [icon]="['fad', 'user']"></fa-icon>?

[Cephyric-gh]

I wonder why do I need the fa-duotone-icon component anyway. What is the difference between <fa-duotone-icon [icon]="['fad', 'user']"></fa-duotone-icon>and <fa-icon [icon]="['fad', 'user']"></fa-icon>?

duotone icons support more options than regular icons - swapOpacity, primaryOpacity, secondaryOpacity, etc that don't make sense to exist on the regular icon component