Replace Material Icons with Kolibri Design System Icon

[SukhvirKooner]

Summary

Fixes: #4907
This PR removes all instances of material-icons from the codebase and replaces them with corresponding icons from the Kolibri Design System where applicable. In cases where no direct replacement was available, the icons were removed (e.g., in base.html).

Changes Made

• Replaced all usages of material-icons with equivalent Kolibri Design System icons.

<svg
      v-else
      viewBox="0 0 40 40"
      :aria-label="kindTitle"
      class="nothumbnail-image"
      :class="$isRTL ? 'rtl-image' : 'ltr-image'"
    >
    <KIcon icon="image" 
        :x="-3"
        :y="y - 14"
        :style="{ fill: '#999999' }"  />
    </svg>

Before

After

<svg
      v-else-if="compact"
      viewBox="0 0 24 24"
      :aria-label="kindTitle"
      class="thumbnail-image"
    >
    <KIcon icon="infoOutline" 
        :x="+10"
        :y="y+20"
        :style="{ fill: '#ffffff' }"  />
    </svg>

Before

After

<svg
      v-else
      viewBox="0 0 40 40"
      :aria-label="title"
      class="nothumbnail-image"
      :class="$isRTL ? 'rtl-image' : 'ltr-image'"
    >
    <KIcon icon="image" 
        :x="-1"
        :y="y - 14"
        :style="{ fill: '#999999' }"  />
    </svg>

Before

After

• Removed instances where material-icons were referenced but not actively used. in base.html

Testing

• Verified that all updated icons render correctly in the UI.

• Ensured no broken references remain in the code.

• Manually tested affected pages to confirm visual correctness.

• Please feel free to share any suggestions or further changes you'd like me to make. I'm happy to update the PR as needed. Looking forward to your feedback!

[MisRob]

No update needed yet, just to understand the need to keep svg - if we removed svg and kept only KIcon, would there be a difference in user experience and what it would look like?

[SukhvirKooner]

• Removing the <svg> makes the icon appear like in the screenshot, where it loses proper responsiveness and alignment.
• Burying the icon within an <svg> ensures better adaptability since font-size scaling is harder to manage consistently.
• Using <svg> provides better control over size, alignment, and responsiveness across different screen sizes and layouts.

[MisRob]

Thank you @SukhvirKooner, that's helpful. The proper alignment should be achievable no matter of the presence of svg. However KIcon doesn't have auto-scaling feature as of now so it's fine to keep it withing svg to not have regressions.

We may want to consider having these behaviors supported by KIcon itself at some point in the future.

[MisRob]

In cases where no direct replacement was available, the icons were removed (e.g., in base.html)

@shruti862 I understand that this concerns the icons that you mention later and that "were referenced but not actively used", right?

[MisRob]

Thanks @SukhvirKooner, and as always, I appreciate that you manually tested thoroughly and provided us with such a helpful pull request description. For now just leaving a few clarification questions.