CSS .svg icon kullanımı

merhaba arkadaşlar cümleten hayırlı ramazanlar bir konu hakkında bilgi almak istiyorum boş zamanlarımda bir websitesi üzerinde uğraşıyorum hazırladığım websitesini google hız testine soktuğumda 4 kuralı düzeltmem gerektiğini söylüyor bunlardan birside icon optimizasyonu "<img src="https://www.maxigamerz.com/images/maxigamelogo.png"></img>" şeklinde .png olarak eklenen resimler geç yüklendiği için resimlerinizi ve iconlarınızı svg formatına çevirip class olarak kullanın demişler resimler kod olarak yüklendiği için daha hızlı yükleniyormuş bootstrap üzerinden bu işlem mevcut inceledim fakat kendi sistemime geçiremedim takıldığım nokta ise şurası bootstrap css kütüphanesinde bir class tanımlanıp bu class üzerinden iconun svg dosyasındaki yerini göstermişler
örnek: .glyphicon-asterisk:before{content:"\xe085"}

SVG dosyasındada bu icona karşılık gelen kod satırı bu şekilde

<glyph unicode="" d="M600 1177q117 0 224 -45.5t184.5 -123t123 -184.5t45.5 -224t-45.5 -224t-123 -184.5t-184.5 -123t-224 -45.5t-224 45.5t-184.5 123t-123 184.5t-45.5 224t45.5 224t123 184.5t184.5 123t224 45.5zM588 941q-29 0 -59 -5.5t-63 -20.5t-58 -38.5t-41.5 -63t-16.5 -89.5 q0 -25 20 -25h131q30 -5 35 11q6 20 20.5 28t45.5 8q20 0 31.5 -10.5t11.5 -28.5q0 -23 -7 -34t-26 -18q-1 0 -13.5 -4t-19.5 -7.5t-20 -10.5t-22 -17t-18.5 -24t-15.5 -35t-8 -46q-1 -8 5.5 -16.5t20.5 -8.5h173q7 0 22 8t35 28t37.5 48t29.5 74t12 100q0 47 -17 83 t-42.5 57t-59.5 34.5t-64 18t-59 4.5zM675 400h-150q-10 0 -17.5 -7.5t-7.5 -17.5v-150q0 -10 7.5 -17.5t17.5 -7.5h150q10 0 17.5 7.5t7.5 17.5v150q0 10 -7.5 17.5t-17.5 7.5z" />

fakat benim svg dosyalarım tek satır değil bu kodlar gibi belki 10 15 tane d= satırı var bende iconları tek tek dosya isminden ekledim

örnek: .test{content:"\bildirim.svg"}
icon satırı açılıyor fakat fakat içi boş bilgisi olan anlayan veya yorum yapabilecek birileri var mı ?