ngx-bootstrap-icons
    TypeScript icon, indicating that this package has built-in type declarations

    1.5.2 • Public • Published

    Bootstrap logo

    ngx-bootstrap-icons

    This Angular module allows you to use the Bootstrap Icons in your angular application without additional dependencies.


    GitHub issues GitHub license GitHub stars npm version Package Quality Bootstrap logo

    npm i ngx-bootstrap-icons --save

    Bootstrap Icons full set

    Demo

    Demo Here

    Usage

    1. Install the package

    npm i ngx-bootstrap-icons --save

    2. Import module

    import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons';

    3. Import assets

    You can import all icons (not recomended) or each icon individually.

    3.1 Import all icons
    import { allIcons } from 'ngx-bootstrap-icons';
    3.2 Import some icons
    import { alarm, alarmFill, alignBottom } from 'ngx-bootstrap-icons';
    // Select some icons (use an object, not an array)
    const icons = {
      alarm,
      alarmFill,
      alignBottom
    };

    4. Import Module (all icons)

    import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons';
    
    @NgModule({
      declarations: [
        AppComponent
      ],
      imports: [
        BrowserModule,
        AppRoutingModule,
        NgxBootstrapIconsModule.pick(allIcons)
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }
    4.1. Import Module (some icons)
    import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons';
    import { alarm, alarmFill, alignBottom } from 'ngx-bootstrap-icons';
    
    // Select some icons (use an object, not an array)
    const icons = {
      alarm,
      alarmFill,
      alignBottom
    };
    
    @NgModule({
      declarations: [
        AppComponent
      ],
      imports: [
        BrowserModule,
        AppRoutingModule,
        NgxBootstrapIconsModule.pick(icons)
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }
    
    /**
    
    Another way.
    --------------
    
    Import NgxBootstrapIconsModule.pick(icons) inside of the AppModule
    
    Import NgxBootstrapIconsModule (without the pick() method) inside of any FeatureModule where will be used.
    
    Now you can import icons in one place only (root module) and successfully use the component anywhere you want.
    
    **/
    4.2. Configure Module (optional)
    import { NgxBootstrapIconsModule, ColorTheme } from 'ngx-bootstrap-icons';
    import { alarm, alarmFill, alignBottom } from 'ngx-bootstrap-icons';
    
    // Select some icons (use an object, not an array)
    const icons = {
      alarm,
      alarmFill,
      alignBottom
    };
    
    @NgModule({
      declarations: [
        AppComponent
      ],
      imports: [
        BrowserModule,
        AppRoutingModule,
        NgxBootstrapIconsModule.pick(icons, { 
            width: '2em', 
            height: '2em', 
            theme: ColorTheme.Danger,
        })
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }
    Configure options
    Name of input prarameter Type Required Default Value Description
    width string false null icon default width
    height string false null icon default height
    theme enum false null default color theme

    5. Use it in template

    <i-bs name="alarm-fill"></i-bs>

    or (with your preffered tag)

    <i i-bs name="alarm-fill"></i>

    or optionally use our enums for autocomplete support

    import { iconNamesEnum } from 'ngx-bootstrap-icons';
    
    public iconNames = iconNamesEnum;
    
    <i-bs [name]="iconNames.AlarmFill"></i-bs>

    Also you can use width and height for icon (By default width and height are 1rem)

    <i-bs 
      name="alarm-fill" 
      width="2rem" 
      height="2rem">
    </i-bs>
    <i
      i-bs 
      name="alarm-fill" 
      width="2rem" 
      height="2rem">
    </i>
    

    6. Input parameters

    Name of input prarameter Type Required Default Value Description
    name string true null name of the icon
    width string false null width of the icon. Default value used from svg
    height string false null height of the icon. Default value used from svg
    resetDefaultDimensions boolean false false if this parameter is set, default dimensions of the svg icon will be removed

    Install

    npm i ngx-bootstrap-icons

    DownloadsWeekly Downloads

    583

    Version

    1.5.2

    License

    MIT

    Unpacked Size

    11 MB

    Total Files

    2773

    Last publish

    Collaborators

    • avatar