Base solution for your next web application
Open Closed

Icons Per-Tenant #11075

User avatar
0
XugoWebTeam created
  • What is your product version? 9
  • What is your product type (Angular or MVC)? Angular
  • What is product framework type (.net framework or .net core)? .net core
  • Which theme are you using? Default

Hi,

We have a multi-tenant implementation of ASPNETZERO, and our needs require us to serve different icons to different Tenants.

Currently they way we are doing this is by forking the code in the HTML using appSession.tenancyName :

<img *ngIf="appSession.tenancyName.toLowerCase() == 'tenantName'

or:

<i *ngIf="appSession.tenancyName.toLowerCase() == 'tenantName' else defaultEventIcon;" class="la la-warning"><i>

<br> But this is not an ideal solution as the code can get messy as more and more icons/tenant are added

Can you recommend an alternative approach?

fyi - currently were using image icons, font icons and some SVG icons.

thank you

Go to accepted answer
7 Answer(s)
  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi @XugoWebTeam

    How do you decide which icon to use ? For example do you use la la-warning for one tenant and fa-solid fa-triangle-exclamation for another one ? The icon names differs as well, so I wonder how do you handle this before making a suggestion.

  • User Avatar
    0
    XugoWebTeam created

    Hi @ismcagdas,

    Yes thats right, the icon names are different. And in some csses, one tenant is using an icon font, like what you've posted above, and the other tenant is using a custom SVG I've created.

  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi @XugoWebTeam

    In that case, you need to create your own design to use different icons on different tenants. Using the setting system for this might be a good choice.

  • User Avatar
    0
    XugoWebTeam created

    Using the setting system for this might be a good choice.

    @ismcagdas Can you clarify what you mean by the Setting System please?

  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi,

    You can store icon set name in a setting for each tenant. After that, you can store a list on your app like below for example;

    {
    iconSet: 'font-awesone':
    icons: [
        {name: 'alert', value: 'fa-solid fa-triangle-exclamation'},
        ...
    ]
}

    When a tenant logs in, you can get the setting value;

    var iconSet = SettingManager.GetSettingValue("TenantIconSet");

    then, you can get the icon from your custom list like below:

    var iconClass = iconList[iconSet]["alert"]

    this code block will return "fa-solid fa-triangle-exclamation" if tenant uses font-awesone icon set. I wrote the last lines in JS but you can write a similar code for C# on server side if you need to handle this on server side.

  • User Avatar
    0
    XugoWebTeam created

    thanks for that @ismcagdas. Would this approach only work for font icons? Typically our scenario is this:

    Most tenants get the same icons, but theres a small group that need a few special icons in place of the regular icons. And usually those special icons would be custom-made SVGs.

    Would we need to make an icon font from the SVGs?

  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi,

    If you also want to use SVGs, in that case this approach will not work. You will need to change the structure a bit like below;

    icons: [
        {name: 'alert', type: 'font', value: 'fa-solid fa-triangle-exclamation'},
        {name: 'alert', type: 'svg', value: 'SVG CONTENT'},
        ...
    ]

    Then, when rendering the icon, if it is type is font, then you need to add its value to class of the i element. If it is type is svg, then you need to render its value as an HTML item.

Assignee
No one
Labels
None yet