{"id":41505,"date":"2026-04-30T08:00:53","date_gmt":"2026-04-30T05:00:53","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=41505"},"modified":"2026-04-30T08:00:53","modified_gmt":"2026-04-30T05:00:53","slug":"angular-materialda-ozel-svg-ikonlari-kullanimi-kapsamli-bir-rehber","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/angular-materialda-ozel-svg-ikonlari-kullanimi-kapsamli-bir-rehber\/","title":{"rendered":"Angular Material’da \u00d6zel SVG \u0130konlar\u0131 Kullan\u0131m\u0131: Kapsaml\u0131 Bir Rehber"},"content":{"rendered":"

<\/p>\n

Angular Material’da \u00d6zel SVG \u0130konlar\u0131 Kullan\u0131m\u0131: Kapsaml\u0131 Bir Rehber<\/h2>\n

Modern web uygulamalar\u0131nda g\u00f6rsel tutarl\u0131l\u0131k ve kullan\u0131c\u0131 deneyimi, ba\u015far\u0131n\u0131n anahtarlar\u0131ndan biridir. Angular Material, Google’\u0131n Material Design prensiplerini Angular uygulamalar\u0131na ta\u015f\u0131yan g\u00fc\u00e7l\u00fc bir UI bile\u015fen k\u00fct\u00fcphanesidir. Bu k\u00fct\u00fcphane, haz\u0131r bile\u015fenlerin yan\u0131 s\u0131ra, ikon y\u00f6netimi i\u00e7in de esnek bir yap\u0131 sunar. Varsay\u0131lan olarak Material Design ikon setini (bir font ikonu seti) kullanmas\u0131na ra\u011fmen, \u00e7o\u011fu proje kendi markas\u0131na \u00f6zg\u00fc veya \u00f6zel tasarlanm\u0131\u015f ikonlara ihtiya\u00e7 duyar. \u0130\u015fte bu noktada \u00f6zel SVG (Scalable Vector Graphics) ikonlar\u0131 devreye girer.<\/p>\n

Bu makalede, Angular Material projelerinizde \u00f6zel SVG ikonlar\u0131n\u0131 nas\u0131l entegre edece\u011finizi, y\u00f6netece\u011finizi ve kullanaca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m, detayl\u0131 bir \u015fekilde inceleyece\u011fiz. G\u00fcvenlikten performansa, eri\u015filebilirlikten en iyi uygulamalara kadar t\u00fcm \u00f6nemli konulara de\u011finece\u011fiz.<\/p>\n

Angular Material’\u0131n \u0130kon Sistemi ve SVG \u0130konlar\u0131n\u0131n \u00d6nemi<\/h2>\n

Angular Material, MatIconModule<\/code> ve MatIconRegistry<\/code> servisleri arac\u0131l\u0131\u011f\u0131yla g\u00fc\u00e7l\u00fc bir ikon y\u00f6netim sistemi sunar. Bu sistem, hem font tabanl\u0131 ikonlar\u0131 (\u00f6rne\u011fin, Material Design Icons, Font Awesome) hem de SVG tabanl\u0131 ikonlar\u0131 destekler.<\/p>\n

Varsay\u0131lan olarak, Angular Material’\u0131n <\/code> bile\u015feni, Material Design ikon setini kullan\u0131r. Bu ikonlar, bir font dosyas\u0131 arac\u0131l\u0131\u011f\u0131yla y\u00fcklenir ve genellikle font_icon_name<\/code> \u015feklinde bir string de\u011feriyle kullan\u0131l\u0131r. \u00d6rne\u011fin: home<\/mat-icon><\/code>. Bu yakla\u015f\u0131m, bir\u00e7ok senaryo i\u00e7in yeterli ve pratiktir. Ancak, font tabanl\u0131 ikonlar\u0131n baz\u0131 k\u0131s\u0131tlamalar\u0131 vard\u0131r:<\/p>\n

* S\u0131n\u0131rl\u0131 \u00d6zelle\u015ftirme:<\/strong> Font ikonlar\u0131 genellikle tek renkte veya s\u0131n\u0131rl\u0131 renk paletleriyle gelir. Birden fazla renk veya karma\u015f\u0131k grafikler i\u00e7eren ikonlar i\u00e7in uygun de\u011fildir.
\n* Boyut ve \u00d6l\u00e7ekleme:<\/strong> Font ikonlar\u0131, metin gibi \u00f6l\u00e7eklenir. Piksel tabanl\u0131d\u0131rlar ve \u00e7ok b\u00fcy\u00fck boyutlarda pikselle\u015fme veya bulan\u0131kla\u015fma e\u011filimi g\u00f6sterebilirler.
\n* Paket Boyutu:<\/strong> \u00c7ok say\u0131da ikon i\u00e7eren font dosyalar\u0131, uygulaman\u0131z\u0131n ba\u015flang\u0131\u00e7 paket boyutunu art\u0131rabilir.<\/p>\n

\u00d6zel SVG ikonlar\u0131 ise bu k\u0131s\u0131tlamalar\u0131n \u00e7o\u011funu ortadan kald\u0131r\u0131r ve bir\u00e7ok avantaj sunar:<\/p>\n

* \u00c7\u00f6z\u00fcn\u00fcrl\u00fck Ba\u011f\u0131ms\u0131zl\u0131\u011f\u0131:<\/strong> SVG’ler vekt\u00f6r tabanl\u0131d\u0131r, yani herhangi bir \u00e7\u00f6z\u00fcn\u00fcrl\u00fckte veya boyutta kalitelerini kaybetmeden \u00f6l\u00e7eklenebilirler. Pikselle\u015fme veya bulan\u0131kl\u0131k sorunu ya\u015fanmaz.
\n* Tam \u00d6zelle\u015ftirme:<\/strong> SVG ikonlar\u0131, CSS ile kolayca renklendirilebilir, boyutland\u0131r\u0131labilir ve d\u00f6n\u00fc\u015ft\u00fcr\u00fclebilir. \u0130\u00e7erdikleri patikalar ve \u015fekiller sayesinde karma\u015f\u0131k, \u00e7ok renkli tasar\u0131mlar da desteklenir.
\n* Daha K\u00fc\u00e7\u00fck Dosya Boyutlar\u0131:<\/strong> \u0130yi optimize edilmi\u015f SVG dosyalar\u0131, genellikle e\u015fde\u011fer bitmap (PNG, JPG) veya font ikonlar\u0131na g\u00f6re daha k\u00fc\u00e7\u00fck boyutludur.
\n* Eri\u015filebilirlik:<\/strong> SVG’ler, anlamsal olarak daha zengin olabilir ve ekran okuyucular taraf\u0131ndan daha iyi yorumlanabilir.
\n* Marka Tutarl\u0131l\u0131\u011f\u0131:<\/strong> \u015eirketinizin veya projenizin \u00f6zel ikon setini kullanarak marka kimli\u011finizi uygulaman\u0131za sorunsuz bir \u015fekilde entegre edebilirsiniz.<\/p>\n

Bu avantajlar g\u00f6z \u00f6n\u00fcne al\u0131nd\u0131\u011f\u0131nda, \u00f6zel SVG ikonlar\u0131n\u0131 Angular Material projelerinize dahil etmek, uygulaman\u0131z\u0131n g\u00f6rsel kalitesini ve esnekli\u011fini \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131rabilir.<\/p>\n

\u00d6zel SVG \u0130konlar\u0131n\u0131 Entegre Etmeye Ba\u015flama<\/h2>\n

Angular Material’da \u00f6zel SVG ikonlar\u0131n\u0131 kullanmak i\u00e7in birka\u00e7 temel ad\u0131mdan ge\u00e7memiz gerekiyor. Bu ad\u0131mlar, ikonlar\u0131 uygulaman\u0131zda kaydedip ard\u0131ndan bile\u015fenlerinizde kullanmay\u0131 i\u00e7erir.<\/p>\n

Gereksinimler<\/h3>\n

Ba\u015flamadan \u00f6nce, a\u015fa\u011f\u0131daki gereksinimlerin kar\u015f\u0131land\u0131\u011f\u0131ndan emin olun:<\/p>\n

* Angular CLI Projesi:<\/strong> Angular CLI ile olu\u015fturulmu\u015f ve \u00e7al\u0131\u015fan bir Angular projesi.
\n* Angular Material Kurulumu:<\/strong> Projenize Angular Material’\u0131n do\u011fru \u015fekilde kurulmu\u015f ve yap\u0131land\u0131r\u0131lm\u0131\u015f olmas\u0131. E\u011fer kurulu de\u011filse, ng add @angular\/material<\/code> komutunu kullanarak ekleyebilirsiniz.
\n* SVG \u0130kon Dosyalar\u0131:<\/strong> Kullanmak istedi\u011finiz \u00f6zel SVG ikon dosyalar\u0131 (.svg<\/code> uzant\u0131l\u0131). Bu dosyalar\u0131n do\u011fru yap\u0131land\u0131r\u0131lm\u0131\u015f olmas\u0131 \u00f6nemlidir. Basit bir SVG dosyas\u0131 genellikle \u015f\u00f6yle g\u00f6r\u00fcn\u00fcr:<\/p>\n

\n    \n      \n      \n    <\/svg><\/code><\/pre>\n
    viewBox<\/code> \u00f6zniteli\u011fi, ikonun \u00f6l\u00e7eklenmesi i\u00e7in kritik \u00f6neme sahiptir. fill=\"currentColor\"<\/code> ise ikonun renginin \u00fcst elementin metin rengini almas\u0131n\u0131 sa\u011flar, bu da CSS ile kolayca renk de\u011fi\u015ftirmemize olanak tan\u0131r.<\/p>\n
Ad\u0131m 1: MatIconModule<\/code> ve MatIconRegistry<\/code>‘yi \u0130mport Etme<\/h3>\n
\u00d6ncelikle, ikon sistemini kullanabilmek i\u00e7in MatIconModule<\/code>‘\u00fc projenize dahil etmeniz gerekir. Ayr\u0131ca, SVG ikonlar\u0131n\u0131 kaydetmek i\u00e7in MatIconRegistry<\/code> servisine ve g\u00fcvenlik nedeniyle DomSanitizer<\/code> servisine ihtiyac\u0131m\u0131z olacak.<\/p>\n
Genellikle, bu import’lar app.module.ts<\/code> dosyas\u0131na veya uygulaman\u0131z\u0131n payla\u015f\u0131lan (shared) mod\u00fcl\u00fcne eklenir.<\/p>\n
\/\/ app.module.ts\nimport { NgModule } from '@angular\/core';\nimport { BrowserModule } from '@angular\/platform-browser';\nimport { BrowserAnimationsModule } from '@angular\/platform-browser\/animations';\nimport { MatIconModule, MatIconRegistry } from '@angular\/material\/icon'; \/\/ MatIconModule ve MatIconRegistry\nimport { HttpClientModule } from '@angular\/common\/http'; \/\/ SVG dosyalar\u0131n\u0131 HTTP ile \u00e7ekmek i\u00e7in\nimport { DomSanitizer } from '@angular\/platform-browser'; \/\/ G\u00fcvenlik i\u00e7in\n\nimport { AppComponent } from '.\/app.component';\n\n@NgModule({\n  declarations: [\n    AppComponent\n  ],\n  imports: [\n    BrowserModule,\n    BrowserAnimationsModule,\n    HttpClientModule, \/\/ Gerekli\n    MatIconModule     \/\/ Gerekli\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule {\n  constructor(\n    private matIconRegistry: MatIconRegistry,\n    private domSanitizer: DomSanitizer\n  ) {\n    \/\/ Burada ikonlar\u0131 kaydedece\u011fiz\n  }\n}<\/code><\/pre>\n
HttpClientModule<\/code>‘\u00fcn import edilmesi, MatIconRegistry<\/code>‘nin SVG dosyalar\u0131n\u0131 HTTP \u00fczerinden \u00e7ekebilmesi i\u00e7in gereklidir.<\/p>\n
Ad\u0131m 2: SVG \u0130konlar\u0131n\u0131 Kaydetme<\/h3>\n
MatIconRegistry<\/code> servisi, SVG ikonlar\u0131n\u0131 uygulaman\u0131z\u0131n global ikon setine kaydetmek i\u00e7in kullan\u0131l\u0131r. Bu servis, ikonlar\u0131 bir adla ili\u015fkilendirir, b\u00f6ylece <\/code> bile\u015feni arac\u0131l\u0131\u011f\u0131yla bu adla \u00e7a\u011fr\u0131labilirler.<\/p>\n
\u0130konlar\u0131 kaydetmek i\u00e7in MatIconRegistry<\/code>‘nin farkl\u0131 metodlar\u0131 bulunur:<\/p>\n
*   addSvgIcon(iconName: string, url: SafeResourceUrl)<\/code>: Belirli bir URL’den tek bir SVG ikonunu kaydeder.
\n*   addSvgIconSet(namespace: string, url: SafeResourceUrl)<\/code>: Belirli bir URL’den bir SVG ikon setini (birden fazla ikon i\u00e7eren bir SVG sprite dosyas\u0131) kaydeder.
\n*   addSvgIconLiteral(iconName: string, literal: SafeHtml)<\/code>: Do\u011frudan SVG i\u00e7eri\u011fini (string olarak) kaydeder.<\/p>\n
En yayg\u0131n kullan\u0131m, harici SVG dosyalar\u0131n\u0131 addSvgIcon<\/code> ile kaydetmektir. Bu metod, bir URL bekler, ancak Angular’\u0131n g\u00fcvenlik politikalar\u0131 nedeniyle do\u011frudan bir string URL veremeyiz. Bu noktada DomSanitizer<\/code> devreye girer. DomSanitizer.bypassSecurityTrustResourceUrl()<\/code> metodunu kullanarak, Angular’a bu URL’nin g\u00fcvenli oldu\u011funu ve i\u00e7eri\u011finin i\u015flenmesine izin verildi\u011fini belirtiriz.<\/p>\n
\u0130konlar\u0131n\u0131z\u0131 genellikle uygulaman\u0131n ba\u015flang\u0131c\u0131nda, AppModule<\/code>‘\u00fcn constructor’\u0131nda veya bir servis arac\u0131l\u0131\u011f\u0131yla kaydetmek iyi bir yakla\u015f\u0131md\u0131r.<\/p>\n
\u00d6rnek olarak, src\/assets\/icons<\/code> klas\u00f6r\u00fcnde bulunan home.svg<\/code> ve settings.svg<\/code> ad\u0131nda iki \u00f6zel ikonumuz oldu\u011funu varsayal\u0131m.<\/p>\n
\/\/ app.module.ts\nimport { NgModule } from '@angular\/core';\n\/\/ ... di\u011fer import'lar ...\nimport { MatIconModule, MatIconRegistry } from '@angular\/material\/icon';\nimport { HttpClientModule } from '@angular\/common\/http';\nimport { DomSanitizer } from '@angular\/platform-browser';\n\n@NgModule({\n  \/\/ ...\n})\nexport class AppModule {\n  constructor(\n    private matIconRegistry: MatIconRegistry,\n    private domSanitizer: DomSanitizer\n  ) {\n    \/\/ Her bir SVG ikonunu ayr\u0131 ayr\u0131 kaydetme\n    this.matIconRegistry.addSvgIcon(\n      'custom_home', \/\/ Bu ikonun kullan\u0131laca\u011f\u0131 ad\n      this.domSanitizer.bypassSecurityTrustResourceUrl('..\/assets\/icons\/home.svg')\n    );\n\n    this.matIconRegistry.addSvgIcon(\n      'custom_settings', \/\/ Bu ikonun kullan\u0131laca\u011f\u0131 ad\n      this.domSanitizer.bypassSecurityTrustResourceUrl('..\/assets\/icons\/settings.svg')\n    );\n\n    \/\/ Bir ikon setini kaydetme \u00f6rne\u011fi (e\u011fer ikonlar\u0131n\u0131z bir sprite dosyas\u0131ndaysa)\n    \/\/ this.matIconRegistry.addSvgIconSet(\n    \/\/   'my_icons', \/\/ Setin ad\u0131\n    \/\/   this.domSanitizer.bypassSecurityTrustResourceUrl('..\/assets\/icons\/my-icon-set.svg')\n    \/\/ );\n  }\n}<\/code><\/pre>\n
Burada, ‘custom_home’ ve ‘custom_settings’ adlar\u0131n\u0131 kullanarak SVG ikonlar\u0131m\u0131z\u0131 kaydettik. Bu adlar, daha sonra HTML \u015fablonlar\u0131m\u0131zda ikonlar\u0131 \u00e7a\u011f\u0131rmak i\u00e7in kullan\u0131lacak.<\/p>\n
G\u00fcvenlik Uyar\u0131s\u0131:<\/strong> bypassSecurityTrustResourceUrl<\/code> metodunu kullan\u0131rken dikkatli olun. Yaln\u0131zca g\u00fcvendi\u011finiz kaynaklardan gelen URL’leri bu metodla i\u015faretlemelisiniz. K\u00f6t\u00fc niyetli bir URL’nin ge\u00e7irilmesi, uygulaman\u0131z\u0131 XSS (Cross-Site Scripting) sald\u0131r\u0131lar\u0131na kar\u015f\u0131 savunmas\u0131z hale getirebilir. Kendi sunucunuzdaki veya bilinen, g\u00fcvenli CDN’lerdeki SVG dosyalar\u0131 genellikle g\u00fcvenlidir.<\/p>\n
Ad\u0131m 3: Kaydedilen \u0130konlar\u0131 Kullanma<\/h3>\n
\u0130konlar\u0131 MatIconRegistry<\/code>‘ye kaydettikten sonra, bunlar\u0131 uygulaman\u0131z\u0131n herhangi bir yerinde <\/code> bile\u015feni arac\u0131l\u0131\u011f\u0131yla kullanabilirsiniz. Tek yapman\u0131z gereken, svgIcon<\/code> \u00f6zelli\u011fine kaydetti\u011finiz ikonun ad\u0131n\u0131 ge\u00e7irmektir.<\/p>\n
\n
\n  
\u00d6zel SVG \u0130konlar\u0131<\/h2>\n  
Ana Sayfa: <\/mat-icon><\/p>\n  
Ayarlar: <\/mat-icon><\/p>\n\n  
\u0130konlar\u0131 Stilize Etme<\/h3>\n  <\/mat-icon>\n  <\/mat-icon>\n<\/div><\/code><\/pre>\n
SVG ikonlar\u0131n\u0131 stilize etmek, font ikonlar\u0131na g\u00f6re daha esnektir. <\/code> bile\u015feni, SVG i\u00e7eri\u011fini do\u011frudan DOM’a ekler ve bu SVG’nin fill=\"currentColor\"<\/code> veya stroke=\"currentColor\"<\/code> gibi \u00f6zellikler i\u00e7ermesi durumunda, ikonun rengi \u00fcst elementin metin rengini (CSS color<\/code> \u00f6zelli\u011fi) al\u0131r. Boyutland\u0131rma i\u00e7in ise font-size<\/code> \u00f6zelli\u011fi kullan\u0131l\u0131r.<\/p>\n
\/ app.component.css <\/em>\/\n.large-icon {\n  font-size: 36px; \/ \u0130konun boyutunu ayarlar <\/em>\/\n  width: 36px;     \/ SVG'nin geni\u015fli\u011fini de ayarlar <\/em>\/\n  height: 36px;    \/ SVG'nin y\u00fcksekli\u011fini de ayarlar <\/em>\/\n}\n\n.red-icon {\n  color: red; \/ \u0130konun rengini ayarlar <\/em>\/\n}<\/code><\/pre>\n
font-size<\/code> sadece ikonun genel boyutunu etkilerken, width<\/code> ve height<\/code> \u00f6zelliklerini de ayarlamak, \u00f6zellikle baz\u0131 taray\u0131c\u0131larda veya karma\u015f\u0131k SVG’lerde daha tutarl\u0131 bir g\u00f6r\u00fcn\u00fcm sa\u011flayabilir.<\/p>\n
En \u0130yi Uygulamalar ve Geli\u015fmi\u015f Kullan\u0131m<\/h2>\n
B\u00fcy\u00fck ve karma\u015f\u0131k uygulamalarda, ikonlar\u0131 y\u00f6netme yakla\u015f\u0131m\u0131m\u0131z\u0131 daha mod\u00fcler ve s\u00fcrd\u00fcr\u00fclebilir hale getirmemiz gerekir.<\/p>\n
\u0130konlar\u0131 Bir Serviste Y\u00f6netme<\/h3>\n
AppModule<\/code>‘\u00fcn constructor’\u0131nda t\u00fcm ikonlar\u0131 kaydetmek, k\u00fc\u00e7\u00fck uygulamalar i\u00e7in kabul edilebilir olsa da, ikon say\u0131s\u0131 artt\u0131k\u00e7a veya farkl\u0131 mod\u00fcllerin farkl\u0131 ikonlara ihtiyac\u0131 oldu\u011funda bu yakla\u015f\u0131m karma\u015f\u0131kla\u015fabilir. Daha iyi bir \u00e7\u00f6z\u00fcm, ikon kay\u0131t mant\u0131\u011f\u0131n\u0131 ayr\u0131 bir Angular servisine ta\u015f\u0131makt\u0131r.<\/p>\n
1.  \u0130kon Servisi Olu\u015fturma:<\/strong><\/p>\n
ng generate service core\/icon<\/code><\/pre>\n
    Bu, src\/app\/core\/icon.service.ts<\/code> yolunda bir servis olu\u015fturacakt\u0131r (veya tercih etti\u011finiz herhangi bir yol).<\/p>\n
2.  IconService<\/code> \u0130\u00e7eri\u011fi:<\/strong><\/p>\n
\/\/ src\/app\/core\/icon.service.ts\n    import { Injectable } from '@angular\/core';\n    import { MatIconRegistry } from '@angular\/material\/icon';\n    import { DomSanitizer } from '@angular\/platform-browser';\n\n    interface SvgIcon {\n      name: string;\n      path: string;\n    }\n\n    @Injectable({\n      providedIn: 'root'\n    })\n    export class IconService {\n\n      private readonly iconPaths: SvgIcon[] = [\n        { name: 'custom_home', path: '..\/assets\/icons\/home.svg' },\n        { name: 'custom_settings', path: '..\/assets\/icons\/settings.svg' },\n        { name: 'custom_profile', path: '..\/assets\/icons\/profile.svg' },\n        \/\/ ... di\u011fer ikonlar\n      ];\n\n      constructor(\n        private matIconRegistry: MatIconRegistry,\n        private domSanitizer: DomSanitizer\n      ) { }\n\n      public registerIcons(): void {\n        this.iconPaths.forEach(icon => {\n          this.matIconRegistry.addSvgIcon(\n            icon.name,\n            this.domSanitizer.bypassSecurityTrustResourceUrl(icon.path)\n          );\n        });\n\n        \/\/ \u0130sterseniz ikon setlerini de burada kaydedebilirsiniz\n        \/\/ this.matIconRegistry.addSvgIconSet(\n        \/\/   'my_icon_set',\n        \/\/   this.domSanitizer.bypassSecurityTrustResourceUrl('..\/assets\/icons\/my-icon-set.svg')\n        \/\/ );\n      }\n    }<\/code><\/pre>\n
3.  AppModule<\/code>‘de Servisi \u00c7a\u011f\u0131rma:<\/strong>
\n    Art\u0131k AppModule<\/code>‘\u00fcn constructor’\u0131nda sadece IconService<\/code>‘i enjekte edip registerIcons()<\/code> metodunu \u00e7a\u011f\u0131rabiliriz.<\/p>\n
\/\/ app.module.ts\n    import { NgModule } from '@angular\/core';\n    \/\/ ... di\u011fer import'lar ...\n    import { IconService } from '.\/core\/icon.service'; \/\/ Yeni servisimiz\n\n    @NgModule({\n      \/\/ ...\n    })\n    export class AppModule {\n      constructor(private iconService: IconService) {\n        this.iconService.registerIcons(); \/\/ \u0130konlar\u0131 uygulama ba\u015flang\u0131c\u0131nda kaydet\n      }\n    }<\/code><\/pre>\n
Bu yap\u0131land\u0131rma, ikon y\u00f6netimi logic’ini tek bir yerde toplar, kod tekrar\u0131n\u0131 azalt\u0131r ve gelecekte yeni ikon eklemeyi veya mevcut ikonlar\u0131 d\u00fczenlemeyi kolayla\u015ft\u0131r\u0131r.<\/p>\n
\u0130kon Y\u00fckleme Stratejileri<\/h3>\n
T\u00fcm ikonlar\u0131 uygulama ba\u015flang\u0131c\u0131nda y\u00fcklemek (eager loading), \u00e7o\u011fu k\u00fc\u00e7\u00fck ve orta \u00f6l\u00e7ekli uygulama i\u00e7in yeterlidir. Ancak \u00e7ok say\u0131da ikonunuz varsa veya baz\u0131 ikonlar yaln\u0131zca belirli, nadiren kullan\u0131lan mod\u00fcllerde gerekiyorsa, gecikmeli y\u00fckleme (lazy loading) stratejilerini d\u00fc\u015f\u00fcnebilirsiniz.<\/p>\n
*   Eager Loading (Mevcut Yakla\u015f\u0131m):<\/strong> T\u00fcm ikonlar\u0131 uygulama ba\u015flang\u0131c\u0131nda (genellikle AppModule<\/code>‘de veya ana bir serviste) kaydetmek. Basit ve kolay uygulanabilir.
\n*   Lazy Loading (Gecikmeli Y\u00fckleme):<\/strong> \u0130konlar\u0131 yaln\u0131zca ihtiya\u00e7 duyulan mod\u00fcl y\u00fcklendi\u011finde kaydetmek. \u00d6rne\u011fin, bir AdminModule<\/code>‘\u00fcn\u00fcz varsa ve bu mod\u00fcl\u00fcn kendine \u00f6zg\u00fc ikonlar\u0131 varsa, bu ikonlar\u0131 AdminModule<\/code>‘\u00fcn kendisinde veya ona \u00f6zel bir serviste kaydedebilirsiniz.<\/p>\n
\/\/ src\/app\/admin\/admin.module.ts\n    import { NgModule } from '@angular\/core';\n    import { CommonModule } from '@angular\/common';\n    import { AdminRoutingModule } from '.\/admin-routing.module';\n    import { MatIconModule, MatIconRegistry } from '@angular\/material\/icon';\n    import { DomSanitizer } from '@angular\/platform-browser';\n\n    @NgModule({\n      declarations: [],\n      imports: [\n        CommonModule,\n        AdminRoutingModule,\n        MatIconModule \/\/ Sadece bu mod\u00fclde MatIconModule'e ihtiyac\u0131m\u0131z varsa\n      ]\n    })\n    export class AdminModule {\n      constructor(\n        private matIconRegistry: MatIconRegistry,\n        private domSanitizer: DomSanitizer\n      ) {\n        \/\/ Admin mod\u00fcl\u00fcne \u00f6zg\u00fc ikonlar\u0131 burada kaydet\n        this.matIconRegistry.addSvgIcon(\n          'admin_dashboard',\n          this.domSanitizer.bypassSecurityTrustResourceUrl('..\/assets\/icons\/admin-dashboard.svg')\n        );\n        \/\/ ...\n      }\n    }<\/code><\/pre>\n
Bu yakla\u015f\u0131m, ana uygulaman\u0131n ba\u015flang\u0131\u00e7 paket boyutunu k\u00fc\u00e7\u00fcltmeye yard\u0131mc\u0131 olabilir.<\/p>\n
SVG Optimizasyonu<\/h3>\n
SVG dosyalar\u0131, tasar\u0131m yaz\u0131l\u0131mlar\u0131ndan d\u0131\u015fa aktar\u0131ld\u0131\u011f\u0131nda genellikle gereksiz meta veriler, yorumlar, bo\u015fluklar ve optimize edilmemi\u015f patikalar i\u00e7erir. Bu durum, dosya boyutunu gereksiz yere art\u0131r\u0131r. Daha k\u00fc\u00e7\u00fck SVG dosyalar\u0131, uygulaman\u0131z\u0131n daha h\u0131zl\u0131 y\u00fcklenmesine ve daha iyi performans g\u00f6stermesine yard\u0131mc\u0131 olur.<\/p>\n
*   SVGO (SVG Optimizer):<\/strong> SVG dosyalar\u0131n\u0131 optimize etmek i\u00e7in pop\u00fcler bir Node.js arac\u0131d\u0131r. Gereksiz elemanlar\u0131 kald\u0131r\u0131r, patikalar\u0131 basitle\u015ftirir ve dosya boyutunu \u00f6nemli \u00f6l\u00e7\u00fcde azalt\u0131r.<\/p>\n
npm install -g svgo\n    svgo -f assets\/icons --pretty<\/code><\/pre>\n
    Bu komut, assets\/icons<\/code> klas\u00f6r\u00fcndeki t\u00fcm SVG dosyalar\u0131n\u0131 optimize eder.
\n*   Tasar\u0131m Ara\u00e7lar\u0131:<\/strong> Tasar\u0131mc\u0131lar\u0131n\u0131zdan SVG’leri d\u0131\u015fa aktar\u0131rken “optimize edilmi\u015f” veya “web i\u00e7in” se\u00e7eneklerini kullanmalar\u0131n\u0131 isteyin.
\n*   Inline SVG:<\/strong> Baz\u0131 durumlarda, \u00e7ok k\u00fc\u00e7\u00fck ve kritik ikonlar i\u00e7in SVG i\u00e7eri\u011fini do\u011frudan HTML’e g\u00f6mmek (inline SVG) faydal\u0131 olabilir, ancak bu, MatIconRegistry<\/code>‘nin d\u0131\u015f\u0131na \u00e7\u0131kar.<\/p>\n
Eri\u015filebilirlik (Accessibility)<\/h3>\n
\u0130konlar genellikle g\u00f6rsel ipu\u00e7lar\u0131 sa\u011flar, ancak ekran okuyucular veya g\u00f6rme engelli kullan\u0131c\u0131lar i\u00e7in bu ipu\u00e7lar\u0131 yetersiz kalabilir. \u0130konlar\u0131n eri\u015filebilirli\u011fini art\u0131rmak i\u00e7in aria-label<\/code> veya aria-labelledby<\/code> gibi ARIA \u00f6zelliklerini kullanmal\u0131y\u0131z.<\/p>\n
*   aria-label<\/code> Kullan\u0131m\u0131:<\/strong> \u0130konun amac\u0131n\u0131 a\u00e7\u0131klayan k\u0131sa bir metin sa\u011flay\u0131n.<\/p>\n
<\/mat-icon>\n