Icon button show text at initial rendering before loading - google fonts
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
<span class="material-symbols-outlined">
delete
</span>
Initial phase its showing raw text and then after some time its display the icon, How can we fix this?
Solution
You can set display in the params, which does the same thing as CSS font-display property does.
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block" />
<span class="material-symbols-outlined">
delete
</span>- Why anchor tag does not take height and width of its containing element
- Add <style> element to an HTML using Python Dominate library
- how to remove blue background on chrome autocomplete
- How do I use variable fonts with Google Fonts?
- JS manipulates the DOM, then CSS doesn't load properly on refresh, even though cache is disabled
- Align section heading with the first content item instead of centering in Flexbox layout
- Get rid of spaces between spans
- Remove button when logged in (wordpress)
- Is border-image possible in Tailwind?
- How to strike through obliquely with css
- CSS cross through an element
- Is pop-out effect using blob svg achievable?
- How to set borders between children from parent in CSS?
- Amazon S3 CORS (Cross-Origin Resource Sharing) and Firefox cross-domain font loading
- How do CSS triangles work?
- Making planets follow their orbit in HTML/CSS
- How to make row scroll (overflow) on x axis when reach max width
- Why is CSS flex not working when deployed?
- Radial progress bar using TailwindUI
- Column of h2 elements takes width of the biggest, how to prevent?
- HTML5 and CSS grid - Can't get it to fit the content
- How to disable scroll without hiding it?
- Tailwind CSS "justify-center" works if used with "flex-row" but doesnt work with "flex-col"
- How can I change the color of an 'svg' element?
- How to control website tinting in Safari 15
- How do you prevent header tags from stretching across the body width
- Dark mode flickers a white background for a millisecond on reload
- How can I set "cursor: pointer" on Vuetify v-data-table rows? (expanded item area excluded)
- How can I inspect the shadow DOM of native controls in Chrome developer tools?
- 100vh height when address bar is shown - Chrome Mobile