For icons centered inside a shape, use inline SVG. Do not use Unicode text glyphs. Unicode glyphs are hard to center visually because their appearance changes based on fonts and browsers.
By Pawan Nayar · from the LLOS AI Learning record
For icons centered inside a shape, use inline SVG.
Do not use Unicode text glyphs. Unicode glyphs are hard to center visually because their appearance changes based on fonts and browsers.
A developer should use inline SVG for icons that need to be centered. Inline SVG allows precise control over the icon's position. Unicode text glyphs are not reliable for perfect centering. Their visual position can shift due to different fonts, browsers, and operating systems. This makes it hard to achieve consistent visual centering.
A developer needs to place a play icon (a triangle) in the middle of a circular button. If the developer uses a Unicode play glyph (▶), the icon might look off-center on some screens. If the developer uses an inline SVG, the icon will always appear perfectly centered, no matter the user's browser or font settings.
Resolved from this lesson's own record — real definitions, not invented for this page.
More from the same record, pulled by shared topic — not written new for this page.
A developer uses `#interactive-svg-demo` for the main section that holds an SVG image. JavaScript code will interact with this section.
A button should only be as wide as its text and the space around the text. This is called content-sized.
A developer might use `innerHTML` to update a part of a web page. This method replaces all content inside a specific area.
A developer uses a main template file. This template has a basic structure.
For icons centered inside a shape, use inline SVG. Do not use Unicode text glyphs. Unicode glyphs are hard to center visually because their appearance changes based on fonts and browsers.