diff --git a/modules/fileicon/material.go b/modules/fileicon/material.go
index 5361592d8a..b8ee13cd8c 100644
--- a/modules/fileicon/material.go
+++ b/modules/fileicon/material.go
@@ -76,7 +76,7 @@ func (m *MaterialIconProvider) renderFileIconSVG(p *RenderedIconPool, name, svg,
 	if p.IconSVGs[svgID] == "" {
 		p.IconSVGs[svgID] = svgHTML
 	}
-	return template.HTML(`<svg ` + svgCommonAttrs + `><use xlink:href="#` + svgID + `"></use></svg>`)
+	return template.HTML(`<svg ` + svgCommonAttrs + `><use href="#` + svgID + `"></use></svg>`)
 }
 
 func (m *MaterialIconProvider) EntryIconHTML(p *RenderedIconPool, entry *EntryInfo) template.HTML {
diff --git a/modules/fileicon/render.go b/modules/fileicon/render.go
index 8ed86b9ac0..6b2fcfa81e 100644
--- a/modules/fileicon/render.go
+++ b/modules/fileicon/render.go
@@ -25,7 +25,7 @@ func (p *RenderedIconPool) RenderToHTML() template.HTML {
 		return ""
 	}
 	sb := &strings.Builder{}
-	sb.WriteString(`<div class=tw-hidden>`)
+	sb.WriteString(`<div class="svg-icon-container">`)
 	for _, icon := range p.IconSVGs {
 		sb.WriteString(string(icon))
 	}
diff --git a/routers/web/repo/treelist_test.go b/routers/web/repo/treelist_test.go
index 94ba60661b..019fe085d4 100644
--- a/routers/web/repo/treelist_test.go
+++ b/routers/web/repo/treelist_test.go
@@ -33,7 +33,7 @@ func TestTransformDiffTreeForWeb(t *testing.T) {
 	})
 
 	mockIconForFile := func(id string) template.HTML {
-		return template.HTML(`<svg class="svg git-entry-icon octicon-file" width="16" height="16" aria-hidden="true"><use xlink:href="#` + id + `"></use></svg>`)
+		return template.HTML(`<svg class="svg git-entry-icon octicon-file" width="16" height="16" aria-hidden="true"><use href="#` + id + `"></use></svg>`)
 	}
 	assert.Equal(t, WebDiffFileTree{
 		TreeRoot: WebDiffFileItem{
diff --git a/services/repository/files/tree_test.go b/services/repository/files/tree_test.go
index 38ac9f25fc..e7511b3eed 100644
--- a/services/repository/files/tree_test.go
+++ b/services/repository/files/tree_test.go
@@ -67,13 +67,13 @@ func TestGetTreeViewNodes(t *testing.T) {
 	curRepoLink := "/any/repo-link"
 	renderedIconPool := fileicon.NewRenderedIconPool()
 	mockIconForFile := func(id string) template.HTML {
-		return template.HTML(`<svg class="svg git-entry-icon octicon-file" width="16" height="16" aria-hidden="true"><use xlink:href="#` + id + `"></use></svg>`)
+		return template.HTML(`<svg class="svg git-entry-icon octicon-file" width="16" height="16" aria-hidden="true"><use href="#` + id + `"></use></svg>`)
 	}
 	mockIconForFolder := func(id string) template.HTML {
-		return template.HTML(`<svg class="svg git-entry-icon octicon-file-directory-fill" width="16" height="16" aria-hidden="true"><use xlink:href="#` + id + `"></use></svg>`)
+		return template.HTML(`<svg class="svg git-entry-icon octicon-file-directory-fill" width="16" height="16" aria-hidden="true"><use href="#` + id + `"></use></svg>`)
 	}
 	mockOpenIconForFolder := func(id string) template.HTML {
-		return template.HTML(`<svg class="svg git-entry-icon octicon-file-directory-open-fill" width="16" height="16" aria-hidden="true"><use xlink:href="#` + id + `"></use></svg>`)
+		return template.HTML(`<svg class="svg git-entry-icon octicon-file-directory-open-fill" width="16" height="16" aria-hidden="true"><use href="#` + id + `"></use></svg>`)
 	}
 	treeNodes, err := GetTreeViewNodes(ctx, curRepoLink, renderedIconPool, ctx.Repo.Commit, "", "")
 	assert.NoError(t, err)
diff --git a/web_src/css/modules/svg.css b/web_src/css/modules/svg.css
index 738ec22cd3..e32fa0911f 100644
--- a/web_src/css/modules/svg.css
+++ b/web_src/css/modules/svg.css
@@ -1,17 +1,24 @@
-.svg {
+/* some material icons have "fill=none" (e.g.: ".txt -> document"), so the CSS styles shouldn't overwrite it,
+ and material icons should have no "fill" set explicitly, otherwise some like ".editorconfig" won't render correctly */
+.svg:not(.git-entry-icon) {
   display: inline-block;
   vertical-align: text-top;
   fill: currentcolor;
 }
 
-.svg.git-entry-icon {
-  fill: transparent; /* some material icons have dark background fill, so need to reset */
-}
-
 .middle .svg {
   vertical-align: middle;
 }
 
+/* some browsers like Chrome have a bug: when a SVG is in a "display: none" container and referenced
+ somewhere else by `<use href="#id">`, it won't be rendered correctly. e.g.: ".kts -> kotlin" */
+.svg-icon-container {
+  position: absolute;
+  width: 0;
+  height: 0;
+  overflow: hidden;
+}
+
 /* prevent SVGs from shrinking, like in space-starved flexboxes. the sizes
    here are cherry-picked for our use cases, feel free to add more. after
    https://developer.mozilla.org/en-US/docs/Web/CSS/attr#type-or-unit is
diff --git a/web_src/js/components/ViewFileTreeStore.ts b/web_src/js/components/ViewFileTreeStore.ts
index 61d9168aa6..3066f95d87 100644
--- a/web_src/js/components/ViewFileTreeStore.ts
+++ b/web_src/js/components/ViewFileTreeStore.ts
@@ -17,7 +17,7 @@ export function createViewFileTreeStore(props: {repoLink: string, treePath: stri
         if (!document.querySelector(`.global-svg-icon-pool #${svgId}`)) poolSvgs.push(svgContent);
       }
       if (poolSvgs.length) {
-        const svgContainer = createElementFromHTML(html`<div class="global-svg-icon-pool tw-hidden"></div>`);
+        const svgContainer = createElementFromHTML(html`<div class="global-svg-icon-pool svg-icon-container"></div>`);
         svgContainer.innerHTML = poolSvgs.join('');
         document.body.append(svgContainer);
       }