未找到带有 css 类定义的 html 图标

Question

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>

Answer 1

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)); } } }