other-icons

Custom Icons

This is a collection of custom icons for use in a project If new icons need to be added, please refer to Creating an Icon Set

You must recompile the app when new icons are added.

Installation

npm install other-icons

Usage

Import the Module into the module that you need the icons - if you wish, you can import at the app level to global usage.

Here is a sample of the import

@NgModule({
  declarations: [
    AppComponent,
    SearchFieldComponent,
  ],
  imports: [
    MaterialModule,
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    ...
    OtherIconsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Once imported use the following syntax for the icon

 <mat-icon svgIcon="other-book-solid"></mat-icon>

Please note that the icon set has been prefixed with other- then the icon name

Creating or Adding to an Icon Set

• Copy the other.defs.svg file into the assets folder

• Use the SVGConversionFormatService service and pass the string of the SVG file to convert and the id (name of the icon) to this function convertSVGToSymbol(svgString, "my-icon")

• Once the file is converted, the converted string will appear in the console.log() - copy and append it to the other.defs.svg inside the

  <svg>
  <defs>
  **YOUR CONVERSION STRING HERE**
  </defs>
  </svg>

Sample Conversion

• import the conversion service svg = inject(SVGConversionFormatService)

• use the conversion service sending the string and the id to use for the final convertion.

const svgString = this.svg.convertSVGToSymbol(symbolString, 'other-sample-icon')

Here is a sample

  const symbolString = `<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg viewBox="0 0 448 512" version="1.1" id="svg826" sodipodi:docname="plus-square-solid.svg" inkscape:version="1.1.1 (c3084ef, 2021-09-22)" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"><defs id="defs830" /><sodipodi:namedview id="namedview828" pagecolor="#ffffff" bordercolor="#111111" borderopacity="1" inkscape:pageshadow="0" inkscape:pageopacity="0" inkscape:pagecheckerboard="1" showgrid="false" inkscape:zoom="1.4042969" inkscape:cx="39.877608" inkscape:cy="264.5452" inkscape:window-width="1312" inkscape:window-height="969" inkscape:window-x="0" inkscape:window-y="25" inkscape:window-maximized="0" inkscape:current-layer="svg826" /><!-- Font Awesome Pro 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-32 252c0 6.6-5.4 12-12 12h-92v92c0 6.6-5.4 12-12 12h-56c-6.6 0-12-5.4-12-12v-92H92c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h92v-92c0-6.6 5.4-12 12-12h56c6.6 0 12 5.4 12 12v92h92c6.6 0 12 5.4 12 12v56z" id="path824" style="fill:#333333" /></svg>
`

  const svgString = this.svg.convertSVGToSymbol(symbolString, 'other-sample-icon');

  console.log('svgString: ', svgString)

Then take the string and

<symbol id="other-sample-icon" viewBox="0 0 448 512">
<path d="M400,32H48C21.5,32,0 53.5,0 80v352c0,26.5,21.5,48,48,48h352c26.5,0 48-21.5,48-48V80c0-26.5-21.5-48-48-48zm-32,252c0,6.6-5.4,12-12,12h-92v92c0,6.6-5.4,12-12,12h-56c-6.6,0-12-5.4-12-12v-92H92c-6.6,0-12-5.4-12-12v-56c0-6.6,5.4-12,12-12h92v-92c0-6.6,5.4-12,12-12h56c6.6,0 12,5.4,12,12v92h92c6.6,0 12,5.4,12,12v56z" fill="currentColor"></path>
</symbol>

paste it into your other.defs.svg file

<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
  ....APPEND YOUR STRING HERE
</defs>
</svg>