CODEWITHSUNDEEP
aurelia-ui-framework
dan
dan

Reputation: 2957

Is there a root path you need to set for glyph svg icons to work in controls?

I have a toolbar copied from the example site working but none of the glyph icons are showing up. I can confirm that the same svg icons are working in non controls.

Toolbar code where glyphs are not working.

<template>
  <ui-page page-title="Toolbars" animate>
    <style>
      .example-container {
        position: relative;
        height: 450px;
        border: 1px solid #f0f0f0;
      }

    </style>
    <ui-content padded scroll>
      <ui-container>

        <ui-toolbar primary>
          <ui-input-group>
            <ui-input width="12em">
              <ui-input-addon glyph="icon-fill-search"></ui-input-addon>
            </ui-input>
            <ui-dropdown value="0">
              <ui-list-item value="0">Site</ui-list-item>
              <ui-list-item value="1">Posts</ui-list-item>
              <ui-list-item value="2">Docs</ui-list-item>
            </ui-dropdown>
          </ui-input-group>
          <ui-filler></ui-filler>
          <ui-button-group>
            <ui-button small light square glyph="icon-moon-undo2"></ui-button>
            <ui-button small light square glyph="icon-moon-redo2"></ui-button>
          </ui-button-group>
          <ui-button small light square glyph="icon-moon-cog" dropdown.bind="btnMenu"></ui-button>
          <ui-divider></ui-divider>
          <ui-button light>Save</ui-button>
          <ui-button light>Cancel</ui-button>
        </ui-toolbar>
        <br/>
        <ui-menu ref="btnMenu">
          <ui-menu-section>Actions</ui-menu-section>
          <ui-menu-item glyph="icon-moon-pencil">Edit</ui-menu-item>
          <ui-menu-item glyph="icon-moon-search">Search</ui-menu-item>
          <ui-menu-item glyph="icon-moon-bin">Delete</ui-menu-item>
          <ui-menu-section>Options</ui-menu-section>
          <ui-menu-item glyph="icon-moon-alarm">Notifications</ui-menu-item>
          <ui-menu-item glyph="icon-moon-cog">Settings</ui-menu-item>
        </ui-menu>
      </ui-container>
    </ui-content>
  </ui-page>
</template>

Non control glyph works as you can see when you select the glyphs page, then when you select the Hello page you can see that the toolbar is missing it's glyphs. -->

See image: Glyphs

Upvotes: 0

Views: 81

Answers (1)

Adarsh Pastakia
Adarsh Pastakia

Reputation: 46

Can you check if the icomoon svg file has been loaded, the icons prefixed glyph- is included in the framework by default, however the extra icons icomoon and hawcons need to be included in your app.html file

<compose view="../glyphs/icomoon.svg"></compose>
<compose view="../glyphs/hawcons-linear.svg"></compose>
<compose view="../glyphs/hawcons-filled.svg"></compose>

https://github.com/adarshpastakia/aurelia-ui-framework/blob/master/src/app.html

Upvotes: 2

Related Questions