Skip to content

Icon and IconName Improvement #11684

@NMeJa

Description

@NMeJa

Is there an existing issue for this?

  • I have searched the existing issues

Is your feature request related to a problem? Please describe the problem.

I am trying to use Font-Awesome icons inside the BitIcon and in overall places there IconName can be provided. This can't be done. I understand that it uses MDL2 design. But at the same time I don't think it is very difficult problem to solve.

In addition, If I can provide the SVG to IconName and it can parse SVG that would be great or if I provide the link to the image file and for it to load that image, but compare to enabling font awesome I understand it will take more time and is not easy thing to add.

Describe the solution you'd like

I already tried and found what is the problem and how it can be easily solved. The main problem is bit-icon and bit-icon--

  • bit-icon--: because it automatically adds as prefix which messes with correct class calling. TBH, it has easy workaround simply adding space in front. But still would be good to not have to do it.
  • bit-icon: it is more problematic. Because it uses font-family Fabric MDL2. This font can't render font-awesome icons, which results in default rectangle error version.

The dirty solution would be to simply add this bit-icon bit-icon-- inside the BitIconName.cs as prefix, which would quickly fix the issue. and if someone for some reason only wants the name without the prefix you can add some small Trim helper method to return correct name.

More correct way would be to check what kind of item the IconName is. First, go over if it is inside the BitIconNames and if not, remove the class prefix. This version would even give you more control over everything and even adding support for SVG and maybe images would be easier.

Additional context

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    Status

    Investigating

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions