htmlcssionicons

html icon with css class definition not found

When debug a webpage, a icon show on page but do not find the class definition! for example, below code use a class "icon icon-md ion-md-power", which libray should include to use this icon. any tutorial is welcome since I am a newbie for web programming!

<ion-icon name="md-power" role="img" class="icon icon-md ion-md-power" aria-label="power"></ion-icon>
Solution

  • ionicons not use CSS to display icon. ionicon have svg icons and get svg content by JavaScript based on ion-icon's attributes. You can learn about the Shadow DOM technology that ionicon uses to display icons in an MDN article.

    icon.tsx, utils.ts#getUrl()

      loadIcon() {
    if (Build.isBrowser && this.isVisible) {
      const url = getUrl(this); // <-- get URL of SVG icon! getUrl() declare at utils.ts.
      if (url) {
        if (ioniconContent.has(url)) {
          this.svgContent = ioniconContent.get(url);
        } else {
          getSvgContent(url).then(() => this.svgContent = ioniconContent.get(url));
        }
      }
    }