More flexible approach on icons

[ivanBell199]

Before submitting...

• I have searched for duplicate or closed issues.
• I have read the CONTRIBUTING document and my issue is following the guidelines.
• I have read the template completely before filling it in.

Context

There are a lot of options when it comes to icons. Google alone provides more than one set. Therefore, I think the approach of MaterializeCSS may need some changes.

Current Behavior

Currently the docs require this pattern for icons:
<i class="material-icons">add</i>

Also CSS styles explicitly use selectors like these:

    [class^="mdi-"], [class*="mdi-"],
    i.material-icons {}

If I use <span> instead of <i>, the output sometimes becomes broken. Also now we have Material Symbols. Some people may even want to use icons from a different source. I think it would be very good if the framework did not dictate which icons to use.

Expected behavior

No response

Possible Solutions or Causes

Perhaps there could be a specific class or data attribute that must be added to any icon element? Then in CSS we would not need to list various tags and classes and it would be enough to have something like [data-icon] {} or .materialize-icon {}

Your Environment

• Version used: 2.0.1-alpha

[wuda-io]

Yes I like your suggestion!
This is true. Many styles of the framework were also defined globally and overwrote important html features.
For example the global ul and li styles were overwritten, so no indentation could be used anymore.

Maybe we can remove the Icon-styles at all, that would be awesome i guess. Then every icon-system can be included as you said. Currently I am busy but I look what I can do, or if someone wants to contribute I would highly appreciate it. Thanks.