Search code examples
angulartypescriptangular-materialfavicon

closed - Change favicon Angular theme

I am rendering a dynamic page in my Angular application. I want to change favicon as per configured depending on the client. For example, if the client is tesco the favicon should be tesco favicon an so.

Any idea? I want do it using pure angular so please reject ideas with javascript.

Solution

  • similar question to -> Changing website favicon dynamically

    you will need to manipulate the native DOM link element to accomplish this.

    HTML

    <link rel="icon" id="favIcon" type="image/x-icon" href="./assets/favicon.ico" />

    Typescript

    export class AppComponent implements OnInit {
   favIcon: HTMLLinkElement = document.querySelector('#favIcon');

   constructor() {
     this.favIcon.href = './favicon_path_folder/favicon.ico';
   }
}

    using this you should be able to alter your code, so that when the client switches, or in ngOnInit of your target component you update the 'href' attribute of the faveIcon link